#

whycq

2023-10-01 a7b6c051c9ee8960409380bed90d03c1fcc2d527

#

 components/z-input/z-input.vue

@@ -3,11 +3,13 @@
        <view class="main">
            <view class="inner1">{{desc}}</view>
            <view class="put inner2">
                <input class="p-input" type="text" :placeholder="placeholder" @input="input" v-model="data">
                <uni-icons class="p-icon" type="closeempty" size="16" color="#707070" v-show="data.length" @click="clear"></uni-icons>
                <input class="p-input" type="text" :placeholder="placeholder" v-model="data" :focus="focusData">
                <uni-icons class="p-icon" type="closeempty" size="16" color="#707070" 
                    v-show="data.length" @click="clear">
                </uni-icons>
            </view>
            <view class="inner3" v-show="btn">
                <button class="m-btn" size="mini">{{btnName}}</button>
                <button class="m-btn" size="mini" @click="clickBtn">{{btnName}}</button>
            </view>
        </view>
    </view>
@@ -19,6 +21,7 @@
        data() {
            return {
                data:'',
                focusData: false
            };
        },
        props: {
@@ -39,35 +42,51 @@
                default: '请输入'
            },
            value: {
                type: String,
                type: [String,Number],
                default: ''
            },
            lenCheck: {
                type: [Number],
                default: null
            },
            focus: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            data(val) {
                if (this.data.length != this.lenCheck) {
                    console.log(123);
                    this.data = val
                }
                if (!this.lenCheck) {
                this.$emit('input',val)
                    return
                }
                if (val.length != this.lenCheck) {
                    setTimeout(()=>{
                        this.data = ''
                        this.$emit('input','')
                    },10)
                } else {
                    this.$emit('input',val)
                }
            },
            value(val) {
                this.data = val
            },
            focus(f) {
                console.log(f);
                this.focusData = !f
                setTimeout(()=>{
                    this.focusData = f
                },10)
            }
        },
        created() {
            this.data = this.value
            this.focusData = this.focus
        },
        methods: {
            input() {
				
            },
            clear() {
                this.data = ''
            },
            clickBtn() {
                this.$emit('clickBtn');
            }
        }
    }

 pages/component/demo.vue

@@ -1,10 +1,16 @@
<template>
    <view>
        <z-input v-for="it in zInputList" :desc="it.desc" :btn="it.btn" :btn-name="it.btnName" v-model="it.val" :lenCheck="it.lenCheck"></z-input>
        <z-input v-for="it in zInputList" 
            :desc="it.desc" :btn="it.btn" :btn-name="it.btnName" v-model="it.val" 
            :lenCheck="it.lenCheck" :focus="it.focus" @clickBtn='entry(it.name)'>
        </z-input>
        <view>输入框1</view>
        <view>{{zInputList[0].val}}</view>
        <view>输入框2</view>
        <view>{{zInputList[1].val}}</view>
        <view>输入框2</view>
        <view>{{zInputList[2].val}}</view>
        <button @click="focus">focus</button>
    </view>
</template>

@@ -13,12 +19,39 @@
        data() {
            return {
                zInputList: [ 
                    {name: 'yyy',desc: '托盘码',val: '2',lenCheck: 8},
                    {name: 'yyy',desc: '物料码',btn: true,btnName: '提取',placeholder: '',val: '1'}
                    {name: 'ccc',desc: '订单号',btn: true,btnName: '阿斯顿',val: 'orderNo',focus: true},
                    {name: 'yyy',desc: '托盘码',val: '2',lenCheck: 8,focus: false},
                    {name: 'aaa',desc: '物料码',btn: true,btnName: '提取',placeholder: '',val: '1',focus: false}
                ],
                
            }
        },
        methods: {
            entry(e) {
            },
            ccc() {
            },
            aaa() {
				
            },
            focus() {
                if (this.zInputList[0].focus) {
                    this.zInputList[0].focus = false
                    this.zInputList[1].focus = true
                    this.zInputList[2].focus = false
                } else if (this.zInputList[1].focus){
                    this.zInputList[0].focus = false
                    this.zInputList[1].focus = false
                    this.zInputList[2].focus = true
                } else {
                    this.zInputList[0].focus = true
                    this.zInputList[1].focus = false
                    this.zInputList[2].focus = false
        }
				
            }
        }
		
    }
</script>