©2020-2024 ioDraw All rights reserved,
Privacy Policy
通过一些后台管理系统框架学习了一些Vue2的封装思想，自己尝试去在项目中封装一些公共方法。
//混入中data数据 data() { return { page: 1, total: 0, pageSize: 10, tableData: [],
searchInfo: {}, //表格多选的信息收集 ids: [], //修改或新增时标题 title: '', //弹框的显隐
addOrUpdateDialogVisible: false, //点击修改传入的id updateId: '' } },
<>父组件刷新
我的思路是在混入中提供refresh方法，并在混入中使用provide，将该方法注入给子孙等需要的组件中
//在组件中引入 import {getDataInfos} from '@.....' refresh() { this.getDataInfos(); }
<>新增和修改
新增和修改被我抽成子组件了，新增和修改功能大同小异，无非是修改的时候需要提供一个id来回显数据。因此这里方式比较多，我的思路①是提供一个公共方法addOrUpdateHandler（payload）并接受一个对象，paoload中提供一些标题信息title来修改子组件表单的title，在方法中做判断如果是的修改则通过refs获取子组件身上的回显数据的方法，如果是修改则调用子组件身上清空表单的方法。②通过vuex实现，（但觉得没太大必要，毕竟只涉及父子之间通信）但思路是，如果是修改可以dispatch发送请求然后获取数据，子组件内通过watch监听vuex中对应状态的变化，当发生变化回显即可。
//在模板中 @click="addOrUpdateHandler({title:'新增'})" @click=
"addOrUpdateHandler({title:'修改',scope})" //在methods中 addOrUpdateHandler(payload,
ids='') { console.log(payload,ids) this.addOrUpdateDialogVisible = true this.
title= payload.title.concat(payload.name?payload.name:'') if (payload.title ===
'修改') { //回显数据 this.$refs.updateOrAdd.getDataInfos(ids) } else { //新增清空操作 this.
$refs.updateOrAdd.addInit() } },
<>提示信息的封装
这个比较简单，而且在后台管理系统中使用很多。包括提示信息的notify的封装也是类似
success_or_faild(res) { if (res.code === 0) { this.$message.success(res.msg)
return true } else { this.$message.error(res.msg) return false } },
<>表格的点击事件的封装
如果表格支持多选，就可以使用，即使是树形结构也可以，
data(){ return{ ids:[] } } //表格选中改变 tableSelectChangeHanler(rows) { this.ids =
rowsthis.ids = [...new Set(this.ids)] console.log(this.ids) }, //取消勾选状态
toggleRowSelection(selection, data) { if (data.children) { data.children.forEach
(val => { this.$refs.multipleTable.toggleRowSelection(val, false); if (val.
children) { this.toggleRowSelection(selection, val) } }) } }, //表格全选
tableSelectAllHandler(selection) { if (selection && selection.length === this.
tableData.length) { selection.forEach(element => { this.tableSelectHandler(
selection,element); }); } else { this.$refs.multipleTable.clearSelection(); } },
tableSelectHandler(selection, row) { if(selection.find(val => { return val.id
=== row.id } )){ if(row.children){ row.children.forEach(val=>{ this.$refs.
multipleTable.toggleRowSelection(val, true); selection.push(val) if(val.children
){ this.tableSelectHandler(selection,val) } }) } }else{ this.toggleRowSelection(
selection,row) } },
<>分页接口的封装
思路 将axios请求传给listApi，然后每个组件调用时候给listApi相应接口就行
import getDataInfo from '@......' data(){ return{ listApi:getDataInfo, } }
handleSizeChange(val) { this.pageSize = val this.getTableData() },
handleCurrentChange(val) { this.page = val this.getTableData() }, async
getTableData(page = this.page, pageSize = this.pageSize) { const table = await
this.listApi({ page, pageSize, ...this.searchInfo }) if (table.code === 0) {
this.tableData = table.data.list this.total = table.data.total this.page = table
.data.page this.pageSize = table.data.pageSize } },
<>对于表单相关操作的封装
思路：首先保证命名一致才行
addInit() { this.$nextTick(() => { this.$refs.form.resetFields() }) },
//表单退出前的回调 handleClose() { this.$refs.form.resetFields() this.$emit(
'update:addOrUpdateDialogVisible', false) }, //点击取消 cancel() { this.$refs.form.
resetFields() this.$emit('update:addOrUpdateDialogVisible', false) }, confirm()
{ this.$refs.form.validate(async valid => { if (!valid) { this.$message.warning(
'必填项不能为空或不符合规范') return } let res = await this.submitInfo(this.form,this.title.
includes('新增')) if (this.success_or_faild(res)) { this.$refs.form.resetFields()
this.$emit('update:addOrUpdateDialogVisible', false) this.hasUpload() this.$emit
('refresh') } }) }, //父组件点击修改子组件回显 //回显信息 async getDataInfos(id) { let res =
await getDataInfo({ 'key': id }) if (this.success_or_faild(res)) { this.form =
res.data } console.log(res) }, props: { addOrUpdateDialogVisible: {//新增修改弹框的显影
type: Boolean, default: false }, title: {//标题 type: String, default: '新增' }, },
<>按钮鉴权自定义指令的封装
自定义指令本是为了操作原生DOM的，但是有时候在表格内部的操作按钮权限容易出现一些问题，因此考虑了一下也没必要移除DOM，例如判断权限问题，使用的时候加修饰符not直接回隐藏掉该按钮，
// 权限按钮展示指令 import { store } from '@/store' export const auth = (Vue) => { Vue.
directive('auth', { // 当被绑定的元素插入到 DOM 中时…… bind: function(el, binding) { const
userInfo= store.getters['user/userInfo'] let type = '' console.log(userInfo,
'获取用户的信息') switch (Object.prototype.toString.call(binding.value)) { case
'[object Array]': type = 'Array' break case '[object String]': type = 'String'
break case '[object Number]': type = 'Number' break default: type = '' break }
if (type === '') { /* eslint-disable */ console.error(
"v-auth必须是Array,Number,String属性,暂不支持其他属性") /* eslint-enable */ return }
//自定义指令接受的参数 const waitUse = binding.value.toString().split(',') let flag =
waitUse.some(item => item === userInfo.authorityId) if (binding.modifiers.not) {
flag= !flag } if (!flag) { el.style.display = 'none' } } }) }
如果有不足请指正，欢迎分享一些封装方法的经验，会不断总结一些封装方法。