万网注册域名做简单网站,寺庙网站开发文案,做化妆品等的网站,网站解析后显示在建设中目录 #平台差异说明 #基本使用 #输入框的类型 #可清空字符 #下划线 #前后图标 #前后插槽 API #Props #Events #Methods #Slots 去除fixed、showWordLimit、showConfirmBar、disableDefaultPadding、autosize字段 此组件为一个输入框#xff0c;默认没有边框和样式… 目录 #平台差异说明 #基本使用 #输入框的类型 #可清空字符 #下划线 #前后图标 #前后插槽 API #Props #Events #Methods #Slots 去除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均可。 #平台差异说明 AppvueAppnvueH5小程序√√√√ #基本使用 通过type设置输入框的类型默认text通过placeholder设置输入框为空时的占位符通过border配置是否显示输入框的边框绑定change事件 templateu--inputplaceholder请输入内容bordersurroundv-modelvaluechangechange/u--input /templatescriptexport default {data() {return {value: }},methods: {change(e) {console.log(change, e);}}} /script#输入框的类型 综述输入框的类型可通过配置type来设置 text-文本输入键盘。number-数字输入键盘app-vue下可以输入浮点数app-nvue和小程序平台下只能输入整数。idcard-身份证输入键盘微信、支付宝、百度、QQ小程序。digit-带小数点的数字键盘App的nvue页面、微信、支付宝、百度、头条、QQ小程序。password-等同于设置password为true的效果 #可清空字符 将clearable设置为true会在输入框后方增加一个清空按钮。 templateu--inputplaceholder请输入内容bordersurroundclearable/u--input /template#下划线 通过设置属性border为bottom即可变成一个下划线 templateu--inputplaceholder请输入内容borderbottomclearable/u--input /template#前后图标 全后置图标可自由设置样式信息。 templateu--inputplaceholder前置图标prefixIconsearchprefixIconStylefont-size: 22px;color: #909399/u--inputu--inputplaceholder后置图标suffixIconmap-fillsuffixIconStylecolor: #909399/u--input /templatescript /script#前后插槽 通过设置slot为prefix或suffix来指定前后插槽 templateview classu-demo-blocktext classu-demo-block__title前后插槽/textview classu-demo-block__content!-- 注意由于兼容性差异如果需要使用前后插槽nvue下需使用u--input非nvue下需使用u-input --!-- #ifndef APP-NVUE --u-input placeholder前置插槽!-- #endif --!-- #ifdef APP-NVUE --u--input placeholder前置插槽!-- #endif --u--texttexthttp://slotprefixmargin0 3px 0 0typetips/u--text!-- #ifndef APP-NVUE --/u-input!-- #endif --!-- #ifdef APP-NVUE --/u--input!-- #endif --/viewviewclassu-demo-block__contentstylemargin-top: 15px;!-- 注意由于兼容性差异如果需要使用前后插槽nvue下需使用u--input非nvue下需使用u-input --!-- #ifndef APP-NVUE --u-input placeholder后置插槽!-- #endif --!-- #ifdef APP-NVUE --u--input placeholder后置插槽!-- #endif --template slotsuffixu-coderefuCodechangecodeChangeseconds20changeTextX秒重新获取哈哈哈/u-codeu-buttontapgetCode:texttipstypesuccesssizemini/u-button/template!-- #ifndef APP-NVUE --/u-input!-- #endif --!-- #ifdef APP-NVUE --/u--input!-- #endif --/view/view /templatescriptexport 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 API #Props 参数说明类型默认值可选值value输入的值Number | String--type输入框类型见上方说明Stringtextnumber | idcard | digit | passworddisabled是否禁用输入框BooleanfalsetruedisabledColor禁用状态时的背景色String#f5f7fa-clearable是否显示清除控件Booleanfalsetruepassword是否密码类型Booleanfalsetruemaxlength最大输入长度设置为 -1 的时候不限制最大长度String | Number-1-placeholder输入框为空时的占位符String--placeholderClass指定placeholder的样式类注意页面或组件的style中写了scoped时需要在类名前写/deep/Stringinput-placeholder-placeholderStyle指定placeholder的样式字符串/对象形式如color: red;String | Objectcolor: #c0c4cc-showWordLimit是否显示输入字数统计只在 type text或type textarea时有效BooleanfalsetrueconfirmType设置右下角按钮的文字兼容性详见uni-app文档Stringdonesend | search | next | go | doneconfirmHold点击键盘右下角按钮时是否保持键盘不收起H5无效BooleanfalsetrueholdKeyboardfocus时点击页面的时候不收起键盘微信小程序有效Booleanfalsetruefocus自动获取焦点在 H5 平台能否聚焦以及软键盘是否跟随弹出取决于当前浏览器本身的实现。nvue 页面不支持需使用组件的 focus()、blur() 方法控制焦点BooleanfalsetrueautoBlur键盘收起时是否自动失去焦点目前仅App3.0.0有效BooleanfalsetrueignoreCompositionEvent 2.0.34是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件且在文本合成期间会触发 input 事件BooleantruefalsedisableDefaultPadding是否去掉 iOS 下的默认内边距仅微信小程序且typetextarea时有效Booleanfalsetruecursor指定focus时光标的位置String | Number-1-cursorSpacing输入框聚焦时底部与键盘的距离String | Number30-selectionStart光标起始位置自动聚集时有效需与selection-end搭配使用String | Number-1-selectionEnd光标结束位置自动聚集时有效需与selection-start搭配使用String | Number-1-adjustPosition键盘弹起时是否自动上推页面BooleantruefalseinputAlign输入框内容对齐方式Stringleftleft | center | rightfontSize输入框字体的大小String | Number15px-color输入框字体颜色String#303133-prefixIcon输入框前置图标String--prefixIconStyle前置图标样式对象或字符串String | Object--suffixIcon输入框后置图标String--suffixIconStyle后置图标样式对象或字符串String | Object--border边框类型surround-四周边框bottom-底部边框none-无边框Stringsurroundbottom | nonereadonly是否只读与disabled不同之处在于disabled会置灰组件而readonly则不会Booleanfalsetrueshape输入框形状circle-圆形square-方形Stringsquarecircleformatter输入过滤或格式化函数(如需兼容微信小程序则只能通过setFormatter方法)Functionnull-customStyle定义需要用到的外部样式Object-- #Events 事件名说明回调参数版本blur输入框失去焦点时触发value内容值-focus输入框聚焦时触发--confirm点击完成按钮时触发value内容值-keyboardheightchange键盘高度发生变化的时候触发此事件-微信小程序2.7.0、App 3.1.0input内容发生变化触发此事件value内容值-change内容发生变化触发此事件value内容值-clear点击清空内容-- #Methods 方法名说明setFormatter为兼容微信小程序而暴露的内部方法见上方说明 #Slots 名称说明prefix输入框前置内容nuve环境需u--input有效非nvue环境需u-input才有效suffix输入框后置内容nuve环境需u--input有效非nvue环境需u-input才有效