zoukankan      html  css  js  c++  java
  • 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的内容

  • 相关阅读:
    Leetcode 191.位1的个数 By Python
    反向传播的推导
    Leetcode 268.缺失数字 By Python
    Leetcode 326.3的幂 By Python
    Leetcode 28.实现strStr() By Python
    Leetcode 7.反转整数 By Python
    Leetcode 125.验证回文串 By Python
    Leetcode 1.两数之和 By Python
    Hdoj 1008.Elevator 题解
    TZOJ 车辆拥挤相互往里走
  • 原文地址:https://www.cnblogs.com/mrwh/p/12500030.html
Copyright © 2011-2022 走看看