技術標籤：VUEvue

自定義彈框實現

首先給父頁面中的對應按鈕或者超連結設定點選事件

在父頁面的父級資料夾下建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
}