vue 弹窗组件

vue 弹窗

• <el-dialog> </el-dialog>

  • 可以在其中编写所需的弹窗显示的内容
  • 也可以在其中放组件标签作为弹窗

• 放一个组件的话，例：

  <el-dialog v-model="addGoodsDialog" :title="addGoodsTitle" width="60%" destroy-on-close="true"
             :close-on-press-escape="false" :close-on-click-modal="false">
      <addGoods @closeAddAndEditForm="closeAddAndEditForm" @saveCallBack="saveCallBack"
                :opr-flag="oprFlag"
                ref="appGoods" :goodsSPFLOptions="goodsSPFLOptions" :addGoodsData="addGoodsData"
                ></addGoods>
  </el-dialog>
  

  • v-model="addGoodsDialog" ——> const addGoodsDialog = vue.ref(false); // 对话窗显示与否（ boolean 值判断是否开弹窗 —— 因为修饰在了弹窗标签上 ）

    • 点击增加方法事件后：addGoodsDialog.value = true; // 打开弹窗

  • :title="addGoodsTitle" ——> const addGoodsTitle = vue.ref(''); // 弹出的对话框的标题（ 固定的？ ）

    • 点击增加方法：addGoodsTitle.value = "新增商品"; // 改变标题
    • 常见的 title 是静态属性，值是固定不变的
    • :title 是动态属性，是通过 Vue 的数据绑定语法将一个变量的值动态绑定到属性上

  • destroy-on-close="true" ——> 控制在关闭对话框时是否销毁对话框组件：当设置为 false 时，对话框关闭时组件将保留在 DOM 中，下次打开时不需要重新创建

  • :close-on-press-escape="false" ——> 控制是否在按下键盘的 ESC 键时关闭对话框：当设置为 true 时，按下 ESC 键将关闭对话框

  • :close-on-click-modal="false" ——> 控制是否在点击对话框外的区域时关闭对话框：当设置为 false 时，点击对话框外的区域不会关闭对话框

  • @closeAddAndEditForm="closeAddAndEditForm" ——> 接收子组件传来的方法或值（ 注意是子组件 emit("xx") 的和父组件的 @xx 相对应 ）

    • 子组件里编码 emit("closeAddAndEditForm"); 回调，就会触发父组件的 @closeAddAndEditForm，然后父组件调用双引号里面的 closeAddAndEditForm 方法：

      const closeAddAndEditForm = () => { // 若是子组件传了参数，就在这行的 = () => 的括号里面接收，{ 里做处理 }
          addGoodsDialog.value = false; // 关闭弹窗
      };
      

  • @saveCallBack="saveCallBack" ——> 与上述同理

  • :opr-flag="oprFlag" ——> const oprFlag = vue.ref('') // 增或改的标识（add / edit）

  • ref="appGoods" ——> 是将对话框内部的子组件 <addGoods> 注册为对话框组件的引用，这样就可以通过这个引用来访问子组件的实例或调用子组件的方法

  • :goodsSPFLOptions 和 :addGoodsData 就和 :opr-flag="oprFlag" 一样是自己向传入到组件中使用的数据

• 当然也可以直接在同一个 vue 里（ 不另起 vue 组件 ）：

  // ...... 主页面内容
  <el-dialog v-model="dialogFormVisible" :title="editGoodsTitle">
      <el-container>
          <el-main>
              // ......
          </el-main>
      </el-container>
  </el-dialog>