element Drawer 抽屜的使用

之前沒有這個組件的時候是直接把dialog的樣式改了，改成了側彈窗的形式，element升級后就改成了Drawer 抽屜組件。

場景

Drawer 的關閉動畫沒有了。

代碼如下：

<el-drawer
  title="我是標題"
  v-if="drawer"
  :visible.sync="drawer"
  :before-close="handleClose">
  <span>我來啦!</span>
</el-drawer>

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

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

解決：去掉v-if，但是去掉v-if之后，drawer就和app同級了，樣式包裹在頁面的class里就沒用

visible.sync和v-if、v-show

visible.sync：雙向綁定值。

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

v-if 指令用于條件性地渲染一塊內容。

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

v-show 就簡單得多

• 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
• 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。

visible.sync和v-if、v-show的使用場景

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論