iview 如何跨组件控制和同步 Modal 的显示隐藏

最新推荐文章于 2024-04-12 10:14:11 发布

landiyaaa

最新推荐文章于 2024-04-12 10:14:11 发布

阅读量1.1k

点赞数 3

分类专栏： Vue js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/landiyaaa/article/details/112451588

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

开发中经常遇到的情况，假如页面需要弹出一个模态框，这个框里的内容也比较多，那么很自然地会考虑把模态框及其中的内容抽成单个组件，再由页面去引用并控制它的显示隐藏。

那么，在中间多出一层封装的情况下，如何同步控制模态框的显示隐藏状态呢？

外层页面组件

<PriceInfodModal v-model="modalShow" />

data(){
    return {
        modalShow: false    // 控制且同步模态框显示隐藏的变量
    }
}

中间组件，对iview modal 和其内容进行封装

// template 部分
// 这里引用 iview 的 modal
<Modal
  v-on="$listeners"
  :value="value"
>
   <div>...内容...</div>
</Modal>

// js 部分
export default {
  model: {
    prop: 'value',
    event: 'on-visible-change',
  },
  props: {
    value: {
      type: Boolean,
    },
  },
}


// 如果使用了框架 vue-property-decorator ，就换成以下写法
@Model('on-visible-change', Boolean)
value: boolean