348 lines
7.8 KiB
Vue
348 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<button class="tn-btn-class tn-btn" :class="[
|
|||
|
|
buttonClass,
|
|||
|
|
backgroundColorClass,
|
|||
|
|
fontColorClass
|
|||
|
|
]" :style="[buttonStyle]" hover-class="tn-hover" :loading="loading" :disabled="disabled" :form-type="formType"
|
|||
|
|
:open-type="openType" @getuserinfo="handleGetUserInfo" @getphonenumber="handleGetPhoneNumber"
|
|||
|
|
@contact="handleContact" @error="handleError" @tap="handleClick">
|
|||
|
|
<slot></slot>
|
|||
|
|
</button>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
|||
|
|
import {
|
|||
|
|
debounceFun,
|
|||
|
|
throttleFun
|
|||
|
|
} from '../../libs/function/applyEven.js'
|
|||
|
|
let spanTime = 200;
|
|||
|
|
export default {
|
|||
|
|
mixins: [componentsColorMixin],
|
|||
|
|
name: "tn-button",
|
|||
|
|
// 解决再微信小程序种，自定义按钮无法触发bindsubmit
|
|||
|
|
behaviors: ['wx://form-field-button'],
|
|||
|
|
props: {
|
|||
|
|
// 按钮索引，用于区分多个按钮
|
|||
|
|
index: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
// 按钮形状 default 默认 round 圆角 icon 图标按钮
|
|||
|
|
shape: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'default'
|
|||
|
|
},
|
|||
|
|
// 是否加阴影
|
|||
|
|
shadow: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 宽度 rpx或%
|
|||
|
|
width: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'auto'
|
|||
|
|
},
|
|||
|
|
// 高度 rpx或%
|
|||
|
|
height: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 按钮的尺寸 sm lg
|
|||
|
|
size: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 字体是否加粗
|
|||
|
|
fontBold: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
padding: {
|
|||
|
|
type: String,
|
|||
|
|
default: '0 30rpx'
|
|||
|
|
},
|
|||
|
|
// 外边距 与css的margin参数用法相同
|
|||
|
|
margin: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 是否镂空
|
|||
|
|
plain: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 当plain=true时，是否显示边框
|
|||
|
|
border: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 当plain=true时，是否加粗显示边框
|
|||
|
|
borderBold: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 是否禁用
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 是否显示加载图标
|
|||
|
|
loading: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 触发form表单的事件类型
|
|||
|
|
formType: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 开放能力
|
|||
|
|
openType: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 是否阻止重复点击(默认间隔是200ms)
|
|||
|
|
blockRepeatClick: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
//场景：（如果开启blockRepeatClick，这里无效）none ： 不开启防抖节流模式，debounce ：防抖模式 throttle：节流模式
|
|||
|
|
scene:{
|
|||
|
|
type: String,
|
|||
|
|
default: 'none'
|
|||
|
|
},
|
|||
|
|
// 防抖节流间隔时间（毫秒）
|
|||
|
|
blockTime:{
|
|||
|
|
type: Number,
|
|||
|
|
default: 200
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 根据不同的参数动态生成class
|
|||
|
|
buttonClass() {
|
|||
|
|
let clazz = ''
|
|||
|
|
// 按钮形状
|
|||
|
|
switch (this.shape) {
|
|||
|
|
case 'icon':
|
|||
|
|
case 'round':
|
|||
|
|
clazz += ' tn-round'
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 阴影
|
|||
|
|
if (this.shadow) {
|
|||
|
|
if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
|
|||
|
|
const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
|
|||
|
|
clazz += ` tn-shadow-${color}`
|
|||
|
|
} else {
|
|||
|
|
clazz += ' tn-shadow-blur'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 字体加粗
|
|||
|
|
if (this.fontBold) {
|
|||
|
|
clazz += ' tn-text-bold'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置为镂空并且设置镂空便可才进行设置
|
|||
|
|
if (this.plain) {
|
|||
|
|
clazz += ' tn-btn--plain'
|
|||
|
|
if (this.border) {
|
|||
|
|
clazz += ' tn-border-solid'
|
|||
|
|
if (this.borderBold) {
|
|||
|
|
clazz += ' tn-bold-border'
|
|||
|
|
}
|
|||
|
|
if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
|
|||
|
|
const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
|
|||
|
|
clazz += ` tn-border-${color}`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return clazz
|
|||
|
|
},
|
|||
|
|
// 按钮的样式
|
|||
|
|
buttonStyle() {
|
|||
|
|
let style = {}
|
|||
|
|
switch (this.size) {
|
|||
|
|
case 'sm':
|
|||
|
|
style.padding = '0 20rpx'
|
|||
|
|
style.fontSize = '22rpx'
|
|||
|
|
style.height = this.height || '48rpx'
|
|||
|
|
break
|
|||
|
|
case 'lg':
|
|||
|
|
style.padding = '0 40rpx'
|
|||
|
|
style.fontSize = '32rpx'
|
|||
|
|
style.height = this.height || '80rpx'
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
style.padding = '0 30rpx'
|
|||
|
|
style.fontSize = '28rpx'
|
|||
|
|
style.height = this.height || '64rpx'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 是否手动设置了内边距
|
|||
|
|
if (this.padding) {
|
|||
|
|
style.padding = this.padding
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 是否手动设置外边距
|
|||
|
|
if (this.margin) {
|
|||
|
|
style.margin = this.margin
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 是否手动设置了字体大小
|
|||
|
|
if (this.fontSize) {
|
|||
|
|
style.fontSize = this.fontSize + this.fontUnit
|
|||
|
|
}
|
|||
|
|
style.width = this.shape === 'icon' ? style.height : this.width
|
|||
|
|
style.padding = this.shape === 'icon' ? '0' : style.padding
|
|||
|
|
|
|||
|
|
if (this.fontColorStyle) {
|
|||
|
|
style.color = this.fontColorStyle
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.backgroundColorClass) {
|
|||
|
|
if (this.plain) {
|
|||
|
|
style.borderColor = this.backgroundColorStyle || '#080808'
|
|||
|
|
} else {
|
|||
|
|
style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置阴影
|
|||
|
|
if (this.shadow && !this.backgroundColorClass) {
|
|||
|
|
if (this.backgroundColorStyle.indexOf('#') != -1) {
|
|||
|
|
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
|
|||
|
|
} else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf(
|
|||
|
|
'rgba') != -1 || !this.backgroundColorStyle) {
|
|||
|
|
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return style
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch:{
|
|||
|
|
//支持动态修改时间，但是这里是没有做撤销上一次的方法，毕竟这种场景非常少
|
|||
|
|
//这里只是防止用户使用时复用了组件，有场景时长要求二次变动，而做的优化
|
|||
|
|
blockTime:{
|
|||
|
|
handler(newVal,oldVal){
|
|||
|
|
this.initScene();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initScene()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initScene(){
|
|||
|
|
// 动态传入blockTime，需要重新初始化,参数
|
|||
|
|
//防抖模式
|
|||
|
|
this.debounceClick=debounceFun(function() {
|
|||
|
|
this.emitClick();
|
|||
|
|
}, this.blockTime);
|
|||
|
|
//节流模式
|
|||
|
|
this.throttleClick=throttleFun(function() {
|
|||
|
|
this.emitClick();
|
|||
|
|
}, this.blockTime);
|
|||
|
|
},
|
|||
|
|
//防抖模式
|
|||
|
|
debounceClick:debounceFun(function() {
|
|||
|
|
this.emitClick();
|
|||
|
|
}, spanTime),
|
|||
|
|
//节流模式
|
|||
|
|
throttleClick:throttleFun(function() {
|
|||
|
|
this.emitClick();
|
|||
|
|
}, spanTime),
|
|||
|
|
emitClick() {
|
|||
|
|
//触发事件
|
|||
|
|
this.$emit('click', {
|
|||
|
|
index: Number(this.index)
|
|||
|
|
})
|
|||
|
|
// 兼容tap事件
|
|||
|
|
this.$emit('tap', {
|
|||
|
|
index: Number(this.index)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 按钮点击事件
|
|||
|
|
handleClick() {
|
|||
|
|
if (this.disabled) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
//兼容旧的
|
|||
|
|
if (this.blockRepeatClick) {
|
|||
|
|
this.throttleClick();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//普通模式，触发多少次就回调多少次
|
|||
|
|
if(this.scene === 'none'){
|
|||
|
|
this.emitClick();
|
|||
|
|
}else if(this.scene == 'debounce'){
|
|||
|
|
//防抖模式
|
|||
|
|
this.debounceClick();
|
|||
|
|
}else{
|
|||
|
|
//节流模式
|
|||
|
|
this.throttleClick();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleGetUserInfo({
|
|||
|
|
detail = {}
|
|||
|
|
} = {}) {
|
|||
|
|
this.$emit('getuserinfo', detail);
|
|||
|
|
},
|
|||
|
|
handleContact({
|
|||
|
|
detail = {}
|
|||
|
|
} = {}) {
|
|||
|
|
this.$emit('contact', detail);
|
|||
|
|
},
|
|||
|
|
handleGetPhoneNumber({
|
|||
|
|
detail = {}
|
|||
|
|
} = {}) {
|
|||
|
|
this.$emit('getphonenumber', detail);
|
|||
|
|
},
|
|||
|
|
handleError({
|
|||
|
|
detail = {}
|
|||
|
|
} = {}) {
|
|||
|
|
this.$emit('error', detail);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.tn-btn {
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
line-height: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
text-decoration: none;
|
|||
|
|
overflow: visible;
|
|||
|
|
transform: translate(0rpx, 0rpx);
|
|||
|
|
// background-color: $tn-mai
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
// color: $tn-font-color;
|
|||
|
|
margin: 0;
|
|||
|
|
|
|||
|
|
&--plain {
|
|||
|
|
background-color: transparent !important;
|
|||
|
|
background-image: none;
|
|||
|
|
|
|||
|
|
&.tn-round {
|
|||
|
|
border-radius: 1000rpx !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|