el-button简单二次封装

一、el-button简单二次封装

1.ButtonGenerator.vue

./components/Generator/ButtonGenerator.vue

<!--
  buttonList: Array
    传入想要的按钮内容
  class : 添加class类名
  buttonClick : item, index
    item  当前点击的按钮对象
    index 索引
 -->
<template>
  <div class="ButtonGenerator">
    <el-button v-for="(item,index) in buttonList"
               :key="index"
               class="ButtonGenerator-el-button"
               :size="item.size"
               :type="item.type"
               :plain="item.plain || false"
               :round="item.round || false"
               :circle="item.circle || false"
               :loading="item.loading || false"
               :disabled="item.disabled || false"
               :icon="item.icon"
               :autofocus="item.autofocus || false"
               :native-type="item.nativeType || 'button'"
               :class="item.class"
               @click="buttonClick(item,index)">
      {{item.label}}
    </el-button>
  </div>

</template>

<script>
export default {
  name: 'ButtonGenerator',
  props: {
    buttonList: {
      type: [Array, Object],
      default: () => [],
    },
  },
  methods: {
    buttonClick (item, index) {
      this.$emit('buttonClick', item, index);
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

2. mixins.js

./StaticFiles/mixins.js

export default {
  data() {
    return {
      methodsName: '', // 当前点击事件方法的名称
      methodsObj: {}, //当前点击事件方法的对象
      methodsIndex: '', // 当前点击事件方法的对象
      detailSaveObj: {}, // 当前点击的对象
      detailSaveIndex: '' // 当前点击的对象 索引
    }
  },
  methods: {
    buttonClick(item, index) {
      this.methodsIndex = index
      this.methodClick(item)
    },
    methodClick(methodsObj, item) {
      const type = methodsObj.methodsName
      this.methodsName = type
      this.methodsObj = methodsObj
      if (!type) return
      window.console.log('methodClick---')
      window.console.log('tmethodsObj, item', methodsObj, item)
      switch (type) {
        case 'add':
          this.add(methodsObj, item)
          break
        case 'edit':
          this.edit(methodsObj, item)
        case 'delete':
          this.delete(methodsObj, item)
          break
        case 'detail':
          this.detail(methodsObj, item)
          break
        default:
          this[type](methodsObj, item)
          break
      }
    }
  }
}

3.ButtonGenerator.js

./StaticFiles/index.js

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((itemModules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  itemModules[moduleName] = value.default
  return itemModules
}, {})

export default modules

./StaticFiles/modules/ButtonGenerator.js

export default {
  demo1: {
    ButtonList: [
      {
        size: '',
        type: '',
        plain: '',
        round: '',
        circle: '',
        loading: '',
        disabled: '',
        icon: '',
        autofocus: '',
        nativeType: '',
        label: 'label默认1',
        prop: '',
        methodsName: '',
        class: []
      },
      {
        size: 'medium',
        type: 'primary',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        icon: 'el-icon-edit',
        autofocus: false,
        nativeType: '',
        label: 'label默认2',
        prop: '',
        methodsName: ''
      },
      {
        size: 'medium',
        type: 'primary',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        icon: 'el-icon-edit',
        autofocus: true,
        nativeType: '',
        label: 'label默认2',
        prop: '',
        methodsName: ''
      },
      {
        size: 'small',
        type: 'success',
        plain: true,
        round: true,
        circle: true,
        // loading: true,
        // disabled: true,
        icon: 'el-icon-share',
        autofocus: false,
        nativeType: '',
        label: 'label默认2',
        prop: '',
        methodsName: ''
      },
      {
        size: 'small',
        type: 'success',
        plain: true,
        round: true,
        circle: true,
        // loading: true,
        // disabled: true,
        icon: 'el-icon-share',
        autofocus: true,
        nativeType: '',
        label: 'label默认2',
        prop: '',
        methodsName: ''
      },
      {
        size: 'mini',
        type: 'info',
        plain: true,
        round: true,
        circle: true,
        // loading: true,
        // disabled: true,
        icon: 'el-icon-delete',
        autofocus: false,
        nativeType: '',
        label: 'label默认2',
        prop: '',
        methodsName: ''
      },
      {
        size: 'mini',
        type: 'info',
        plain: true,
        round: true,
        circle: true,
        // loading: true,
        // disabled: true,
        icon: 'el-icon-delete',
        autofocus: true,
        nativeType: '',
        label: 'label默认2',
        prop: '',
        methodsName: ''
      },
      {
        size: 'medium',
        type: 'primary',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        icon: 'el-icon-edit',
        autofocus: false,
        nativeType: 'button',
        label: 'label默认2'
      },
      {
        size: 'medium',
        type: 'primary',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        icon: 'el-icon-edit',
        autofocus: false,
        nativeType: 'submit',
        label: 'label默认2',
        prop: 'demo1',
        methodsName: 'del'
      },
      {
        size: 'medium',
        type: 'primary',
        plain: false,
        round: false,
        circle: false,
        loading: false,
        disabled: false,
        icon: 'el-icon-edit',
        autofocus: false,
        nativeType: 'reset',
        label: 'label默认2',
        prop: 'demo1',
        methodsName: 'add'
      }
    ]
  }
}

4.index.vue

<template>
  <div class="vue--button">
    <h1>button 组件编写页面22</h1>
    <div class="vue--button-btn">
      <div>
        <ButtonGenerator :buttonList="demo1.ButtonList"
                         @buttonClick="buttonClick"></ButtonGenerator>
      </div>
    </div>
    <div></div>
  </div>
</template>
<script>
import ButtonGenerator from "@/components/Generator/ButtonGenerator.vue";
import StaticFiles from "@/StaticFiles/index.js"
import mixins from "@/StaticFiles/mixins.js"
import { deepClone } from "@/utils/index.js"
export default {
  mixins: [mixins],
  components: {
    ButtonGenerator
  },
  data () {
    return {
      demo1: {
        ButtonList: [],
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      const selfStaticFiles = deepClone(StaticFiles.ButtonGenerator)
      this.demo1.ButtonList = selfStaticFiles.demo1.ButtonList
    },
    del (methodsObj, item) {
      window.console.log('methodsObj,item', methodsObj, item);
    }
  },
}
</script>
<style scoped lang="less">
.vue--button {
  width: 80%;
  min-width: 1080px;
  margin: 20px auto;
  .vue--button-btn {
    margin: 20px 0px;
  }
}
</style>

二、总结

1.引入ButtonGenerator组件
2.把想要的按钮写入，buttonList即可使用