<template>
|
<div class="f-button-component">
|
<button
|
@click="handleButtonClick"
|
class="f-button"
|
:class="buttonClass"
|
:disabled="disabled">
|
<slot>{{ text }}</slot>
|
</button>
|
<slot name="sbIphoneX"></slot>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/16.
|
* 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
|
* 组件的各个属性详情下面props说明
|
*/
|
export default {
|
name: 'f-button',
|
data () {
|
return {}
|
},
|
computed: {
|
// button的class
|
buttonClass () {
|
return [
|
{
|
'f-btn-disabled': this.disabled,
|
'f-btn-min': this.size === 'mini',
|
'f-btn-no-border': !this.isBorderRadius
|
},
|
]
|
},
|
},
|
methods: {
|
// 处理非城市那妞的button的事件
|
handleButtonClick () {
|
if (this.disabled) {
|
return false;
|
}
|
this.$emit('on-click-button');
|
}
|
},
|
props: {
|
// type的按钮类型，默认按钮
|
type: {
|
type: String,
|
default: 'default'
|
},
|
// 是否禁用
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
// button的大小，mini, normal
|
size: {
|
type: String,
|
default: 'normal'
|
},
|
// 按钮的文字
|
text: {
|
type: String
|
},
|
// 是否有圆角
|
isBorderRadius: {
|
type: Boolean,
|
default: true
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@import '../../style/mixin';
|
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
|
//如果以后出现375*812,非ios机型，可以加上下面语句
|
.sbIphoneX{
|
height: 34px !important;
|
background-color: @color-white;
|
}
|
}
|
.f-button-component{
|
|
}
|
.f-button {
|
display: block;
|
width: 93.6%;
|
height: 44px;
|
margin: 32px auto 20px;
|
line-height: @font-line-height-base;
|
font-size: @font-size-primary;
|
color: #fff;
|
text-align: center;
|
border: none;
|
border-radius: @border-radius-normal-size;
|
.color-linear-gradient(@color-gradient-darkBlue-left, @color-gradient-darkBlue-right);
|
outline: 0;
|
-webkit-appearance: none;
|
}
|
.f-btn-disabled {
|
background: @color-disabled;
|
}
|
.f-btn-min {
|
display: inline-block;
|
width: 64px;
|
height: 32px;
|
margin: 0;
|
}
|
.f-button:not(.f-btn-disabled):active {
|
background: @color-primary;
|
}
|
.f-btn-no-border{
|
width:100%;
|
border-radius: 0;
|
}
|
</style>
|
