<template>
<view>
<view>
<input class="uni-input" auto-focus placeholder="输入框" placeholder-style="color:red" />
<input class="uni-input" confirm-type="search" placeholder="手机键盘右下角搜索" />
<!-- #ifndef H5 -->
<input class="uni-input" confirm-type="send" placeholder="键盘右下角按钮显示为发送" />
<!-- #endif -->
<input class="uni-input" maxlength="10" placeholder="控制字符数最大为10" />
<view>{{inputVal}}</view>
<input class="uni-input" @input="onKeyInput" placeholder="实时获取输入值" />
<input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
<!-- #ifndef MP-BAIDU -->
<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
<!-- #endif -->
<input class="uni-input" type="number" placeholder="自然数字" />
<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
<input class="uni-input" type="text" password placeholder="密码输入框" />
<view class="u-f">
<input class="uni-input" placeholder="可查看密码的输入框" :password="showPassword" />
<!-- 动态添加 password属性 -->
<text class="uni-icon" :class="[!showPassword ? ‘uni-eye-active‘ : ‘‘]" @click="changePassword"></text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
inputVal: ‘无‘,
changeValue: ‘‘,
inputClearValue:‘‘,
showPassword: true
}
},
methods: {
onKeyInput(e) {
this.inputVal = e.detail.value;
},
replaceInput(e) {
var value = e.detail.value;
if (value === ‘11‘) {
this.changeValue = ‘2‘;
}
},
hideKeyboard(e) {
if (e.detail.value === ‘123‘) {
uni.hideKeyboard();
}
},
changePassword() {
this.showPassword = !this.showPassword;
}
}
}
</script>
<style scoped>
.u-f{
display: flex;
}
.uni-eye-active{
color: #007AFF;
}
</style>
