vue2 - 封装第三方 dialog

1. 介绍

直接使用第三方 dialog， 可使用 v-model 或 .sync 等控制显示或隐藏。

当需要封装第三方 dialog 时，如 详情页弹框，就需要额外的处理来进行关闭和隐藏。

2. 示例

2.1. van-popup

直接使用：

<template>
  <div id="app">
    <van-popup v-model="show">内容</van-popup>
  </div>
</template>
<script>
export default {
  data() {
    show: false,
  },
};
</script>

二次封装：

• DetailDialog.vue:

  <template>
    <div class="detail-dialog">
      <van-popup 
        :value="show"
        @click-overlay="closeDialog"
      >
        <van-icon
            class="van-popup__close-icon van-popup__close-icon--top-right"
            name="cross"
            @click="closeDialog"
        />
      内容
      </van-popup>
    </div>
  </template>
  <script>
  export default {
    props: {
      show: { type: Boolean, default: false },
      data: { type: Object, required: true },
    },
  
    model: {
      prop: 'show',
      event: 'update-show',
    },
  
    data() {
      return {
        formModel: {
          // ...
        }
      };
    },
  
    watch: {
      show(show) {
        if (show) {
          this.init();
        } else {
          this.reset();
        }
      },
    },
  
    methods: {
      init() {
        // this.data --> this.formModel
      },
  
      reset() {
        Object.assign(this.$data, this.$options.data.apply(this));
      },
  
      closeDialog() {
        this.$emit('update-show', false);
      },
    },
  };
  </script>
  

• App.vue:

  <template>
    <div id="app">
      <DetailDialog v-model="visible" :data="detailInfo" />
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        visible: false,
        detailInfo: {
          // ...
        },
      };
    },
  };
  </script>
  

3. 参考

无