一、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,
icon: 'el-icon-share',
autofocus: false,
nativeType: '',
label: 'label默认2',
prop: '',
methodsName: ''
},
{
size: 'small',
type: 'success',
plain: true,
round: true,
circle: true,
icon: 'el-icon-share',
autofocus: true,
nativeType: '',
label: 'label默认2',
prop: '',
methodsName: ''
},
{
size: 'mini',
type: 'info',
plain: true,
round: true,
circle: true,
icon: 'el-icon-delete',
autofocus: false,
nativeType: '',
label: 'label默认2',
prop: '',
methodsName: ''
},
{
size: 'mini',
type: 'info',
plain: true,
round: true,
circle: 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即可使用
|