vue el-button 封装及使用

本文介绍: 使用了 Elem ent UI 中的 el–button 组件，并对其进行了封装和定制。

使用了 Elem ent UI 中的 el–button 组件，并对其进行了封装和定制。

创建 组件 index.vue (src/common–ui/button/index.vue)

<template&gt;
  <el-button
      class="h-button"
      :type="type"
      :icon="hIcon"
      :disabled="disabled"
      @click="$emit('click')"
      :loading="loading"
  &gt;
    <span class="h-button-caption"&gt;{{ hCaption }}</span&gt;</el-button
  &gt;
</template&gt;

<script&gt;
  export default {
    name: 'HButton',
    props: {
      action: {
        type: String,
        validator (value) {
          return (
              [
                'add',
                'edit',
                'delete',
                'export',
                'print',
                'return',
                'entry',
                'addNoti',
                'download',
                'appointRow'
              ].indexOf(value) !== -1
          )
        },
        defautl: 'add'
      },
      type: {
        type: String,
        default: 'primary'
      },
      btnClass: String,
      caption: String,
      icon: String,
      disabled: {
        type: Boolean,
        default: false
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        hCaption: '',
        hIcon: ''
      }
    },
    created () {
      switch (this.action) {
        case 'add':
          this.hCaption = '新增'
          this.hIcon = ''
          break
        case 'edit':
          this.hCaption = '编辑'
          this.hIcon = ''
          break
        case 'delete':
          this.hCaption = '删除'
          this.hIcon = ''
          break
        case 'export':
          this.hCaption = '导出'
          this.hIcon = ''
          break
        default:
          this.hCaption = this.caption
          this.hIcon = this.icon
          break
      }
      if (this.caption) {
        this.hCaption = this.caption
      }
    },
    computed: {
      hasImg () {
        return (
            this.action === 'export' ||
            this.action === 'add' ||
            this.action === 'edit' ||
            this.action === 'delete' ||
            this.action === 'print' ||
            this.action === 'return' ||
            this.action === 'entry' ||
            this.action === 'addNoti'
        )
      },
      isLang () {
        return (
            this.hCaption &amp;&amp;
            (this.hCaption.length > 4 ||
                (this.hCaption.length > 3 &amp;&amp; (this.hIcon || this.hasImg)))
        )
      }
    },
    watch: {
      btnClass: {
        handler (val) {
        },
        immediate: true
      }
    }
  }
</script>

页面 引入

在需要使用addressCascader 组件的地方，通过 import 语句引入组件注册并使用


<template>
  <div>
    <template
        v-for="(
        { caption, display, permissionKey, icon, disabled, callback, action, type, btnClass, loading },
        index
      ) in buttonList"
    >
      <h-button v-if="getButtonDisplay(display)"
                :key="action ? index + action : index"
                :action="action"
                :btnClass="btnClass"
                :caption="caption"
                :icon="icon"
                :disabled="disabled"
                :type="type || 'primary'"
                :loading="loading"
                @click="callback"
                v-permission="permissionKey"
      ></h-button>
    </template>
  </div>
</template>
<script>
  import HButton from "@/common-ui/button/index";

  export default {
    components: {
      HButton
    },
    data() {
      return {
        
        dataSource: [],
        selectedValue: ''
      }
    },
    computed:{
      buttonList() {
        return [{
          caption: "返回",
          type: "warning",
          callback: this.back,
          btnClass: "warningButton"
        },
          {
            caption: "确认",
            type: "primary",
            callback: this.submit,
            btnClass: "primaryButton"
          }]
      }
    },
    methods: {
      back() {},
      submit() {}
    }
    // ...
  }
</script>