如何建设和优化网站,巩义网站优化,游戏网站模板源码,经营阅读网站需要怎么做去除fixed、showWordLimit、showConfirmBar、disableDefaultPadding、autosize字段
此组件为一个输入框#xff0c;默认没有边框和样式#xff0c;是专门为配合表单组件u-form而设计的#xff0c;利用它可以快速实现表单验证#xff0c;输入内容#xff0c;下拉选择等功能…去除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);}}}
/scriptcopy
#输入框的类型
综述输入框的类型可通过配置type来设置
text-文本输入键盘。number-数字输入键盘app-vue下可以输入浮点数app-nvue和小程序平台下只能输入整数。idcard-身份证输入键盘微信、支付宝、百度、QQ小程序。digit-带小数点的数字键盘App的nvue页面、微信、支付宝、百度、头条、QQ小程序。password-等同于设置password为true的效果
#可清空字符
将clearable设置为true会在输入框后方增加一个清空按钮。
templateu--inputplaceholder请输入内容bordersurroundclearable/u--input
/templatecopy
#下划线
通过设置属性border为bottom即可变成一个下划线
templateu--inputplaceholder请输入内容borderbottomclearable/u--input
/templatecopy
#前后图标
全后置图标可自由设置样式信息。
templateu--inputplaceholder前置图标prefixIconsearchprefixIconStylefont-size: 22px;color: #909399/u--inputu--inputplaceholder后置图标suffixIconmap-fillsuffixIconStylecolor: #909399/u--input
/templatescript
/scriptcopy
#前后插槽
通过设置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
