通过一些后台管理系统框架学习了一些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 = rows
this.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'
}
}
})
}
如果有不足请指正,欢迎分享一些封装方法的经验,会不断总结一些封装方法。