重新改了一下,图片的兼容性没有直接写样式的好。所以把背景图直接换成了css样式。
<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{
border: 1px solid #00bbff;
box-shadow: inset 0 0 10px 5px #00bbff;
background-color: transparent;
background-size: 100% 100%;
}
.def_bg_dark{
border: 1px solid #00bbff;
box-shadow: inset 0 0 3px 3px #00bbff40;
background-color: #0c1d3f;
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>