wardrobe/tm-vuetify/components/tm-button/tm-button.vue

<template>
	<view class="tm-button " :class="[block ? 'd-block' : 'd-inline-block ']">
		<view
			class="flex-center tm-button-btn fulled-height"
			:class="[block ? '' : customDense_puted ? '' : 'ma-10', block ? 'd-block' : 'd-inline-block', black_tmeme ? 'bk' : '', customStyle]"
		>
		<!-- @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,
					customClass_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']"
							: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' : '']"
							: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' : '']"
							: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}` : '']">
					<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.customClass_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;
			}
		},
		customClass_puted: {
			get: function() {
				return this.customClass;
			},
			set: function(val) {
				this.customClass = 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 {
			customClass: '',
			customDense: false,
			customStyle: '',
			color_tmeme_computed: ''
		};
	},
	methods: {
		setConfigStyle(val) {
			this.customStyle = 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;
		}

		&.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>