iview modal 封装

这是一个比较常见的需求，以下是一个简单的 iView modal 封装示例：

<template>
  <div>
    <Modal
      v-model="visible"
      :title="title"
      :width="width"
      :mask-closable="maskClosable"
      :closable="closable"
    >
      <slot></slot>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'MyModal',
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 520
    },
    maskClosable: {
      type: Boolean,
      default: false
    },
    closable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

使用示例：

<template>
  <div>
    <Button type="primary" @click="openModal">打开 Modal</Button>
    <MyModal ref="myModal" title="这是一个标题">
      <p>这是 Modal 的内容！</p>
    </MyModal>
  </div>
</template>

<script>
import MyModal from '@/components/MyModal'

export default {
  components: {
    MyModal
  },
  methods: {
    openModal() {
      this.$refs.myModal.open()
    }
  }
}
</script>

这样就可以方便地在页面中使用 iView 的 Modal 组件，同时也可以根据业务需求进行定制化的配置。