去除fixed
、showWordLimit
、showConfirmBar
、disableDefaultPadding
、autosize
字段
此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件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
配置是否显示输入框的边框 -
绑定
<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>@change
事件
copy
#输入框的类型
综述:输入框的类型可通过配置type
来设置:
- text-文本输入键盘。
- number-数字输入键盘,app-vue下可以输入浮点数,app-nvue和小程序平台下只能输入整数。
- idcard-身份证输入键盘,微信、支付宝、百度、QQ小程序。
- digit-带小数点的数字键盘,App的nvue页面、微信、支付宝、百度、头条、QQ小程序。
- password-等同于设置
password
为true
的效果
#可清空字符
将clearable
设置为true
,会在输入框后方增加一个清空按钮。
<template>
<u--input
placeholder="请输入内容"
border="surround"
clearable
></u--input>
</template>
copy
#下划线
通过设置属性border
为bottom
即可变成一个下划线
<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
#前后插槽
通过设置slot
为prefix
或suffix
来指定前后插槽
<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>