iview-Modal组件的二次封装

ivew中model的简单二次封装

二次封装基本会涉及到 vue组件通信，监听或者计算属性。
我二次封装的目的主要是实现编辑功能，效果

好了，上代码：

    //myModel.vue
    <template>
            <Modal
                v-model="visible"
                :title="title"
                @on-ok="ok"
                @on-cancel="cancel"
            >
                <ol>
                    <li v-for="(value,key,index) in Data" :key="index">
                        <span>{{key}}</span>
                        <Input type="text"
                               v-model="Data[key]"
                               :disabled="dataOptions.disabled.includes(index)"
                               :type="dataOptions.typeAreas.includes(index) ? 'textarea' : 'text'"
                        />
                    </li>
                </ol>
            </Modal>
    </template>
    <script>
      export default {
        name: "myModel",
        props: {
          data:{ type: Object },
          show: Boolean,
          options: {
            type: Object
          }
        },
        data() {
          return {
            visible: this.show,
            Data: this.data,
            isEdited: false,
            title: '编辑',
            style: {
              // width: this.dataOptions.width,
            }
          }
        },
        computed: {
          dataOptions(){
            return this.options;
          }
        },
        watch: {
          show(newv,oldv){
            this.visible = newv;
          },
          Data: {
            handler(){
              this.isEdited = true;
            }
          }
        },
        mounted() {
          console.log(this.Data);
        },
        methods: {
          ok(){
            this.visible = false;
            if(this.isEdited)
            this.$emit('mdyData',this.data);
            this.$emit('showModel',this.visible);
          },
          cancel(){
            this.visible = false;
            this.$emit('showModel',this.visible);
          },
        }
      }
    </script>

//样式自己调啊

    //user.vue
    <template>
        <div id="user-manage">
            <article class="border">
                <div class="um-body" ref="fiBody">
                    <Table
                            :columns="filterColumns"
                            :data="filterData"
                            :max-height="maxHeight"
                            no-filtered-data-text="/"
                            ref="filterTable"
                    >
                        <template slot-scope="{ row, index }" slot="action">
                            <div>
                                <svg class="icon" aria-hidden="true" @click="handleUserEdit(row,index)">
                                    <use xlink:href="#icon-bianji"></use>
                                </svg>
                                <svg class="icon" aria-hidden="true" @click="handleUserDel(row,index)">
                                    <use xlink:href="#icon-shanchu"></use>
                                </svg>
                            </div>
                        </template>
                    </Table>
                </div>
                <div class="um-footer">
                    <Page
                            :total="100"
                            show-elevator
                            :page-size="10"
                            size="small"
                            @on-change="handlePage"
                    />
            </article>
            <my-modal :show="editShow" :data="renderData" 
            :options="editOptions" v-on:showModel = "showModel" 
            v-on:mdyData="myData">
            </my-modal>
        </div>
    </template>
    
    <script>
      import myModel from '../../components/myModel.vue'
      export default {
        name: "userMan",
        components: {
          'my-modal': myModel
        },
        data(){
          return {
            editShow: false,
            maxHeight: '',
            // autoHeight: 600,
            filterColumns: [],
            filterData: [],
            renderData: {},
            editOptions: {
              width: '75%',
              disabled: [0],
              typeAreas: [8],
            }
          }
        },
        methods: {
          handleUserEdit(row, index) {
            this.editShow = true;
            this.filterColumns.forEach((item,index) => {
              if(index < this.filterColumns.length - 1 )
                this.$set(this.renderData, item.title, row[item.key]);
            });
            console.log('editshow: ',this.editShow);
          },
          handleUserDel(row,index){
          },
          addEqu(){
            this.editShow = true;
          },
          delOk(){},
          delCancel(){},
          handlePage(page){
            console.log(page)
          },
          myData(data){
            console.log('来自子组件： ',data);
          },
          showModel(show){
            console.log('show: ',show);
            this.editShow = show;//这里的show是为了让modal组件里的show监听到变化
          }
        }
      }
    </script>

你想吃彩虹糖吗？我有长颈鹿，可以挤给你！