前端开发： Vue 封装复用思想的运用（其一）

2021 年 12 月 05 日
本文字数：2031 字
阅读完需：约 7 分钟

前言

在编程开发过程中，封装思想很重要，涵盖整个方面无死角；如果是在前端开发的时候，组件封装也是必备思想，而且组件的复用深入人心，既方便开发维护，也可大大提高开发进度，所以复用思想的运用很重要。那么本篇博文就来分享一下关于前端的复用思想的运用，方便开发的时候复用思想的灵活运用，以前端开发的一个具体的简单应用来说明复用思想的一个方面。

示例

本博文案例以一个模块下的不同状态的弹框复用来进行讲解，技术点不难，分享给有需要的人，不喜请走开。具体演示如下所示：

1、首先来看一下，两个地方想公用一个弹框，未修改弹框之前的写法如下：

2、接着对上述需求进行解决，修改弹框的复用，以及弹框里面的操作的复用，具体操作如下所示：

①

<template>
  <page-header-wrapper>
    <div class="user-manager">
      <a-tabs type="card" @change="callback">
        <a-tab-pane key="1" tab="用户列表">
          <a-button type="primary" class="addBtn btn" @click="showModal"> 添加 </a-button>
          <a-button type="primary" class="delBtn btn" @click="delUser"> 删除 </a-button>
          <a-input v-model="queryParam.id" placeholder="请输入关键字搜索" class="searchInput" />
          <a-table
            :columns="columns"
            :data-source="userList"
            :row-selection="{ onChange: onChange }"
            :rowKey="record => record.id"
          >
            <a slot="action" slot-scope="record">
              <i class="iconfont iconpencil" @click="editUser(record)"></i>
            </a>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-modal
      :width="880"
      :title="isEdit ? '编辑用户' : '添加用户'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :footer="null"
      centered
      :destroyOnClose="true"
    >
      <a-form :form="form" :label-col="{ span: 0 }" @submit="handleSubmit" class="user-form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="用户名称">
              <a-input
                v-decorator="[
                  'username',
                  { initialValue: curEle.username, rules: [{ required: true, message: '请输入用户名称!' }] }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号">
              <a-input
                v-decorator="[
                  'mobile',
                  { initialValue: curEle.mobile, rules: [{ required: true, message: '请输入用户名称!' }] }
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="btn_group">
          <a-button html-type="submit" class="sub_btn"> 确定 </a-button>
          <a-button @click="handleCancel"> 取消 </a-button>
        </div>
      </a-form>
    </a-modal>
  </page-header-wrapper>
</template>

复制代码

②

export default {undefined
  data () {undefined
    return {undefined
      isEdit: false
   }
}
}

复制代码

③

methods: {undefined
   showModal () {undefined
      this.visible = true
    },
   async editUser (val) {undefined
      this.curEle = val
      this.isEdit = true
      this.visible = true
    },
   handleSubmit (e) {undefined
      e.preventDefault()
      const type = this.isEdit ? updateUser : addUser
      const val = this.isEdit ? { id: this.curEle.id } : {}
      this.form.validateFields((err, values) => {undefined
        values.roleIds = [values.role]
        const opt = Object.assign(val, values)
        if (!err) {undefined
          this.setData(opt, type)
          this.visible = false
        }
      })
    }
}