从入行到现在也有几年了，刚入门的时候总能感受到自己的技术在提升，到现在的每天写bug->改bug->写bug的循环，然后就想着怎么可以少写代码，过着佛系养生生活
1.重复写的方法，要么写成公共方法，要么使用混入mixins
公共方法可以放在一个文件内，然后在main.js引用，全局挂载它，例如下图
import * as utils from '@/utils/index'
Vue.prototype.$utils = utils
//使用方法 this.$utils.xxx
混入的话，我在pc端上用的多，因为后台管理基本上都是增删改查功能，在混入的文件写好这些方法，一些可能会改变就用变量，例如下面代码，有些删减，可根据自己的需求修改
/*
** 混入，用途是复用 ,主要用于获取列表，编辑，修改，删除等方法
*/
import http from '@/api/http'
import qs from 'qs'
import * as url from '@/api/urlConfig'
export const viewsMixin = {
data() {
return {
// 设置属性
mixinViewsOptions: {
getDataListURL: '', // 数据列表接口，API地址
deleteURL: '', // 删除接口，API地址
detailURL: '', // 详情接口，API地址
addURL: '', //新增接口，API地址
updateURL: '', //修改接口，API地址
exportURL: '', // 导出接口，API地址
importExcelURl: '' //导入接口，API地址
},
dataList: [], // 数据列表
dataForm: {}, // 查询条件
addFrom: {}, //新增参数
updateForm: {}, //修改参数
detailForm: {}, //详情参数
deleteForm: {}, //删除情参数
importExceForm: {}, //导入参数
page: 1, // 当前页码
size: 10, // 每页数
total: 0, // 总条数
isLoading: false,
isAULoading: false, // 新增或修改，loading状态
dataListLoading: false, // 数据列表，loading状态
}
},
methods: {
// 初始搜索
initGetdataList() {
this.page = 1
this.getDataList()
},
// 初始化新增或修改页面
async initAddOrUpdate() {
},
// 重置筛选框
resetHandler() {
this.dataForm = {}
this.getDataList()
},
/*-------------- ] * 获取数据列表功能 - dataList - start * [ --------------*/
// 设置获取列表的参数
setDataOptions() {
let optons = {},
paramsData = {}
// 过滤掉空的
for (let key in this.paramsData) {
this.$utils.isEmpty(this.paramsData[key]) && (paramsData[key] = this.paramsData[key])
}
for (let key in this.dataForm) {
this.$utils.isEmpty(this.dataForm[key]) && (paramsData[key] = this.dataForm[key])
}
optons = paramsData
optons.page= this.page
optons.size= this.size
return optons
},
// 获取数据列表
async getDataList() {
if (!this.mixinViewsOptions.getDataListURL) {
return console.warn('获取列表的功能还未开发！');
}
let optons = await this.setDataOptions()
this.dataListApi(optons)
},
async dataListApi(optons) {
try {
this.dataListLoading = true
const res = await http.get(this.mixinViewsOptions.getDataListURL, optons)
this.setDataList(res.data)
this.dataListLoading = false
} catch (err) {
this.dataListLoading = false
}
},
// 设置列表
setDataList(data) {
this.dataList = data.list
this.total = data.total
},
// 分页, 当前页
pageCurrentChangeHandle(val) {
this.page = val
this.getDataList()
},
// 设置序号
typeIndex(index) {
return index + (this.page - 1) * 10 + 1;
},
/*-------------- ] * 获取数据列表功能 - dataList - end * [ --------------*/
// 返回上一级
goBack() {
this.$router.go(-1)
},
// 取消
cancelHandler() {
this.goBack()
// this.$router.push({path: this.mixinViewsOptions.datalistPath });
},
/*-------------- ] * 新增功能 - addFrom - start * [ --------------*/
// 添加
addHandle(type) {
if (!this.mixinViewsOptions.addURL) {
return this.$message.info('该功能还未开发！');
}
this.$refs.addFrom.validate((valid) => {
if (valid) {
this.addApi(type)
} else {
return false;
}
});
},
async addApi(type) {
try {
this.isAULoading = true
await http.post(this.mixinViewsOptions.addURL, this.addFrom)
this.$message.success('新增成功！');
this.isAULoading = false
this.cancelHandler()
} catch (err) {
this.isAULoading = false
this.$message.error(err)
}
},
/*-------------- ] * 新增功能 - addFrom - end * [ --------------*/
/*-------------- ] * 修改功能 - updateForm - start * [ --------------*/
// 修改
updateHandle(id) {
if (!this.mixinViewsOptions.updateURL) {
return this.$message.info('该功能还未开发！');
}
this.$refs.updateForm.validate((valid) => {
if (valid) {
this.updateApi(id)
} else {
return false;
}
});
},
async updateApi(id) {
try {
this.isAULoading = true
await http.post(`${this.mixinViewsOptions.updateURL}/${id}`, this.updateForm)
this.$message.success('修改成功！');
this.isAULoading = false
this.updateForm = {}
this.cancelHandler()
} catch (err) {
this.isAULoading = false
this.$message.error(err)
}
},
/*-------------- ] * 修改功能 - updateForm - end * [ --------------*/
/*-------------- ] * 详情功能 - detailForm - start * [ --------------*/
// 通过接口 获取详情
async datailHandle(options, type) {
try {
this.isLoading = true
const res = await http.get(`${this.mixinViewsOptions.detailURL}/${id}`, options)
this.setDetail(res.data)
this.isLoading = false
} catch (err) {
this.$message.error(err)
}
},
// 设置详情
setDetail(data) {
this.detailForm = data
},
/*-------------- ] * 详情功能 - detailForm - end * [ --------------*/
/*-------------- ] * 删除功能 - start * [ --------------*/
// 删除
deleteHandle(row, type) {
if (!this.mixinViewsOptions.deleteURL) {
return this.$message.info('该功能还未开发！');
}
this.$confirm('确认删除数据?', '提示', {
type: 'warning',
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(() => {
this.deleteApi(row, type)
}).catch(() => {
this.$message.info('已取消删除');
});
},
async deleteApi(row, type) {
try {
await http.delete(`${this.mixinViewsOptions.deleteURL}/${id}`, row)
this.$message.success('删除成功！');
this.getDataList()
} catch (err) {
this.$message.error(err)
}
},
/*-------------- ] * 删除功能 - end * [ --------------*/
/*-------------- ] * 其他功能 - start * [ --------------*/
// 导出
exportHandler() {
if (!this.mixinViewsOptions.exportURL) {
return this.$message.info('该功能还未开发！');
}
let params = qs.stringify(this.dataForm)
window.location.href = `${url.apiURL}${this.mixinViewsOptions.exportURL}?${params}`
}
/*-------------- ] * 其他功能 - end * [ --------------*/
}
}
2.多次引入的方法全局引入挂载
例如公共方法之类的，看上面
3.自动引入或注册
有时候每次新建一个文件就要引入或注册，这时候就可根据自己的需求节省工作量，我常用在的地方是，自动注册的公共组件和自动引入vuex模块，代码如下：
自动注册组件
//global.js
import Vue from 'vue'
/** *** 自动注册组件 不需要再important *** **/
const requireComponent = require.context(
'.', true, /\.vue$/
// 找到components文件夹下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
const componetConfig = requireComponent(fileName)
let a = fileName.lastIndexOf('/')
fileName = '.' + fileName.slice(a)
const componetName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
// console.log('自动注册组件', componetName)
Vue.component(componetName, componetConfig.default || componetConfig)
})
然后在main.js引入
//main.js
import '@/components/global.js' // 全局的组件注册
自动引入子模块
//store/index.js
// 自动引入子模块
const modulesFiles = require.context('./modules', false, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
let name = moduleName.substring(0, moduleName.lastIndexOf('-')); //去掉-store，我命名规律是admin-store.js, 不是的可以去掉这行
const value = modulesFiles(modulePath)
modules[name] = value.default
return modules
}, {})
除此之外，像管理后台菜单是后端返回的话，我也会写方法取菜单自动生成路由，提醒下，自动生成的路由，保存完了，刷新页面，需要再重新赋值component
4.自定义指令
有时候很多地方要限制，或者用到这时候就需要自定义指令上场了，例如：
/*
** 自定义指令
*/
import Vue from 'vue'
import * as storage from '@/utils/storage'
/*==================|-- * 只能输入正整数指令 * start --|==================*/
// 使用方法： v-enter-number
Vue.directive('enterNumber', {
inserted: function (el) {
el.addEventListener("keypress", function (e) {
e = e || window.event;
let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
let re = /\d/;
if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
});
//解决中文输入法下能输入中文的问题
let legalContent, //开启输入法之前的输入内容
LOCK = false; //是否开启中文输入法
el.addEventListener('compositionstart', (e) => {
legalContent = e.target.value; //保存中文输入法之前的内容
LOCK = true; //加上锁
}, false);
el.addEventListener('compositionend', (e) => {
e.target.value = legalContent;
LOCK = false; // 解锁
}, false);
el.addEventListener('input', (e) => {
if (!LOCK) {
e.target.value = e.target.value.replace(/\D/, '');
}
}, false);
}
});
/*==================|-- * 只能输入正整数指令 * end --|==================*/
/*==================|-- * 只能输入正数(包含小数)指令 * start --|==================*/
// 使用方法： v-enter-number-point
Vue.directive('enterNumberPoint', {
inserted: function (el) {
el.addEventListener("keypress", function (e) {
e = e || window.event;
let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
let re = /\d/;
if (charcode == 46) {
if (el.value && el.value.includes('.')) {
e.preventDefault();
}
return;
} else if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
});
let legalContent, //开启输入法之前的输入内容
LOCK = false; //是否开启中文输入法
el.addEventListener('compositionstart', (e) => {
legalContent = e.target.value; //保存中文输入法之前的内容
LOCK = true; //加上锁
}, false);
el.addEventListener('compositionend', (e) => {
e.target.value = legalContent;
LOCK = false; // 解锁
}, false);
el.addEventListener('input', (e) => {
if (!LOCK) {
e.target.value = e.target.value.replace(/^\d[\.]/g, '');
}
}, false);
}
});
/*==================|-- * 只能输入正数(包含小数)指令 * end --|==================*/
/*==================|-- * 后台管理按钮权限指令 * start --|==================*/
// 使用方法： v-has="`/table/Table_Update`"
Vue.directive('has', {
bind: function (el, binding) {
if (!binding.value) {
return el.style.display = 'none';
}
if (!Vue.prototype.$_has(binding.value)) {
el.style.display = 'none';
}
}
});
//权限检查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
let perms = storage.get('perms') || []
if (perms === undefined || perms === null || !perms) {
return false;
}
for (let item of perms) {
if (item && item.indexOf(value) > -1) {
isExist = true;
break;
}
}
// console.log('权限', perms)
return isExist;
};
/*==================|-- * 权限指令 * end --|==================*/
暂时就想到这么多，后期有就再补充
网友评论