uni-app扩展组件uni-easyinput的常用使用
官方文档可以看: uni-easyinput增强输入框组件示例: uni-easyinput增强输入框的示例
一.基本属性
1.基础用法
<uni-easyinput type="text" v-model="formData.age" placeholder="请输入年龄" />
v-model 为双向绑定的数据
placeholder为默认显示的值
type表示类型(ps:type为number,idcard,digit只能在手机上看到效果)
当type = textarea时,多用autoHeight可使用多行文本的自动高度,会跟随内容调整输入框的显示高度
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
2.disabled 禁用
<uni-easyinput disabled type="text" v-model="formData.age" placeholder="请输入年龄" />
3.输入框左右侧图标(prefixIcon左侧图标,suffixIcon右侧图标)
(!!!图标当前只支持 uni-icons 内置的图标!!!)
(!!!使用前先引入uni-icons否则没效果,不知道怎么应用的可以看这个链接: 引入uni-ui组件 )
<uni-easyinput prefixIcon="search" v-model="formData.easyinput" placeholder="请输入内容"></uni-easyinput>
<uni-easyinput suffixIcon="search" v-model="formData.easyinput" placeholder="请输入内容"></uni-easyinput>
4.取消边框
<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
二.常用事件
绛旓細瑕佺‘瀹氫竴涓皬绋嬪簭鏄惁浣跨敤uni-app寮鍙戯紝浣犲彲浠ラ氳繃浠ヤ笅鍑犱釜姝ラ杩涜鍒ゆ柇锛氭鏌ユ枃浠剁粨鏋勶細uni-app椤圭洰鐨勭粨鏋勪笌浼犵粺灏忕▼搴忎笉鍚岋紝鍏剁壒鏈夌殑鐗瑰緛鏄湁涓涓悕涓虹殑鐩綍銆傚鎵緐ni.js鏂囦欢锛歶ni-app浼氬湪灏忕▼搴忛」鐩腑鍒涘缓涓涓悕涓簎ni.js鐨勬牳蹇冩枃浠讹紝杩欐槸瀹冪殑涓涓噸瑕佹爣蹇椼傛煡鐪嬮厤缃枃浠讹細鍦ㄩ」鐩牴鐩綍涓嬶紝uni-app...
绛旓細璺ㄥ钩鍙拌兘鍔涗笉鍚岋紝寮鍙戜綋楠屼笉鍚岀瓑銆傝法骞冲彴鑳藉姏锛uni-app鍙互瀹炵幇涓濂椾唬鐮佸绔繍琛岋紝鏀寔缂栬瘧鍒癷OS銆丄ndroid銆丠5銆佸皬绋嬪簭绛夊涓钩鍙帮紝鑰孷ue鍒欎富瑕佸簲鐢ㄤ簬Web绔紝鍦ㄧЩ鍔ㄧ鐨勫簲鐢ㄧ浉瀵硅緝灏戙傚洜姝わ紝鍦ㄨ法骞冲彴鑳藉姏涓婏紝uni-app鍏锋湁鏇村ぇ鐨勪紭鍔裤傚紑鍙戜綋楠岋細Vue閲囩敤鍩轰簬缁勪欢鐨勫紑鍙戞柟寮忥紝鍏锋湁涓板瘜鐨勭粍浠跺簱鍜岀伒娲荤殑缁勪欢闂...
绛旓細uni-app鏀寔鐨勯氱敤css鍗曚綅鍖呮嫭px,rpx vue椤甸潰鏀寔鏅欻5鍗曚綅锛屼絾鍦╪vue閲屼笉鏀寔锛沶vue椤甸潰杩樹笉鏀寔鐧惧垎姣斿崟浣 App绔紝鍦╬ages.json閲岀殑titleNView鎴栭〉闈㈤噷鍐欑殑plus api涓秹鍙婄殑鍗曚綅锛屽彧鏀寔px锛屾鏃朵笉鏀寔rpx銆俷vue涓紝uni-app妯″紡鍙互浣跨敤px,rpx琛ㄧ幇涓巚ue涓竴鑷达紝weex妯″紡鐩墠閬靛惊weex鐨勫崟浣嶏紱鐐瑰嚮鍒囨崲瀹炵幇...
绛旓細鍦ㄦ櫘閫氱殑 H5+ 椤圭洰涓紝闇瑕佷娇鐢 document.addEventListener 鐩戝惉鍘熺敓鎵╁睍鐨勪簨浠躲uni-app 涓紝娌℃湁 document銆傚彲浠ヤ娇鐢 plus.globalEvent.addEventListener 鏉ュ疄鐜帮紙娉ㄦ剰manifest涓渶寮鍚柊缂栬瘧鍣紝鍗宠嚜瀹氫箟缁勪欢妯″紡"usingComponents":true锛夈傚悓鐞嗭紝鍦 uni-app 涓娇鐢 Native.js 鏃讹紝涓浜 Native.js 涓浜...
绛旓細uniapp鍘熺敓鎻掍欢寮鍙戜笌浣跨敤 闂1 锛 瀵煎叆UniPlugin-Hello-AS宸ョ▼椤圭洰鍚庯紝杩愯鏃惰櫄鎷熷櫒鎶evice support x86 but apk only supports armeabi-v7a 闂2 锛氭墦鍖uni-app鎻掍欢鏃讹紝閫夋嫨Gradle--->鎻掍欢module--->Tasks--->build--->assembleRelease锛堝弻鍑昏繍琛岀敓鎴恗odule鐨刟ar鏂囦欢锛夊弻鍑昏繍琛宎ssembleRelease...
绛旓細2.涓板瘜缁勪欢搴擄細uni-app鎻愪緵浜嗕赴瀵岀殑缁勪欢搴撳拰鎻掍欢甯傚満锛屽紑鍙戣呭彲浠ユ洿蹇熷湴鏋勫缓澶嶆潅鐨勯〉闈㈠拰鍔熻兘銆3.鏇存柊缁存姢锛歶ni-app鏈夌潃杈冧负绉瀬鐨勭ぞ鍖哄拰鍥㈤槦缁存姢锛屽彲浠ユ洿鍙婃椂鍦伴傞厤鏂扮壒鎬у拰淇闂銆傜己鐐癸細1.瀛︿範鏇茬嚎锛氬浜庡垵瀛﹁呮潵璇达紝uni-app鍙兘闇瑕佷竴瀹氱殑瀛︿範鏇茬嚎锛岀壒鍒槸瀵逛簬涓嶇啛鎮塚ue.js鐨勫紑鍙戣呫2.妗嗘灦...
绛旓細鍦ㄨ矾鐢辩鐞嗕笂锛uniapp鏈夎嚜宸辩殑璺敱绯荤粺锛屼笉鏀寔vue-router銆傝繖鍙兘瀵规煇浜涗緷璧杤ue-router鐗规х殑寮鍙戣呮潵璇存槸涓涓皟鏁寸偣銆傚敖绠″姝わ紝uniapp杩樻槸灞曠幇鍑轰簡鍏剁嫭鐗圭殑浼樼偣锛氬畠鏄竴濂楀绔傜敤鐨勫紑婧愭鏋讹紝鏄捐憲闄嶄綆浜嗗紑鍙戞垚鏈紝灏ゅ叾瀵逛簬鍓嶇寮鍙戣咃紝鍥犱负瀹冨熀浜*.js锛屼笖灏佽鐨缁勪欢涓庡井淇″皬绋嬪簭缁勪欢鍏煎锛屽涔犳洸绾跨浉瀵...
绛旓細鐩爣涓嶅悓銆佸钩鍙版敮鎸佷笉鍚屻缁勪欢搴撲笉鍚屻佹灦鏋勪笉鍚屻1銆uniapp涓撴敞浜庡绔簲鐢ㄧ殑寮鍙戯紝鎻愪緵浜嗕竴濂楄法骞冲彴鐨勮В鍐虫柟妗堛倂ue涓撴敞浜嶹eb鍓嶇寮鍙戯紝鎻愪緵浜嗕竴濂楁瀯寤虹敤鎴风晫闈㈢殑妗嗘灦銆2銆乽niapp鏀寔澶氫釜骞冲彴锛屽寘鎷井淇″皬绋嬪簭銆佹敮浠樺疂灏忕▼搴忋丠5銆App绛夈倂ue涓昏鐢ㄤ簬Web寮鍙戯紝鍙互鍦ㄦ祻瑙堝櫒涓繍琛屻3銆乽niapp鍦╲ue鐨...
绛旓細uniapp閫氳繃涓濂桝PI瑙勮寖锛屼娇寰楀紑鍙戣呰兘澶熸洿鏂逛究鍦扮紪鍐欏彲澶嶇敤鍜屽彲缁存姢鐨勪唬鐮併傛澶栵紝uniapp杩樻彁渚涗簡涓板瘜鐨缁勪欢搴撳拰鎻掍欢甯傚満锛屽府鍔╁紑鍙戣呭揩閫熸瀯寤哄簲鐢ㄣ備富瑕佸尯鍒細1. 搴旂敤鑼冨洿锛歏ue涓昏鐢ㄤ簬鏋勫缓Web鐣岄潰鍜屽崟椤甸潰搴旂敤锛涜寀niapp鍒欏彲浠ュ紑鍙戣法骞冲彴鐨勫簲鐢紝鍖呮嫭Web銆佸皬绋嬪簭绛夈2. 寮鍙戞柟寮忥細Vue鏇存敞閲嶅墠绔紑鍙戯紝...
绛旓細璁╀綘鐨凙PP鍦ㄨ嫻鏋滆澶囦笂椋炶捣鏉ワ紝uni-app鍦╥OS骞冲彴鐨勬墦鍖呮祦绋嬫槸寮鍙戣呯殑蹇呯粡涔嬭矾銆備互涓嬫槸璇︾粏鐨勬楠わ細棣栧厛锛屽噯澶囧伐浣滃繀涓嶅彲灏戙傜‘淇漍code宸插畨瑁咃紝uni-app椤圭洰閰嶇疆浜嗘纭殑搴旂敤淇℃伅锛堝AppID銆丅undle Identifier绛夛級锛屽苟閰嶇疆濂絠OS寮鍙戣呰瘉涔﹀拰鎻忚堪鏂囦欢銆傛帴鐫锛岀敓鎴愮鍚嶅瘑閽ャ傚湪HBuilderX鐨刴anifest.json鏂囦欢涓...