使用场景
主要抽离组件共用的代码，如各个页面中分页组件的data、methods，和ui原型中统一的confirm和alert弹窗
以及加载的进度条等
混合器：
// mixin.js
export const page = {
data() {
return {
pageSize:20,
currentPage: 1
pageLength: 10,
}
},
methods: {
/**
* 上一页
*/
prevPage (page) {
...
},
/**
* 下一页
*/
nextPage (page) {
...
}
/**
* 跳转到当前页
*/
currentPage (page) {
...
}
}
}
export const ui= {
methods: {
async loadingData (target, callback) {
const loading = this.$loading({
lock: true,
text: '处理中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)',
target: target ? target : document.body,
});
try {
await callback();
} finally {
loading.close();
}
},
confirm (msg,title='提示',doConfirm, doCancel, options={}) {
let defaultOpts ={
type: 'warning'
};
let opts = { ...defaultOpts, ...options };
let iconClassObj = {
'warning':'el-icon-warning-outline',
'err':'el-icon-circle-close',
'success':'el-icon-circle-check'
}
let iconColorObj = {
'warning':'#e6a23c',
'err':'#EE020B',
'success':'#14B216'
}
const iconClass = iconClassObj[opts.type];
const iconColor = iconColorObj[opts.type];
let html =`
${title}
${msg}`;
this.$confirm(html, '', {
confirmButtonText: '确定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
center: true,
cancelButtonClass:'dialog-cancel-btn',
confirmButtonClass: 'dialog-confirm-btn'
}).then(async () => {
try {
if (doConfirm) {
await doConfirm();
}
}
catch (err) {
console.log(err);
}
}).catch(async () => {
try {
if (doCancel) {
await doCancel();
}
}
catch (err) {
console.log(err);
}
});
},
alert (msg, title='提示', doCancel) {
this.$alert(msg, title, {
showConfirmButton: false,
callback: async action => {
if (action == 'cancel') {
if (doCancel) {
await doCancel();
}
}
},
});
},
},
};
页面.vue
可以拆成三部分写：UI部分、分页数据部分、
userdata的部分
后续补vuex的内容