This is the 15th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

In the process of programming development, it is important to encapsulate ideas, covering the whole aspect without dead Angle; If it is in the front-end development, component encapsulation is also a necessary idea, and the reuse of components is popular, not only convenient development and maintenance, but also greatly improve the development progress, so the use of reuse ideas is very important. So this blog post will share about the use of front-end reuse ideas, convenient development of the flexible use of reuse ideas, the previous development of a specific simple application to illustrate one aspect of reuse ideas.

The sample

This blog case to a module under the different state of the popbox reuse to explain, technical point is not difficult, share to the need of people, please go away. The specific demonstration is as follows:

1. First of all, the two places want to share a bullet frame. Before modifying the bullet frame, it is written as follows:

2. Then solve the above requirements, modify the reuse of the frame and the reuse of the operations inside the frame, the specific operations are as follows:

1.

<template> <page-header-wrapper> <div class="user-manager"> <a-tabs type="card" @change="callback"> <a-tab-pane key="1" TAB =" user list "> <a-button type="primary" class="addBtn BTN "@click="showModal"> Add </a-button> < A-button type="primary" </ 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 ? 'Edit user' : 'Add user '" :visible="visible" :confirm-loading="confirmLoading" :footer="null" Centered :destroyOnClose="true" > <a-form :form="form" :label-col="{ span: 0}" @submit="handleSubmit" class="user-form"> < A-col :span="12"> < A-form-item label=" user name "> < A-input v-decorator="[ 'username', { initialValue: curEle.username, rules: [{ required: true, message: 'Please enter a user name! '}}]] "/ > < / a - form - item > < / a - col > < a - col: span =" 12 "> < a form - the item label =" phone number "> < a - input v - decorator =" [' mobile ', { initialValue: curEle.mobile, rules: [{ required: true, message: 'Please enter a user name! '}}]] "/ > < / a - form - item > < / a - col > < / a - row > < div class =" btn_group "> < a button HTML - type =" submit "class =" sub_btn "> sure </a-button> < A-button @click="handleCancel"> Cancel </a-button> </div> </a-form> </a-modal> </page-header-wrapper> </template>Copy the code

2.

export default {undefined

  data () {undefined

    return {undefined

      isEdit: false

   }

 }

}
Copy the code

3.

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 } }) } }Copy the code

3, the specific final renderings are not shown here, after the above steps, also the content of this need to talk about the end, a simple case can be extracted from the Vue packaging reuse ideas, so in the front-end development process packaging reuse ideas everywhere, slowly experience it.

The last

This paper introduces the use of front-end reuse ideas, convenient for readers in the development of flexible use of reuse ideas, especially for the developers who just entered the front-end development is very necessary, and encapsulation ideas is a very important point in the front-end development process, the importance of self-evident, here will not repeat.

The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “Program Ape by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention!