ui画的设计稿:
我实现的:(图省事背景直接贴了图片,用type绑定的样式选择器,虽然懒但真的好用)
直接封了组件:
//父组件
<x-button :x-btn-name="yxjk" :type="1" @click="handleClick()"></x-button>
<x-button :x-btn-name="xxjk" :type="0" @click="handleClick()"></x-button>
<template>
<button class="x_button_style" @click="XhandleClick" :class="type==1?'x_bg_light':'x_bg_dark'">{{xBtnName}}</button>
</template>
<script>
export default {
name: 'XButton',
props: {
type: {
type: String,
default: ''
},
xBtnName: {
type: String,
default: ''
},
},
methods: {
XhandleClick(evt) {
this.$emit('click', evt);
alert(111)
}
}
}
</script>
<style scoped>
.x_bg_light{
background: url("/img/bg/bt_c.png");
background-size: 100% 100%;
}
.x_bg_dark{
background: url("/img/bg/bt_u.png");
background-size: 100% 100%;
}
.x_button_style{
width: 80px;
height: 35px;
padding: 2px 3px;
margin: 2px;
color: white;
border: none;
font-size: 12px;
text-align: center;
line-height: 32px;
}
</style>