easyinput 组件是对原生input组件的增强 ,是专门为配合表单组件 uni-forms 而设计的,easyinput 内置了边框,图标等,同时包含 input 所有功能。
效果图:
代码实现:
<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>