uni-app UI组件

1.前言

• 个人封装的一系列简单易用的UI组件

2.按钮

• 支持大小中三种尺寸，支持主题色全局配置，支持常见的状态色

<template>
	<view :class="['zll-button-wrap', size, disabled? 'disabled':'',type=='text'?'text-btn':'']" :style="btnStyle" @click="onClick">
		<slot></slot>
	</view>
</template>

<script>
	export default{
		mixins: [componentMixins],
		props: {
			size: {
				type: String,
				default: "",//默认空 small mini
			},
			width: {
				type: String,
				default: "100%",
			},
			type: {
				type: String,
				default: "",//默认空 info
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
        data(){
		    return {
			     baseColor: "#33cccc",//默认主题色
		    }
	    },
        created(){
		    //读取颜色
		    this.baseColor = uni.getStorageSync("baseColor") || "#33cccc"
	    },
		methods: {
			//点击事件
			onClick(){
				//如果没有禁用，则触发点击事件
				if(!this.disabled){
					this.$emit('click')
				}
			}
		},
		computed: {
			btnStyle(){
				//按钮
				if(this.type != "text"){
					var bgColor = this.baseColor
					//背景色（根据type字段）
					if(this.type == "info"){
						bgColor = "#909399"
					}else if(this.type == "warning"){
						bgColor = "#f0ad4e"
					}else if(this.type == "error"){
						bgColor = "#dd524d"
					}
					return {
						backgroundColor: bgColor,
						width: this.width
					}
				}else{
					//文本按钮
					return {
						color: this.baseColor,
						width: this.width
					}
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.zll-button-wrap{
		height: 48px;
		line-height: 48px;
		color: #ffffff;
		text-align: center;
		border-radius: 10rpx;
		font-size: 36rpx;
		cursor: pointer;
	}
	.zll-button-wrap.small{
		height: 40px;
		line-height: 40px;
		border-radius: 8rpx;
		font-size: 32rpx;
	}
	.zll-button-wrap.mini{
		height: 36px;
		line-height: 36px;
		border-radius: 6rpx;
		font-size: 28rpx;
	}
	.zll-button-wrap.disabled{
		opacity: 0.65;
		cursor: not-allowed;
	}
	.zll-button-wrap.text-btn{
		display: inline-block;
		text-decoration: underline;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
	}
</style>