/*
|
* @Author: hzq
|
* @Date: 2018-08-13 10:22:41
|
* @Last Modified by: hzq
|
* @Last Modified time: 2018-08-23 09:52:02
|
* @文件说明：按钮组件，仅有2种颜色的按钮
|
* @使用方式： <f-button @on-click="freeze" type="normal" width="160px">冻结渠道</f-button> 金色按钮
|
<f-button @on-click="search">商户查询</f-button> 黑色按钮
|
*/
|
<template>
|
<div class="f-button-component">
|
<button @click="handleButtonClick"
|
class="f-button"
|
:class="buttonClass" :disabled="disabled" :style="{width:width}">
|
<slot>{{ text }}</slot>
|
</button>
|
<slot name="sbIphoneX"></slot>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'f-button',
|
computed: {
|
// button的class
|
buttonClass() {
|
return [
|
{
|
'f-btn-disabled': this.disabled,
|
'f-btn-normal': this.type === 'normal',
|
'f-btn-fixed': this.fixed
|
}
|
];
|
}
|
},
|
methods: {
|
// 处理非城市那妞的button的事件
|
handleButtonClick() {
|
if (this.disabled) {
|
return false;
|
}
|
this.$emit('on-click');
|
}
|
},
|
props: {
|
// type的按钮类型，默认按钮：default(黑色)||normal(金色)
|
type: {
|
type: String,
|
default: 'default'
|
},
|
// 是否禁用
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
// 按钮的文字
|
text: {
|
type: String
|
},
|
// 是否固定在底部
|
fixed: {
|
type: Boolean,
|
default: false
|
},
|
// 按钮宽度，默认宽度为width: 85.3%，在css里面定义的
|
width: {
|
type: String,
|
default: ''
|
}
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@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: 85.3%;
|
height: 44px;
|
margin: 32px auto 0;
|
line-height: @font-line-height-base;
|
font-size: @font-size-primary;
|
color: #fff;
|
text-align: center;
|
border: none;
|
background-color: @color-button-default;
|
outline: 0;
|
-webkit-appearance: none;
|
}
|
|
.f-btn-normal {
|
background-color: @color-button-normal;
|
}
|
.f-btn-disabled {
|
background: #a3a3a3;
|
}
|
|
.f-btn-fixed {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
margin: 0;
|
}
|
}
|
</style>
|
