码迷,mamicode.com
首页 > 其他好文 > 详细

3.4_表单组件_input

时间:2020-07-14 18:35:56      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:wpa   code   查看密码   show   eval   lazy   mic   收起键盘   属性   

img:

技术图片

 

 code:

<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">&#xe568;</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>

3.4_表单组件_input

标签:wpa   code   查看密码   show   eval   lazy   mic   收起键盘   属性   

原文地址:https://www.cnblogs.com/luwei0915/p/13300374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!