button

button 按钮

组件结构

<template>
	<button class="tui-btn-class tui-btn" :class="['tui-btn-'+size,plain?'tui-'+type+'-outline':'tui-'+(type || 'gradual'),getDisabledClass(disabled,type),getShapeClass(shape,plain)]"
	 :hover-class="getHoverClass(disabled,type,plain)" :loading="loading" :disabled="disabled" :open-type="openType" @tap="handleClick"
	 @getuserinfo="bindgetuserinfo" :form-type="formType" v-if="!hidden">
		<slot></slot>
	</button>
</template>

组件脚本

<script>
	export default {
		name: "tuiButton",
		props: {
			// primary, white, danger, warning, green, gray,gradual
			type: {
				type: String,
				default: 'gradual',
			},
			// block, mini, small
			size: {
				type: String,
				default: 'block',
			},
			// circle, square,rightAngle
			shape: {
				type: String,
				default: 'square'
			},
			plain: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			loading: {
				type: Boolean,
				default: false,
			},
			openType: {
				type: String,
				default: ''
			},
			formType: {
				type: String,
				default: ''
			},
			hidden: {
				type: Boolean,
				default: false
			},
			bottom: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			handleClick() {
				if (this.disabled) {
					return false;
				}
				this.$emit('click', {})
			},
			bindgetuserinfo({
				detail = {}
			} = {}) {
				this.$emit('getuserinfo', detail);
			},
			getDisabledClass: function(disabled, type) {
				var className = '';
				if (disabled && type != 'white' && type != 'gray') {
					className = type == 'gradual' ? 'btn-gradual-disabled' : 'tui-dark-disabled';
				}
				return className;
			},
			getShapeClass: function(shape, plain) {
				var 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) {
				var className = '';
				if (!disabled) {
					className = plain ? 'tui-outline-hover' : ('tui-' + (type || 'gradual') + '-hover');
				}
				return className;
			}
		}
	}
</script>

组件样式

... 此处省略n行

脚本说明

 props: 
	 "type" : 样式类型,可传入[primary, white, danger, warning, green, gray,gradual] 类型:"String",默认值:"gradual"	
	 "size" :按钮大小,可传入[block, mini, small] 类型:"String",默认值:"block"
	 "shape" :按钮形状,可传入[circle(圆角), square(默认方形),rightAngle(平角)],类型:"String",默认值:"square"
	 "plain":是否空心,类型:"Boolean",默认值:false
	 "disabled":是否禁用,类型:"Boolean",默认值:false
	 "loading":是否显示加载图标,类型:"Boolean",默认值:false
	 "openType":开放能力,参考官方文档,类型:"String",默认值:""
	 "formType":用于 <form> 组件,参考官方文档,类型:"String",默认值:""
	 "hidden":是否移除,建议直接在页面控制,类型:"Boolean",默认值:false
	 
 methods:
   "handleClick":按钮点击事件
   "bindgetuserinfo":获取用户信息,参考官方文档
   "getDisabledClass":禁用样式class获取
   "getShapeClass":按钮形状class获取
   "getHoverClass":点击效果 class获取

示例

... 此处省略n行,下载源码查看