使用element-ui二次封装一个可复用弹窗组件

Posted mingL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用element-ui二次封装一个可复用弹窗组件相关的知识,希望对你有一定的参考价值。

源码链接:弹窗组件

组件源码:

<template>
<transition name="el-fade-in"> 
<div v-if="modalCfg.visible" style="width:100%;height:100%;position:fixed;top:0px;left:0px;z-index:8;">
    <!-- 遮罩 -->
    <div class="ces-mask"></div>
    <div class="ces-modal-wrap">
      <div class="ces-modal" :style="{width:width}">
        <!-- 标题头部 -->
          <section  style="padding:10px;border-bottom: solid 1px #f1f1f1;" v-if="isHeader">
              <div class="ces-modal__header" >
              <div>{{modalCfg.title}}</div>
              <i class="el-icon-close ces-modal-close" @click="modalCfg.close(that)"></i>
              </div>
          </section>
          <!-- body -->
          <section class="ces-modal__body" style="padding:10px;" v-loading="modalLoading">
              <slot></slot>
          </section>
          <!-- 操作底部 -->
          <section style="padding:10px;border-top: solid 1px #f1f1f1;" v-if=\'isHandle\'>
              <div class="ces-modal__footer">
              <span>
                <el-button v-for=\'item in modalCfg.handles\' :key="item.label"
                    :type=\'item.type\' 
                    :icon=\'item.icon\' 
                    :size=\'item.size\'
                    :disabled=\'item.disabled\'
                    @click="item.handle(that)">{{item.label}}</el-button>
              </span>
              </div>
          </section>
      </div>
  </div>
</div>
</transition>
</template>

<script>

export default {
  
    props:{
      that: { type: Object, default: this },
      modalCfg:{
        visible:false,
        title:\'\',
        handles:[]
      },
      width:{
        type:String,
        default:\'50%\'
      },
      isHeader:{
        type:Boolean,
        default:true
      },
      modalLoading:{
        type:Boolean,
        default:false
      },
      isHandle:{
        type:Boolean,
        default:true
      }

    },
    computed: {
        
    },
    methods: {
      close(){
        this.$emit(\'close\')
      }
    }
}
</script>
View Code

 

页面调用:因为该组件和其他组件合在一起,这是一个系列

<template>
  <div class="ces-main">
    <!-- 搜索 -->
    <ces-search 
      :that=\'that\'
      size=\'mini\'
      labelWidth = \'50px\' 
      :searchData = "searchData"
      :searchForm = "searchForm"
      :searchHandle="searchHandle"></ces-search>

    <!-- 操作表格 -->
    <ces-table 
      :that=\'that\'
      size=\'mini\'
      :isSelection=\'true\'
      :isIndex=\'true\'
      :isPagination=\'true\'
      :isHandle=\'true\'
      :tableData=\'tableData\' 
      :tableCols=\'tableCols\' 
      :tableHandles=\'tableHandles\'
      :tablePage=\'tablePage\'></ces-table>

    <!-- 弹窗 -->
    <ces-modal width=\'450px\'
      :that=\'that\' :modalCfg=\'modalCfg\'>
        <ces-edit ref=\'cesEdit\' :that=\'that\' 
          :editCfg=\'editForm\' 
          :editData=\'editData\' 
          :editRules=\'editRules\' ></ces-edit>
      </ces-modal>
  </div>
</template>

<script>
import cesSearch from \'@/components/common/Form/searchForm\'
import cesTable from \'@/components/common/Table/Table\'
import cesModal from \'@/components/common/Modal/Modal\'
import cesEdit from \'@/components/common/Form/editForm\'
import { createNamespacedHelpers } from \'vuex\'
const { mapGetters, mapActions } = createNamespacedHelpers(\'Base\')

export default {
  data () {
    return {
      that:this
    }
  },
  components:{
    cesTable,
    cesSearch,
    cesModal,
    cesEdit
  },
  computed:{
    ...mapGetters([
      \'searchData\',\'searchForm\',\'searchHandle\',
      \'loading\',\'tableData\',\'tableCols\',\'tableHandles\',\'tablePage\',
      \'modalCfg\',
      \'editForm\',\'editData\',\'editRules\'])
  },
  methods:{
    ...mapActions([\'init\',\'showEditModal\',\'hideEditModal\',\'getData\',\'resetData\',\'validateAdd\',\'confirmDel\',\'validateEdit\'])
  }
}
</script>

<style>

</style>

最终效果图:

以上是关于使用element-ui二次封装一个可复用弹窗组件的主要内容,如果未能解决你的问题,请参考以下文章

使用element-ui二次封装公共查询组件

Vue项目中使用elementUI之Pagination分页组件的二次封装复用

element-ui组件的二次封装

agel-form 基于 element-ui form 的二次封装,数据配置表单,快速开发!

element-ui弹窗组件再次打开时残留上次打开时的数据

ant-design-vue弹窗二次封装,使其可自由拖动