Button按钮

Button按钮:可自定义宽高,设置字体大小,阴影,圆角,镂空等。

组件结构

<template>
	<button class="tui-btn" :class="[
			plain ? 'tui-' + type + '-outline' : 'tui-btn-' + (type || 'primary'),
			getDisabledClass(disabled, type, plain),
			getShapeClass(shape, plain),
			getShadowClass(type, shadow, plain)
		]"
	 :hover-class="getHoverClass(disabled, type, plain)" :style="{ width: width, height: height, lineHeight: height, fontSize: size + 'rpx',margin:margin }"
	 :loading="loading" :open-type="openType" @getuserinfo="bindgetuserinfo" :disabled="disabled" @tap="handleClick">
		<slot></slot>
	</button>
</template>

组件脚本

<script>
	export default {
		name: 'tuiButton',
		props: {
			//样式类型 primary, white, danger, warning, green,blue, gray,black
			type: {
				type: String,
				default: 'primary'
			},
			//是否加阴影
			shadow: {
				type: Boolean,
				default: false
			},
			// 宽度 rpx或 %
			width: {
				type: String,
				default: '100%'
			},
			//高度 rpx
			height: {
				type: String,
				default: '96rpx'
			},
			//字体大小 rpx
			size: {
				type: Number,
				default: 32
			},
			margin: {
				type: String,
				default: "0"
			},
			//形状 circle(圆角), square(默认方形),rightAngle(平角)
			shape: {
				type: String,
				default: 'square'
			},
			plain: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			//禁用后背景是否为灰色 (非空心button生效)
			disabledGray: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			},
			openType: {
				type: String,
				default: ''
			},
			index: {
				type: [Number, String],
				default: 0
			}
		},
		methods: {
			handleClick() {
				if (this.disabled) return false;
				this.$emit('click', {
					index: Number(this.index)
				});
			},
			bindgetuserinfo({
				detail = {}
			} = {}) {
				this.$emit('getuserinfo', detail);
			},
			getShadowClass: function(type, shadow, plain) {
				let className = '';
				if (shadow && type != 'white' && !plain) {
					className = 'tui-shadow-' + type;
				}
				return className;
			},
			getDisabledClass: function(disabled, type, plain) {
				let className = '';
				if (disabled && type != 'white') {
					let classVal = this.disabledGray ? 'tui-gray-disabled' : 'tui-dark-disabled';
					className = plain ? 'tui-dark-disabled-outline' : classVal;
				}
				return className;
			},
			getShapeClass: function(shape, plain) {
				let className = '';
				if (shape == 'circle') {
					className = plain ? 'tui-outline-fillet' : 'tui-fillet';
				} else if (shape == 'rightAngle') {
					className = plain ? 'tui-outline-rightAngle' : 'tui-rightAngle';
				}
				return className;
			},
			getHoverClass: function(disabled, type, plain) {
				let className = '';
				if (!disabled) {
					className = plain ? 'tui-outline-hover' : 'tui-' + (type || 'primary') + '-hover';
				}
				return className;
			}
		}
	};
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
type String 样式类型,可传入[primary, white, danger, warning, green,blue, gray,black] primary
shadow Boolean 否加阴影 false
width String 宽度 单位rpx或 % 100%
height String 高度 单位rpx 96rpx
size Number 字体大小 单位rpx 32
margin String margin调整与其他元素之间间距 0
shape String 形状 circle(圆角), square(默认方形),rightAngle(平角) square
plain Boolean 是否镂空 false
disabled Boolean 是否禁用 false
disabledGray Boolean 禁用后背景是否为灰色 (非空心button生效) false
loading loading 是否展示loading false
openType String 参考官方openType ""
index [Number, String] 索引 0

methods

名称 描述
@click 按钮点击事件
@getuserinfo 参考官方@getuserinfo

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/button/button

H5二维码

小程序二维码