封装elementUI-按钮组组件

<template>
  <div class="button-group">
    <ul v-for="(item,index) in button_group_list" :key="index">
      <li v-for='(button,i) in item' :key="i">
        <!-- 文件上传 -->
        <el-upload v-if='button.action'
          :disabled="button.disabled?button.disabled:false"
          :accept="button.accept?button.accept:'.xls,.xlsx'" 
          :action="button.action?button.action:''"
          :data="button.data?button.data:null" 
          :multiple='button.multiple?button.multiple:false'
          :show-file-list="button.showFileList?button.showFileList:false"
          :on-success="uploadSuccess"
          :on-error="uploadError">
          <el-button 
            size="mini" 
            type="text" 
            :disabled="button.disabled?button.disabled:false"
            @click="buttonClick(button.event)">
              <icon class="icon" :name="button.svg" scale="2.625"></icon>
              <p>{{button.text}}</p>
          </el-button>
        </el-upload>
        <!-- 默认的button -->
        <el-button v-else 
          size="mini" 
          type="text" 
          :disabled="button.disabled?button.disabled:false" 
          @click="buttonClick(button.event)">
            <icon class="icon" :name="button.svg" scale="2.625"></icon>
            <p>{{button.text}}</p>
        </el-button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'buttonGroup',
    data () {
      return {
      }
    },
    props:{
      button_group_list:{
        type:Array,
        require:true,
        defalut(){
          return []//数组形式
          /* 父组件中的参数格式：
            buttonGroupList:[
              [//每个数组就是一个ul
                {
                  svg:'chaxun',//svg的名字，必传
                  text:'查询',//按钮的名称，必传
                  event:'query'//点击按钮触发的事件名，必传
                },
                {
                  svg:'xinzeng',
                  text:'新增',
                  event:'add'
                },
                {
                  svg:'xiugai',
                  text:'修改',
                  event:'update'
                },
                {
                  svg:'shanchu',
                  text:'删除',
                  event:'del'
                },
              ],
              [
                {
                  svg:'daoru',
                  text:'导入',
                  action:setIP() + "ztgg/zqrl/import",//必传，根据它来判断是否启用upload组件
                  data:{nd:''},//要在其他地方给复制，这里赋不了值
                  multiple:false,//非必传，默认就是false
                  showFileList:false,//非必传，默认就是false
                  // event:'daoru'
                },
                {
                  svg:'daochu',
                  text:'导出',
                  event:'export'
                },
              ]
            ],
          */
        }
        
      },
    },
    methods:{
     
      /* 按钮的点击事件 */
      buttonClick(eventName){
        console.log(eventName)
        if(eventName){
          this.$emit(eventName)//触发父组件的点击事件名@eventName 对应的button传过来什么名字父组件就@什么名字
        }
      },

      /* 若有el-upload,则父组件就会有上传成功的钩子 */
      uploadSuccess(response, file, fileList){
        console.log(response, file, fileList)
        this.$emit('uploadSuccess',response, file, fileList)//触发父组件上传成功的回调@uploadSuccess
      },

      /* 若有el-upload,则父组件就会有上传失败的钩子 */
      uploadError(err, file, fileList){
        console.log(err, file, fileList)
        this.$emit('uploadError',err, file, fileList)触发父组件上传成功的回调@uploadError
      },
    },
    created(){
      console.log(this.button_group_list)
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.button-group svg{
  width: 20px;
  height: 20px;
}
.button-group{
  height: 46px !important;
}
.button-group ul{
  padding: 0 ;
  list-style: none;
  display: inline-block;
  margin:0 10px 4px 0 ;
}
.button-group ul:last-child{
  border-right: none;
}
.button-group .el-button{
  padding: 0 !important;
}
.button-group ul li{
  float: left;
}
.button-group ul li:last-child{
 padding-right: 16px;
}
.button-group .el-button p{
  margin: 8px;
  line-height: 0;
  font-size: 12px;
  -webkit-transform: scale(0.9);
  color: rgba(0,0,0,0.65);
}
.button-group .svg-icon:hover{
  opacity: 0.8;
}

</style>

效果：