zjy-easyinput文本框带按钮，uni-easyinput增强版

一、zjy-calendar简介

zjy-calendar日历是对uniapp uni-easyinput文本框的增强，支持文本框前后加按钮。

二、使用方法

源使用说明：https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html

1、下载导入

https://ext.dcloud.net.cn/plugin?id=13609

2、引入组件

<zjy-easyinput v-model="value" placeholder="请输入内容" :suffixButton="buttonInfo1"
				@clickButton="clickButton"></zjy-easyinput>

import ZjyEasyinput from '@/uni_modules/zjy-easyinput/components/zjy-easyinput/zjy-easyinput.vue'

3、设置buttonInfo属性

data() {
	return {
		buttonInfo1: {
			title: '查询',
			type: 'primary',
			size:'mini',
		},
	}
}

参数	描述	值
title	按钮上的文字
type	按钮类型样式	primary，default，warn
size	按钮大小	default，mini

三、示例

<template>
	<view class="content">
		<uni-section title="带按钮" subTitle="带按钮的文本框" type="line" padding>
			<zjy-easyinput v-model="value" placeholder="请输入内容" :buttonInfo="buttonInfo1"
				@clickButton="clickButton"></zjy-easyinput>
			<zjy-easyinput class="uni-mt-5" v-model="value" placeholder="请输入内容" :buttonInfo="buttonInfo2"
				@clickButton="clickButton"></zjy-easyinput>
			<zjy-easyinput class="uni-mt-5" v-model="value" placeholder="请输入内容" :buttonInfo="buttonInfo3"
				@clickButton="clickButton"></zjy-easyinput>
		</uni-section>
		<uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line" padding>
			<zjy-easyinput errorMessage v-model="value" focus placeholder="请输入内容" @input="input"></zjy-easyinput>
		</uni-section>

		<uni-section title="去除空格" subTitle="使用 trim 属性 ,可以控制返回内容的空格 " type="line" padding>
			<text class="uni-subtitle">输入内容：{{ '"'+value+'"' }}</text>
			<zjy-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容"
				@input="input"></zjy-easyinput>
		</uni-section>

		<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line" padding>
			<zjy-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容"
				@input="input"></zjy-easyinput>
		</uni-section>
		<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" type="line" padding>
			<zjy-easyinput prefixIcon="search" v-model="value" placeholder="左侧图标" @iconClick="iconClick">
			</zjy-easyinput>
			<zjy-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="右侧图标"
				@iconClick="iconClick"></zjy-easyinput>
		</uni-section>
		
		<uni-section title="禁用" subTitle="使用 disabled 属性禁用输入框" type="line" padding>
			<zjy-easyinput disabled value="已禁用" placeholder="请输入内容"></zjy-easyinput>
		</uni-section>

		<uni-section title="密码框" subTitle="指定属性 type=password 使用密码框,右侧会显示眼睛图标" type="line" padding>
			<zjy-easyinput type="password" v-model="password" placeholder="请输入密码"></zjy-easyinput>
		</uni-section>

		<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
			<zjy-easyinput type="textarea" v-model="value" placeholder="请输入内容"></zjy-easyinput>
		</uni-section>

		<uni-section title="多行文本自动高度" subTitle="使用属性 autoHeight 使多行文本框自动增高" type="line" padding>
			<zjy-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></zjy-easyinput>
		</uni-section>
	</view>
</template>

<script>
	import ZjyEasyinput from '@/uni_modules/zjy-easyinput/components/zjy-easyinput/zjy-easyinput.vue'
	export default {
		components: {
			ZjyEasyinput
		},
		data() {
			return {
				buttonInfo1: {
					title: '查询',
					type: 'primary',
					size:'mini',
				},
				buttonInfo2: {
					title: '确定',
					type: 'default',
				},
				buttonInfo3: {
					title: '确定',
					type: 'default',
					position:'left'
				},
				title: 'Hello',
				value: '',
				password: '',
				placeholderStyle: "color:#2979FF;font-size:14px",
				styles: {
					color: '#2979FF',
					borderColor: '#2979FF'
				}
			}
		},
		methods: {
			clickButton() {
				console.info("clickButton")
			},
			input(e) {
				console.log('输入内容：', e);
			},
			iconClick(type) {
				uni.showToast({
					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
					icon: 'none'
				})
			}
		}
	}
</script>
<style>
	.uni-mt-5 {
		margin-top: 5px;
	}
	.content {
		margin: 10px;
	}
</style>