使用场景

主要抽离组件共用的代码，如各个页面中分页组件的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

 {
                    await this.loadingData('.el-container', async () => {
                        await this.apiDeletData();
                    });
                    this.loadListData();
                });
        }
    }
  }" _ue_custom_node_="true">

可以拆成三部分写：UI部分、分页数据部分、
userdata的部分

后续补vuex的内容