自定义弹框实现

自定义弹框实现

首先给父页面中的对应按钮或者超链接设置点击事件

在父页面的父级文件夹下建components文件  在components下建弹框的内容的页面 (比如页面a) 里面写弹框的内容和样式 ，事件等
用import把 a页面导入你需要弹框的页面  也就是父页面 然后在父页面中注册组件 引入 

• 这里用新增来表述：新增事件add
• 父页面中 add事件中 用 this.$store.commit(“传过去的方法名”, “引入的弹框的页面的名字”);
• 子页面中 用watch监听 store文件夹下状态的变化 比如

  watch: {
    "$store.state.AddChildInfo.AddChildInfo.status": {
      handler(val) {
        console.log(val, "监听对象");
        this.dialogVisible = val;
      },
    },
  }
  //第一个AddChildInfo指的是store下面的AddChildInfo文件夹
  //第二个指的是文件夹下面的vue文件中的state中的属性

• 记得在弹框 el-dialog中添加:visible.sync=“dialogVisible” （dialogVisible随便起的名字）

• 在store文件夹下建对应的文件 用来处理js代码

• 在store文件夹下的index.js中 import导入你刚才创建的文件 并在 modules中引入

文件夹中的vue文件的内容

const state = {
  designShow: false,
  designShowName: "",
  UpdateChildInfo: {   //子组件监听的就是该属性
      status: false,
      data: {}
  },
}
const mutations = {
  showUpdateChildInfo(state, payload) {   // showUpdateChildInfo 就是刚才从父页面中add事件传过来的方法
      state.designShow = true
      state.designShowName = payload
      state.UpdateChildInfo.status = true
  },
  closeUpdateChildInfo(state, payload) {
      state.designShow = false
      state.designShowName = ""
      state.UpdateChildInfo.status = false
  },
}

export default {
  namespaces: true,
  state,
  mutations
}