uniapp组件-uni-easyinput 增强型输入框

左手的ㄟ右手 2021-07-26 02:09 791阅读 0赞

easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能。

## 效果图： ##

![20210302220353827.gif][]

## 代码实现： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		<view>输入内容："{
       { value }}"</view>
    		<uni-easyinput v-model="value" focus placeholder="默认" @input="input"/>
    		<uni-easyinput v-model="value" focus placeholder="去除空格" @input="input" trim="all"/>
    		<uni-easyinput v-model="value" focus placeholder="自定义样式" @input="input"
    		               :styles="styles" :placeholderStyle="placeholderStyle"/>
    		<uni-easyinput prefixIcon="search" v-model="value" placeholder="左图标" @iconClick="iconClick"/>
    		<uni-easyinput suffixIcon="search" v-model="value" placeholder="右图标" @iconClick="iconClick"/>
    		<uni-easyinput disabled value="已禁用" placeholder="禁用"/>
    		<uni-easyinput type="password" v-model="password" placeholder="密码框"/>
    		<uni-easyinput type="textarea" v-model="value" placeholder="多行文本"/>
    		<uni-easyinput type="textarea" v-model="value" placeholder="多行文本自动高度" autoHeight/>
    
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				value: '',
    				password: '',
    				placeholderStyle: "color:#499721;font-size:16px",
    				styles: { color: 'blue',borderColor: 'green' }
    			}
    		},
    		methods: {
    			input(e) {
    				uni.showToast({
    					title:e
    				})
    			},
    			iconClick(type) {
    				uni.showToast({
    					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
    					icon: 'none'
    				})
    			}
    		}
    	}
    </script>

[20210302220353827.gif]: /images/20210725/d52e279471af4869bc1f3cca09cbd4af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/879d4fef7fbc4a4e83dd9aa36212f58a.png