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.
shop-app/components/UiButton.vue

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,
3 years ago
default : 'line' //gradual 渐变色 solid 纯色 line轻线条 primaryLine彩色线
3 years ago
},
size : {
type : String,
default : 'normal' //normal 60 max 80 min 50
3 years ago
},
disable:{
3 years ago
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;
}
3 years ago
&__normal{
height: 70rpx;
line-height: 70rpx;
font-size: $font-size-base;
3 years ago
}
&__min{
height: 60rpx;
line-height: 60rpx;
font-size: $font-size-base;
}
&__small{
height: 50rpx;
line-height: 50rpx;
font-size: $font-size-base;
}
3 years ago
&__max{
height: 80rpx;
line-height: 80rpx;
font-size: $font-size-lg;
3 years ago
}
&__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;
}
3 years ago
&__disabed{
opacity: .5;
3 years ago
}
}
</style>