配置數(shù)據(jù)
將配置數(shù)據(jù)從代碼中分離出來，以后可能會修改的參數(shù)不可以寫死在代碼里是钥，需要提取出來通過變量配置掠归。
需要提取的數(shù)據(jù)
1、圖片
2悄泥、URL
3虏冻、提示語
4、驗證
5弹囚、重復(fù)的值
6兄旬、未來可能變更的值
圖片
utils - img-local-path.js
const iconAll = {
// 提示
icon_tip: require('@/assets/images/tips.svg'),
}
export {iconAll}
使用圖片的組件
import { iconAll } from "@/utils/img-local-path";
export default {
name: "generalTips",
data(){
return{
iconAll: iconAll,
}
}
}
<img :src="iconAll.icon_tip" alt="">
URL
const api = {
// 圖片上傳
imgManage: '/imgUpload',
// 文章管理
articleManage: {
articleList: params => axios.get('/articleList', {params}),
articleDetail: params => axios.get('/articleDetail', {params}),
},
}
export default api
提示語
utils - text-local.js
const messageAll = {
// 提示語位置
messagePosition: 300,
/**
* @position article.vue
* */
// 1、文章列表刪除文章成功后
// 2余寥、產(chǎn)品列表刪除產(chǎn)品成功后领铐，上移，下移宋舷，置頂成功后
operationMsg: '操作成功',
}
export { messageAll }
驗證
utils - validate.js
const validateAge = (rule, value, callback) => {
if (value === '') {
return callback(new Error('請輸入年齡'))
} else if (value.length >3) {
return callback(new Error('不能超過3位數(shù)'))
} else if (!/^\d{1,3}$/.test(value)) {
return callback(new Error('請輸入數(shù)字'))
} else {
callback()
}
}
const validate = {
// 輸入長度限制
maxLengthSmall: 50,
maxLengthMiddle: 100,
maxLengthLarge: 500,
age: [
{
required: true,
validator: validateAge,
trigger: 'blur'
}
],
name: [
{
required: true,
message: '請輸入姓名',
trigger: 'blur'
}
],
}
export default validate
