Vue代碼優化之mixins 混合器的使用

使用場景

主要抽離組件共用的代碼，如各個頁面中分頁組件的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 =`<i style="color:${iconColor}; font-size:66px;margin-top: -22px;" class="${iconClass}"></i><br>
            <p style="font-size:16px;color: #333333;font-weight:500;margin-top: 7px;">${title}</p><span style="font-size:14px;color: #969696;font-weight:400;">${msg}</span>`;
          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

<template>
  <div class="home-model">
    <my-table :data="data"></my-table>
    <my-paging
      :page-length="pageLength"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total">
    </my-paging>
  </div>
</template>

<script>
  import page from '../mixins/mixin'
  export default {
    mixins: [page],
    data () {
      return {
        data: [],
        pageLength: 10,
        pageSize: 1,
        currentPage: 1,
        total: 20
      }
    },
    methods:{
        handleDelete(){
               this.confirm('請確認是否需要刪除?','確認刪除？',async () => {
                    await this.loadingData('.el-container', async () => {
                        await this.apiDeletData();
                    });
                    this.loadListData();
                });
        }
    }
  }
</script>

可以拆成三部分寫：UI部分、分頁數據部分、
userdata的部分

後續補vuex的內容