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>

3.扫码组件

• 支持输入框输入，摄像头扫码输入

<template>
	<uni-easyinput :placeholder="placeholder" v-model="input_value" :disabled="disabled" suffixIcon="scan" :focus="focus" :clearable="clearable"
	@change="onChange" @confirm="onConfirm" @iconClick="onScan" @input="onInput"
	@blur="onBlur" @focus="onFocus"></uni-easyinput>
</template>

<script>
	export default{
		data(){
			return {
				input_value: ""
			}
		},
		created(){
			this.input_value = this.value || ""
		},
		watch: {
			value(newVal){
				this.input_value = newVal
			}
		},
		props: {
			value: {
				type: [Number,String],
				default: ""
			},
			disabled: {
				type:Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: "请输入"
			},
			focus: {
				type:Boolean,
				default: false
			},
			clearable: {
				type:Boolean,
				default: true
			},
			//自定义扫码逻辑
			scanEvent: {
				type: [String, Function],
				default: ""
			}
		},
		model: {
			prop: "value",
			event: "input"
		},
		methods: {
			onInput(){
				this.$nextTick(()=>{
					//通知父组件
					this.$emit('input',this.input_value)
				})
			},
			onChange(){
				//通知父组件
				this.$nextTick(()=>{
					//通知父组件
					this.$emit('change',this.input_value)
				})
			},
			onConfirm(){
				//判断是否处于扫码状态
				if(!getApp().globalData.isPdaScan){
					//处于未扫码状态
					//记录该状态
					getApp().globalData.isPdaScan = true
					//还原该状态
					setTimeout(()=>{
						getApp().globalData.isPdaScan = false
					},getApp().globalData.isPdaScanInterval)
					
					this.$nextTick(()=>{
						//通知父组件
						this.$emit('confirm',this.input_value)
					})
				}else{
					//处于扫码中，什么也不做
				}
			},
			onFocus(){
				//通知父组件
				this.$emit('focus')
			},
			onBlur(){
				//通知父组件
				this.$emit('blur')
			},
			onScan(){
				if(this.disabled){
					return
				}
				uni.scanCode({
					success: (res) => {
						//判断是否有自定义扫码逻辑
						if(typeof this.scanEvent == 'function'){
							//执行自定义扫码
							this.scanEvent(res.result)
						}else{
							//默认逻辑
							//填入输入框
							this.input_value = res.result
							//稍后通知
							this.$nextTick(()=>{
								//通知父组件
								this.$emit('input',this.input_value)
								//通知父组件
								this.$emit('confirm',this.input_value)
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .uniui-scan{
		font-size: 24px !important;
	}
</style>