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',},}
}

三、示例

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！