element Drawer 抽屜的使用

之前沒(méi)有這個(gè)組件的時(shí)候是直接把dialog的樣式改了，改成了側(cè)彈窗的形式，element升級(jí)后就改成了Drawer 抽屜組件。

場(chǎng)景

Drawer 的關(guān)閉動(dòng)畫(huà)沒(méi)有了。

代碼如下：

<el-drawer
  title="我是標(biāo)題"
  v-if="drawer"
  :visible.sync="drawer"
  :before-close="handleClose">
  <span>我來(lái)啦!</span>
</el-drawer>

<script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
      };
    },
    methods: {
      handleClose(done) {   //使用before-close會(huì)暫停 Drawer 的關(guān)閉
        this.$confirm('確認(rèn)關(guān)閉？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

原因：使用了v-if控制Drawer 的顯示

解決：去掉v-if，但是去掉v-if之后，drawer就和app同級(jí)了，樣式包裹在頁(yè)面的class里就沒(méi)用

visible.sync和v-if、v-show

visible.sync：雙向綁定值。

• 初始情況下通過(guò)該值控制 dialog顯示。dialog關(guān)閉的時(shí)候，element自動(dòng)設(shè)置該值為false。
• 當(dāng)子組件執(zhí)行 close 事件的時(shí)候，不僅改變了自己內(nèi)部的 isShow 的值，而且還將 父組件的 visible的狀態(tài)發(fā)生了改變.

v-if 指令用于條件性地渲染一塊內(nèi)容。

• 這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染。
• v-if 是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N(xiāo)毀和重建。
• v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。

v-show 就簡(jiǎn)單得多

• 不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
• 一般來(lái)說(shuō)，v-if 有更高的切換開(kāi)銷(xiāo)，而 v-show 有更高的初始渲染開(kāi)銷(xiāo)。

visible.sync和v-if、v-show的使用場(chǎng)景

• 如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。但是父子組件，在子組件 close 方法中,雖然已經(jīng)將 isShow 改變?yōu)?false，但是并沒(méi)有通知到 父組件，而在父組件中，控制彈出框的現(xiàn)實(shí)和隱藏是通過(guò) show 。點(diǎn)擊子組件的關(guān)閉按鈕時(shí)，父組件的 show 沒(méi)有發(fā)生改變，這時(shí)候需要用visible.sync。
• Vue 會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開(kāi)始渲染。因此，想要重新渲染可以添加一個(gè)具有唯一值的 key 屬性

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論