You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
1.5 KiB
84 lines
1.5 KiB
<!--
|
|
* @Author: ch
|
|
* @Date: 2022-03-26 10:06:38
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-04-22 20:07:26
|
|
* @Description: file content
|
|
-->
|
|
<template>
|
|
<button :class="`ui-btn ui-btn__${type} ui-btn__${size} ${disable ? ' x ui-btn__disabed' : ' xx'}`" @click="click"><slot></slot></button>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props : {
|
|
type : {
|
|
type : String,
|
|
default : 'line' //gradual 渐变色 solid 纯色 line轻线条 primaryLine彩色线
|
|
},
|
|
size : {
|
|
type : String,
|
|
default : 'normal' //normal 60 max 80 min 50
|
|
},
|
|
disable:{
|
|
type : Boolean,
|
|
default : false
|
|
}
|
|
},
|
|
methods:{
|
|
click(){
|
|
!this.disable && this.$emit('click');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ui-btn{
|
|
display: inline-block;
|
|
padding: 0 50rpx;
|
|
border-radius: 50rpx;
|
|
&::after{
|
|
display: none;
|
|
}
|
|
&__normal{
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
font-size: $font-size-base;
|
|
}
|
|
&__min{
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
font-size: $font-size-base;
|
|
}
|
|
&__small{
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
font-size: $font-size-base;
|
|
}
|
|
&__max{
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: $font-size-lg;
|
|
}
|
|
&__gradual{
|
|
background: linear-gradient(270deg, $color-yellow2 0%, $color-yellow1 100%);
|
|
color: $color-grey0;
|
|
}
|
|
&__solid{
|
|
background: $color-yellow3;
|
|
color: $color-grey0;
|
|
}
|
|
&__line{
|
|
background: none;
|
|
color: $color-grey6;
|
|
border: 1px solid $color-grey4;
|
|
}
|
|
&__primaryLine{
|
|
background: none;
|
|
color: $color-yellow3;
|
|
border: 1px solid $color-yellow3;
|
|
}
|
|
&__disabed{
|
|
opacity: .5;
|
|
}
|
|
}
|
|
</style> |