<template>
<button class="def_button_style" @click="XhandleClick" :class="type == true?'def_bg_light':'def_bg_dark'">{{defBtnName}}</button>
</template>
<script>
export default {
name: 'DefButton',
props: {
type: {
type: Boolean,
default: false,
},
defBtnName: {
type: String,
default: ''
},
},
methods: {
XhandleClick(evt) {
this.$emit('click', evt);
this.$emit('type', evt);
}
}
}
</script>
<style scoped>
.def_bg_light{
background: url("/img/bg/def_button.png");
background-size: 100% 100%;
}
.def_bg_dark{
background: url("/img/bg/def_button_u.png");
background-size: 100% 100%;
}
.def_button_style{
min-width: 60px;
height: 30px;
padding: 2px 10px;
margin: 2px;
color: white;
border: none;
font-size: 12px;
text-align: center;
line-height: 26px;
}
</style>
背景图:https://download.csdn.net/download/galaxyJING/88606703?spm=1001.2014.3001.5503