uView Input 输入框

去除fixedshowWordLimitshowConfirmBardisableDefaultPaddingautosize字段

此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。

应该在u-form中嵌套u-form-item,再嵌套u-input去实现。

注意:

由于在nvue下,u-input名称被uni-app官方占用,在nvue页面中请使用u--input名称,在vue页面中使用u--input或者u-input均可。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过type设置输入框的类型,默认text

  • 通过placeholder设置输入框为空时的占位符

  • 通过border配置是否显示输入框的边框

  • 绑定@change事件

    <template> <u--input placeholder="请输入内容" border="surround" v-model="value" @change="change" ></u--input> </template> <script> export default { data() { return { value: '' } }, methods: { change(e) { console.log('change', e); } } } </script>

copy

#输入框的类型

综述:输入框的类型可通过配置type来设置:

  1. text-文本输入键盘。
  2. number-数字输入键盘,app-vue下可以输入浮点数,app-nvue和小程序平台下只能输入整数。
  3. idcard-身份证输入键盘,微信、支付宝、百度、QQ小程序。
  4. digit-带小数点的数字键盘,App的nvue页面、微信、支付宝、百度、头条、QQ小程序。
  5. password-等同于设置passwordtrue的效果
#可清空字符

clearable设置为true,会在输入框后方增加一个清空按钮。

<template>
  <u--input
    placeholder="请输入内容"
    border="surround"
    clearable
  ></u--input>
</template>

copy

#下划线

通过设置属性borderbottom即可变成一个下划线

<template>
  <u--input
    placeholder="请输入内容"
    border="bottom"
    clearable
  ></u--input>
</template>

copy

#前后图标
  • 全后置图标可自由设置样式信息。

    <template> <u--input placeholder="前置图标" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" ></u--input> <u--input placeholder="后置图标" suffixIcon="map-fill" suffixIconStyle="color: #909399" ></u--input> </template> <script> </script>

copy

#前后插槽

通过设置slotprefixsuffix来指定前后插槽

<template>
	<view class="u-demo-block">
		<text class="u-demo-block__title">前后插槽</text>
		<view class="u-demo-block__content">
			<!-- 注意:由于兼容性差异,如果需要使用前后插槽,nvue下需使用u--input,非nvue下需使用u-input -->
			<!-- #ifndef APP-NVUE -->
			<u-input placeholder="前置插槽">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<u--input placeholder="前置插槽">
			<!-- #endif -->
				<u--text
					text="http://"
					slot="prefix"
					margin="0 3px 0 0"
					type="tips"
				></u--text>
			<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
		</view>
		<view
			class="u-demo-block__content"
			style="margin-top: 15px;"
		>
			<!-- 注意:由于兼容性差异,如果需要使用前后插槽,nvue下需使用u--input,非nvue下需使用u-input -->
			<!-- #ifndef APP-NVUE -->
			<u-input placeholder="后置插槽">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<u--input placeholder="后置插槽">
			<!-- #endif -->
				<template slot="suffix">
					<u-code
						ref="uCode"
						@change="codeChange"
						seconds="20"
						changeText="X秒重新获取哈哈哈"
					></u-code>
					<u-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></u-button>
				</template>
			<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
  export default {
    data() {
      return {
        tips: '',
        value: ''
      }
    },
    watch: {
      value(newValue, oldValue) {
        // console.log('v-model', newValue);
      }
    },
    methods: {
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }, 2000);
        } else {
          uni.$u.toast('倒计时结束后再发送');
        }
      },
      change(e) {
        console.log('change', e);
      }
    }
  }
</script>
相关推荐
尘浮生40 分钟前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生5 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen7 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
中云DDoS CC防护蔡蔡14 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼17 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857520 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027720 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收