<template>
<view class="tm-button " :class="[block ? 'd-block' : 'd-inline-block ']" hover-class="opacity-6">
<view
class="flex-center tm-button-btn fulled-height"
:class="[block ? '' : customDense_puted ? '' : 'ma-10', block ? 'd-block' : 'd-inline-block', black_tmeme ? 'bk' : '', customStyleTm]"
>
<!-- @getuserinfo="getuserinfo" -->
<button
@contact="contact"
@error="error"
@getphonenumber="getphonenumber"
@launchapp="launchapp"
@opensetting="opensetting"
@click="onclick"
@longpress="$emit('longpress', $event)"
@touchcancel="$emit('touchcancel', $event)"
@touchend="$emit('touchend', $event)"
@touchstart="$emit('touchstart', $event)"
:disabled="disabled"
:loading="loading"
:open-type="openType"
:hover-start-time="hoverStartTime"
:hover-stay-time="hoverStaySime"
:hover-stop-propagation="hoverStopPropagation"
:send-message-img="sendMessageImg"
:send-message-path="sendMessagePath"
:send-message-title="sendMessageTitle"
:show-message-card="showMessageCard"
:class="[
showValue ? 'showValue' : '',
titl ? 'text-' + color_tmeme : '',
vertical ? 'flex-col flex-center' : 'flex-center',
black_tmeme ? 'bk' : '',
disabled ? color_tmeme + ' grey-lighten-2' : color_tmeme,
block ? '' : sizes,
text || titl ? '' : bgcolor ? 'shadow-' + shadow : 'shadow-' + shadowthemeName + '-' + shadow,
flat ? 'flat' : '',
text ? 'text ' : '',
plan ? 'plan outlined' : '',
titl ? 'titl' : '',
fab?'rounded':'round-' + round,
customClassTm_puted
]"
:style="{
background: bgcolor ? bgcolor + ' !important' : 'default',
width: widths != 0 && widths != 'inherit' ? widths : 'inherit',
height: heights,
lineHeight: 'inherit'
}"
>
<slot name="icon" :data="{ icon: icon, size: icon_size.upx, fab: fab }">
<block v-if="vtype == true">
<text
v-if="!fab && icon"
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${colors.color}` : '', black_tmeme ? 'opacity-6' : '', 'px-12','flex-shrink']"
:style="{
fontSize: `${icon_size.px}px`,
lineHeight:'normal'
}"
></text>
<text
v-if="fab && icon && !loading && !titl"
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${colors.color}` : '', black_tmeme ? 'opacity-6' : '','flex-shrink']"
:style="{
fontSize: `${icon_size.px}px`,
lineHeight:'normal'
}"
></text>
<text
v-if="fab && icon && !loading && titl"
:class="[`${prefx_computed} ${icon}`, fontColor ? `text-${color_tmeme}` : '', black_tmeme ? 'opacity-6' : '','flex-shrink']"
:style="{
fontSize: `${icon_size.px}px`,
lineHeight:'normal'
}"
></text>
</block>
<block v-if="vtype == false"><tm-icons :size="icon_size.upx" :name="icon"></tm-icons></block>
</slot>
<view v-if="!fab || showValue" class="d-inline-block tm-button-label flex-shrink" :style="{ fontSize: font_size }" :class="[fontColor ? `text-${colors.color}` : '',vertical ? 'full ' : '',]">
<slot name="default" :data="label">{{ label }}</slot>
</view>
</button>
</view>
</view>
</template>
<script>
/**
* 按钮
* @description 注意，按钮功能同原生按钮功能，所有属性都有。
* @property {Function} contact
* @property {Function} error
* @property {Function} getphonenumber
* @property {Function} getuserinfo
* @property {Function} opensetting
* @property {Function} click
* @property {Boolean} disabled = [true|false] 是否禁用
* @property {Boolean} loading = [true|false] 是否加载中
* @property {String} open-type = [contact|getPhoneNumber|getUserInfo|launchapp|share|openSetting] 同原生btn相同,//当等于getUserProfile时，自动获取微信授权。
* @property {Boolean} block = [true|false] 是否独占一行
* @property {Boolean} show-value = [true|false] fab模式是隐藏文字的。如果这个设置为true,不管在什么情况下都会显示文字。
* @property {String} url = [] 默认"",如果提供将会跳转连接。
* @property {String} size = [xs|s|m|n|l|g] 默认"n",按钮尺寸大小。
* @property {Number|String} font-size = [] 默认 0,自定义文字大小，默认使用主题size的大小。
* @property {Number|String} icon-size = [] upx单位默认 0,自定义图标大小，默认使用主题size的大小。
* @property {String} icon = [] 单位默认 "",自定义按钮图标。
* @property {String} item-class = [] 默认 "",按钮自定样式类。
* @property {String|Number} shadow = [] 默认 5,按钮投影
* @property {String} font-color = [] 默认主题颜色,自定文字颜色
* @property {String} bgcolor = [] 默认主题颜色,自定义-背景颜色
* @property {String} theme = [] 默认 primary,主题颜色
* @property {Boolean|String} black = [true|false] 默认 false, 暗黑模式
* @property {Boolean|String} flat = [true|false] 默认 false, 去除所有投影圆角效果，扁平模式。
* @property {Boolean|String} text = [true|false] 默认 false, 文本模式。背景减淡。文字使用主题色。
* @property {Boolean|String} plan = [true|false] 默认 false, 镂空。
* @property {Boolean|String} fab = [true|false] 默认 false, 圆模式。
* @property {Boolean|String} dense = [true|false] 默认 false, 是否去除外间隙。
* @property {Boolean|String} titl = [true|false] 默认 false, 无背景，无边框，只保留按钮区域和文字颜色或者图标颜色。
* @property {String} label = [] 默认 "", 按钮文字也可以使用插槽模式直接写在组件内部。
* @property {String|Number} width = [] 默认 "", 按钮宽, 单位px ,可以是百分比 如果不设置block为true时，此项设置无效。
* @property {String|Number} height = [] 默认 "", 按钮高, 单位px ,可以是百分比如果不设置block为true时，此项设置无效。
* @property {String|Number} round = [] 默认 2, 圆角
* @property {String|Number} navtie-type = [form] 默认 :'', 可选值form，提供此属性为form时，事件会被表单接替，会触发表单提交事件。
* @property {String} userProfileError = ['auto'] 默认:'auto' 仅open-type='getUserProfile'时有效，当微信授权失败提示的信息，默认为auto,如果非auto将显示自定义错误提示。如果为''，将不显示错误提示。
* @example <tm-button>确定</tm-button>
*/
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
export default {
components: { tmIcons },
name: 'tm-button',
props: {
hoverStartTime:20,
hoverStaySime:70,
appParameter:String,
hoverStopPropagation:{
type:Boolean,
default:false
},
sessionFrom:String,
sendMessageTitle:String,
sendMessagePath:String,
sendMessageImg:String,
showMessageCard:String,
navtieType: {
type: String,
default: '' //form
},
// 内联还是独占一行的块状100%，默认内联样式。
block: {
type: String | Boolean,
default: false
},
// fab模式是隐藏文字的。如果这个设置为true,不管在什么情况下都会显示文字。
showValue: {
type: String | Boolean,
default: false
},
disabled: {
type: String | Boolean,
default: false
},
loading: {
type: String | Boolean,
default: false
},
url: {
type: String,
default: ''
},
// xs,s,n,l,g
size: {
type: String,
default: 'n'
},
// 文字大小。
fontSize: {
type: Number | String,
default: 0
},
// 图标大小。
iconSize: {
type: Number | String,
default: 0
},
// icon-cog-fill
icon: {
type: String,
default: ''
},
// 按钮自定样式类。
itemClass: {
type: String,
default: ''
},
// 同原生btn相同。contact|getPhoneNumber|getUserInfo|launchapp|share|openSetting
//当等于getUserProfile时，自动获取微信授权。
openType: {
type: String,
default: ''
},
shadow: {
type: Number | String,
default: 4
},
vertical: {
type: Boolean | String,
default: false
},
// 自定义-文字颜色。
fontColor: {
type: String,
default: ''
},
// 自定义-背景颜色
bgcolor: {
type: String | Array,
default: ''
},
// 主题颜色
theme: {
type: String,
default: 'primary'
},
//优先级最高： 优先级1
black: {
type: Boolean | String,
default: null
},
// 优先级高：优先级2
flat: {
type: Boolean | String,
default: null
},
// 优先级高：文本模式。背景减淡。文字使用主题色。
text: {
type: Boolean | String,
default: false
},
// 优先级高：镂空。
plan: {
type: Boolean | String,
default: false
},
// 圆模式。
fab: {
type: Boolean | String,
default: false
},
// 无背景，无边框，只保留按钮区域和文字颜色或者图标颜色。
titl: {
type: Boolean | String,
default: false
},
label: {
type: String,
default: ''
},
// 如果不设置block为true时，此项设置无效。
width: {
type: String | Number,
default: NaN
},
// 如果不设置block为true时，此项设置无效。
height: {
type: String | Number,
default: NaN
},
// 圆角
round: {
type: String | Number,
default: 3
},
dense: {
type: Boolean | String,
default: false
},
// 跟随主题色的改变而改变。
fllowTheme: {
type: Boolean | String,
default: true
},
//当微信授权失败提示的信息，默认为auto,如果非auto将显示自定义错误提示。如果为''，将不显示错误提示。
userProfileError:{
type:String,
default:'auto'
}
},
created() {
this.customClassTm_puted = this.itemClass;
this.customDense_puted = this.dense;
this.color_tmeme = this.theme;
},
watch: {
theme: function() {
this.color_tmeme = this.theme;
}
},
computed: {
prefx_computed() {
let prefix = this.icon.split('-')[0];
if (prefix == 'icon') return 'iconfont';
if (prefix == 'mdi') return 'mdi';
return prefix;
},
customDense_puted: {
get: function() {
return this.customDense;
},
set: function(val) {
this.customDense = val;
}
},
customClassTm_puted: {
get: function() {
return this.customClassTm;
},
set: function(val) {
this.customClassTm = val;
}
},
vtype: function() {
if (this.icon[0] == '.' || this.icon[0] == '/' || this.icon.substring(0, 4) == 'http' || this.icon.substring(0, 5) == 'https' || this.icon.substring(0, 3) == 'ftp') {
return false;
}
return true;
},
black_tmeme: function() {
if (this.black !== null) return this.black;
return this.$tm.vx.state().tmVuetify.black;
},
color_tmeme: {
get: function() {
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
return this.$tm.vx.state().tmVuetify.color;
}
return this.color_tmeme_computed;
},
set: function(val) {
this.color_tmeme_computed = val;
}
},
// 投影的颜色名字。
shadowthemeName: function() {
if (!this.theme) return 'none';
return this.color_tmeme;
},
widths: {
get: function() {
let w;
if (typeof this.width === 'undefined') {
return 'auto';
}
let item = this.$TestUnit(this.width);
if (item) {
if (item.type == 'string') {
w = item.value;
}
if (item.type == 'number') {
w = item.value + 'px';
}
}
return w;
}
},
heights: {
get: function() {
let item = this.$TestUnit(this.height);
if (item) {
if (item.type == 'string') {
return item.value;
}
if (item.type == 'number') {
return item.value + 'px';
}
}
return 'auto';
}
},
sizes: function() {
if (!isNaN(this.width) || !isNaN(this.height)) return;
if (this.size == 'xs') {
return this.fab ? 'fabxs text-size-xs rounded' : 'wxs round-1 text-size-xs';
} else if (this.size == 's') {
return this.fab ? 'fabs text-size-xs rounded' : 'ws round-1 text-size-s';
} else if (this.size == 'm') {
return this.fab ? 'fabm text-size-xs rounded' : 'wm round-1 text-size-n';
} else if (this.size == 'n') {
return this.fab ? 'fabn text-size-xs rounded' : 'wn round-1 text-size-n';
} else if (this.size == 'l') {
return this.fab ? 'fabl text-size-xs rounded' : 'wl round-2 text-size-g';
} else if (this.size == 'g') {
return this.fab ? 'fabg text-size-xs rounded' : 'wg round-3 text-size-g';
}
},
font_size: function() {
if (this.fontSize > 0) {
return this.fontSize + 'rpx';
}
if (this.size == 'xs') {
return uni.upx2px(20) + 'px';
} else if (this.size == 's') {
return uni.upx2px(22) + 'px';
} else if (this.size == 'm') {
return uni.upx2px(24) + 'px';
} else if (this.size == 'n') {
return uni.upx2px(28) + 'px';
} else if (this.size == 'l') {
return uni.upx2px(32) + 'px';
} else if (this.size == 'g') {
return uni.upx2px(36) + 'px';
}
},
icon_size: function() {
if (this.iconSize) {
return { px: uni.upx2px(this.iconSize), upx: this.iconSize };
}
if (this.size == 'xs') {
return { px: uni.upx2px(20), upx: 20 };
} else if (this.size == 's') {
return { px: uni.upx2px(22), upx: 22 };
} else if (this.size == 'm') {
return { px: uni.upx2px(24), upx: 24 };
} else if (this.size == 'n') {
return { px: uni.upx2px(28), upx: 28 };
} else if (this.size == 'l') {
return { px: uni.upx2px(32), upx: 32 };
} else if (this.size == 'g') {
return { px: uni.upx2px(36), upx: 36 };
}
},
defaultfontsize: function() {
if (this.iconSize) {
return this.iconSize;
}
if (this.size == 'xs') {
return uni.upx2px(20);
} else if (this.size == 's') {
return uni.upx2px(22);
} else if (this.size == 'm') {
return uni.upx2px(24);
} else if (this.size == 'n') {
return uni.upx2px(28);
} else if (this.size == 'l') {
return uni.upx2px(32);
} else if (this.size == 'g') {
return uni.upx2px(36);
}
},
colors: function() {
let color = this.$TestColor(this.fontColor);
return color;
}
},
data() {
return {
customClassTm: '',
customDense: false,
customStyleTm: '',
color_tmeme_computed: ''
};
},
methods: {
setConfigStyle(val) {
this.customStyleTm = val;
},
onclick() {
let t = this;
this.$emit('click', ...arguments);
if(this.openType=='getUserInfo' || this.openType == 'getUserProfile'){
// #ifdef MP-WEIXIN
uni.getUserProfile({
desc: '需要获取用户信息',
lang: 'zh',
complete: function (userProfile) {
if(userProfile.errMsg !='getUserProfile:ok'){
if(t.userProfileError==''||t.userProfileError=='true') return;
if(t.userProfileError!='auto'){
uni.showToast({
title:t.userProfileError,icon:'error',mask:true
})
return;
}
uni.showToast({
title:userProfile.errMsg,icon:'error',mask:true
})
return;
}
t.$emit('getUserInfo', userProfile);
t.$emit('getUserProfile', userProfile);
},
fail: (error) => {
if(t.userProfileError==''||t.userProfileError=='true') return;
if(t.userProfileError!='auto'){
uni.showToast({
title:t.userProfileError,icon:'error',mask:true
})
return;
}
uni.showToast({
title:error
})
}
});
// #endif
}
if (this.url !== '' && typeof this.url === 'string') {
let url = this.url;
if (url[0] !== '/') url = '/' + url;
uni.navigateTo({
url: url
});
}
},
contact() {
this.$emit('contact', ...arguments);
},
error() {
this.$emit('error', ...arguments);
},
getphonenumber() {
this.$emit('getphonenumber', ...arguments);
},
getuserinfo() {
this.$emit('getuserinfo', ...arguments);
},
launchapp() {
this.$emit('launchapp', ...arguments);
},
opensetting() {
this.$emit('opensetting', ...arguments);
}
}
};
</script>
<style lang="scss" scoped>
.tm-button {
vertical-align: middle;
.tm-button-btn button {
background: none;
border: none;
width: 100%;
height: auto;
line-height: 88upx;
height: 88upx;
vertical-align: middle;
// #ifdef H5
transition: all 0.3s;
// #endif
.tm-button-label {
vertical-align: middle;
}
&::after {
border: none;
}
&.fabxs {
width: 48upx;
height: 48upx !important;
line-height: 48upx;
text-align: center;
padding: 0 !important;
}
&.fabs {
width: 64upx;
height: 64upx !important;
line-height: 64upx;
text-align: center;
padding: 0 !important;
}
&.fabm {
width: 90upx;
height: 90upx !important;
line-height: 90upx;
text-align: center;
padding: 0 !important;
}
&.fabn {
width: 110upx;
height: 110upx !important;
line-height: 110upx;
text-align: center;
padding: 0 !important;
}
&.fabl {
width: 140upx;
height: 140upx !important;
line-height: 140upx;
text-align: center;
padding: 0 !important;
}
&.fabg {
width: 180upx;
height: 180upx !important;
line-height: 180upx;
text-align: center;
padding: 0 !important;
}
&.wxs {
min-width: 64upx;
height: 36upx !important;
// line-height: 24upx;
text-align: center;
// padding: 0 !important;
padding: 0 12upx;
}
&.ws {
min-width: 90upx;
height: 48upx !important;
// line-height: 24upx;
text-align: center;
padding: 0 16upx;
}
&.wm {
min-width: 140upx;
height: 64upx !important;
// line-height: 88upx;
text-align: center;
padding: 0 24upx;
}
&.wn {
min-width: 240upx;
height: 72upx !important;
// line-height: 88upx;
text-align: center;
// padding: 0 !important;
padding: 0 32upx;
}
&.wl {
min-width: 280upx;
height: 72upx !important;
// line-height: 88upx;
text-align: center;
padding: 0 32upx;
}
&.wg {
min-width: 400upx;
height: 76upx !important;
// line-height: 88upx;
text-align: center;
padding: 0 32upx;
}
&.plan {
box-shadow: none !important;
// background: transparent !important;
border-width: 1px !important;
border-style: solid;
}
&.titl {
box-shadow: none !important;
background: transparent !important;
border: none;
}
&:active,
&:focus {
opacity: 0.64;
}
&.showValue {
line-height: inherit !important;
padding: 0 !important;
}
&.noGutter {
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: unset !important;
}
}
&.d-block {
button {
// padding: 30upx 0;
font-size: 32upx;
&.plan {
box-shadow: none !important;
background: transparent !important;
border-width: 1px !important;
border-style: solid;
}
}
&.showValue {
line-height: inherit !important;
}
}
&.d-inline-block {
vertical-align: middle;
}
}
</style>