弹窗组件的可复用性

最新推荐文章于 2022-09-18 18:58:57 发布

d-resee-fer

最新推荐文章于 2022-09-18 18:58:57 发布

阅读量208

点赞数

文章标签：前端 javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_52819902/article/details/126313632

版权

在工作期间，做了一个项目，多次利用弹窗并且弹窗的内容有很大重复性，所以干脆直接将弹窗整合成一个组件，然后在页面上重复调用即可，这里是三个弹窗。

 <!-- 查看弹窗 -->
    <normal-dialog
    v-if="showDialogCheck"
      @ok="CheckOk"
      @cancel="CheckCancel"
     :person="person"
     type="查看">
    </normal-dialog>
 <!-- 创建弹窗 -->
    <normal-dialog
    v-if="showDialog"
      @ok="createOk(arguments)"
      @cancel="cancel"
      :person="{}"
      type="创建">
    </normal-dialog>
 <!-- 编辑弹窗 -->
    <normal-dialog
    v-if="showDialogEdit"
      @ok="EditOk(arguments)"
      @cancel="EditCancel"
      :person="person"
      type="编辑">
    </normal-dialog>

然后注册一下

import NormalDialog from './dialog/normal.vue'
import qs from 'qs'
export default {
  filters: {
    filter_status(value, list) {
      const typeArr = list.find((item) => item.code === value)
      return typeArr ? typeArr.label : ''
    }
  },
  components: {
    InputWithSearch,
    DeleteDialog,
    NormalDialog
  },

然后通过传递的person去控制需要操作的数据，通过传递的type值来执行不同的操作。

这里是子组件声明得props。

props:{
      person:{
        type:Object,
        default:{}
      },
      type:{
        type:String,
        default:''
      },
  },

然后我的表单数据就可以用v-if进行不同的操作和展示不同的样式。

          <el-form-item prop="" style="width: 590px; height:2px;">
            <span slot="label"><span style="font-weight: 400;">角色名称：</span></span>
               <el-input v-if="this.type=='创建'" v-model="per.roleName" ></el-input>
               <span v-else-if="this.type=='查看'">{{person.roleName}}</span>
               <el-input v-else v-model="per.roleName" ></el-input>
          </el-form-item>