elementUI二次封装-button

方案一

• 组件封装

  使用vm.$attrs接收传递过来的属性（class和style除外）

  使用vm.$listeners接收传递过来的事件（.native修饰器的除外）

  <template>
      <div>
          <el-button
           v-bind="$attrs"
           v-on="$listeners">
              {{ btnName }}
          </el-button>
      </div>
  </template>
  <script>
  export default {
      name: 'Button',
      props: {
          btnName: {
              type: String,
              default: '按钮'
          },
          btnConfig: {
              type: Object,
              default: () => {}
          }
      }
  }
  </script>
  

• 使用

  <template>
    <div id="app">
      <Button
       :btnName="btn.btnName"
       :size="btn.btnConfig.size"
       :type="btn.btnConfig.type">
      </Button>
    </div>
  </template>
  
  <script>
  import Button from './components/Button.vue'
  
  export default {
    name: 'App',
    components: {
      Button
    },
    data() {
      return {
        btn: {
          btnName: '测试',
          btnConfig: {
            size: 'mini',
            type: 'primary'
          }
        }
      }
    }
  }
  </script>
  

方案二

• 组件封装（依旧使用vm.$listeners接收事件传递）

  <template>
        <div>
            <el-button
             :size="btnConfig.size"
             :type="btnConfig.type"
             v-on="$listeners">
                {{ btnName }}
            </el-button>
        </div>
  </template>
  <script>
    export default {
        name: 'Input',
        props: {
            btnName: {
                type: String,
                default: '按钮'
            },
            btnConfig: {
                type: Object,
                default: () => {}
            }
        }
    }
   </script>
  

• 使用

  <template>
    <div id="app">
      <Button
       :btnName="btn.btnName"
       :btnConfig="btn.btnConfig">
      </Button>
    </div>
  </template>
  
  <script>
  import Button from './components/Button.vue'
  
  export default {
    name: 'App',
    components: {
      Button
    },
    data() {
      return {
        btn: {
          btnName: '测试',
          btnConfig: {
            size: 'mini',
            type: 'primary'
          }
        }
      }
    }
  }
  </script>
  

区别

方案一： 组件精简，在使用组件的时候配置如size、type等属性

方案二：组件直接封装好size、type等属性，使用的时候只需传入配置对象

根据业务的需要，考虑到可能会有中途更换ui库的情况（如ant-design），最终决定使用方案二，整体项目代码量也会相对少一点。

封装ant-design，直接修改对应属性即可