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

向右看齐 2024-03-17 20:41 82阅读 0赞

## 一、zjy-calendar简介 ##

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

![在这里插入图片描述][e401995460f44961b4ad161831189b2f.png]

## 二、使用方法 ##

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

### 1、下载导入 ###

[https://ext.dcloud.net.cn/plugin?id=13609][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',
    		},
    	}
    }

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
   <th>值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>按钮上的文字</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>按钮类型样式</td> 
   <td>primary，default，warn</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>按钮大小</td> 
   <td>default，mini</td> 
  </tr> 
 </tbody> 
</table>

## 三、示例 ##

<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>

[e401995460f44961b4ad161831189b2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f2b005b5d1e3445eac85271e10721ea7.png
[https_uniapp.dcloud.net.cn_component_uniui_uni-easyinput.html]: https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html
[https_ext.dcloud.net.cn_plugin_id_13609]: https://ext.dcloud.net.cn/plugin?id=13609