通过一些后台管理系统框架学习了一些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) {
this.addOrUpdateDialogVisible = true
this.title = payload.title
if (payload.title === '修改') {
//回显数据
this.$refs.updateOrAdd.getDataInfos(payload.scope.row.id)
} 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:[]
}
}
//行点击
tableRowClickHandler(row, column, event) {
this.$refs.multipleTable.toggleRowSelection(row, true);
},
//表格选中
tableSelectHanler(rows) {
this.ids.length = 0
this.traverseChildren(rows)
console.log(this.ids, 'ids')
},
//递归子元素
traverseChildren(v) {
for (let i = 0; i < v.length; i++) {
this.ids.push(v[i].id)
if (v[i].children) {
this.traverseChildren(v[i].children)
} else {
continue
}
}
},
分页接口的封装
思路 将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
}
},
对于表单相关操作的封装
思路：首先保证命名一致才行
//表单退出前的回调
handleClose() {
this.$refs.form.resetFields()
this.$emit('update:addOrUpdateDialogVisible', false)
},
//点击取消
cancel() {
this.$refs.form.resetFields()
this.$emit('update:addOrUpdateDialogVisible', false)
},
//新增的初始化操作
addInit() {
this.$refs.form.resetField()
},
//父组件点击修改子组件回显
//回显信息
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'
}
}
})
}
如果有不足请指正，欢迎分享一些封装方法的经验，会不断总结一些封装方法。
