vue el-button 封装及使用

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

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

<template><el-buttonclass="h-button":type="type":icon="hIcon":disabled="disabled"@click="$emit('click')":loading="loading"><span class="h-button-caption">{{ hCaption }}</span></el-button>
</template><script>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 = ''breakcase 'edit':this.hCaption = '编辑'this.hIcon = ''breakcase 'delete':this.hCaption = '删除'this.hIcon = ''breakcase 'export':this.hCaption = '导出'this.hIcon = ''breakdefault:this.hCaption = this.captionthis.hIcon = this.iconbreak}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 &&(this.hCaption.length > 4 ||(this.hCaption.length > 3 && (this.hIcon || this.hasImg))))}},watch: {btnClass: {handler (val) {},immediate: true}}}
</script>

页面引入

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

<template><div><templatev-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>

确保你已经安装了Vue.js和Element UI，并在项目中引入它们。