更新记录

1.1.2（2020-05-11）

新增属性inputBorder 下划线输入框 可选值 all | bottom 默认为 all 新增inputBorder对应属性borderAnimation 下划线进入动画 可选值 left | center | right 默认为 left 新增属性 inputStyle 自定义样式

1.1.1（2020-05-06）

修复了v-model 不能响应method修改值的bug

1.1.0（2020-04-30）

修复了短信框 多次点击的问题

平台兼容性

插件安装

自定义输入框 待更完善

导入

import uinput from "@/components/my-components/uinput.vue"

*注意 修改width时 可以使用一个块级元素包裹起来 因为内部插件是100%宽度

using:

属性 attribute

textarea专属属性

短信验证码专属属性

方法 method

• input > 输入时触发得到Input框的值

• getValue > 失去焦点触发得到Input框的值可返回当前输入框的状态 是否通过验证

  返回值为 status：true|false 判断是否通过验证 ; value 返回输入框的值 ; el 当前输入框的元素对象 用于做提交按钮是不用再去做一次验证

• focus > 获取焦点回调

• 短信验证码框专属方法 counting 已开始倒计时回调方法 没有返回值

示范代码

如下 使用v-model正常获取输入框数据

        <view>
            <uinput label="输入框1" v-model="test" :focus="true" labelPosition="top" placeholder="请输入输入框1"></uinput>
            <view class="font14 ml10">输入框1的结果:{{test}}</view>
            <uinput label="输入框2" v-model="test2" inputBorder="bottom" borderAnimation="center"  placeholder="请输入输入框2"></uinput>
            <view class="font14 ml10">输入框2的结果:{{test2}}</view>
            <uinput label="手机号" v-model="tel" type="tel" placeholder="请输入手机号"></uinput>
            <view class="font14 ml10">手机框的结果:{{tel}}</view>
            <uinput label="验证码" type="msgcode" :send="true" placeholder="请输入验证码"></uinput>
            <view class="font14 ml10"></view>

            <uinput :onlyInput="true" placeholder="邮箱输入框" type="email" ></uinput>

            <uinput class="mt10" :onlyInput="true" placeholder="银行卡号输入框" type="bankcard" inputBorder="bottom"></uinput>

            <uinput type="textarea" height="300" tlposition="none" :maxlength="-1" placeholder="输入文本框">
            </uinput>
            <button @click="aaa">aaa</button>
        </view>
</template>

<script>
    import uinput from "@/components/my-components/uinput.vue";
    export default {
        components: {
            uinput
        },
        data(){
            return{
                test:'',
                test2:'测试数据',
                tel:''
            }
        },
        methods:{
            aa(e){
                console.log(e);
            },
            aaa(){
                this.test = 'aaa';
            }
        }
    }
</script>

<style>

</style>

发现问题请及时在评论区给我反馈，谢谢大家的指正，如果好用请给个好评哦~