#

whycq

2023-09-25 87ae4312bc4a5674833d7e97a1cc211c099fda9e

#

 components/z-input/z-input.vue

New file
@@ -0,0 +1,116 @@
<template>
    <view>
        <view class="main">
            <view class="inner1">{{desc}}</view>
            <view class="put inner2">
                <input class="p-input" type="text" :placeholder="placeholder" @input="input" v-model="val">
                <uni-icons class="p-icon" type="closeempty" size="16" color="#707070" v-if="val.length" @click="clear"></uni-icons>
            </view>
            <view class="inner3" v-show="btn">
                <button class="m-btn" size="mini">{{btnName}}</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"z-input",
        props: {
            desc: {
                type: String,
                default: ''
            },
            btn: {
                type: Boolean,
                default: false
            },
            btnName: {
                type: String,
                default: 'button'
            },
            placeholder: {
                type: String,
                default: '请输入'
            },
            value: {
                type: [String, Number],
                default: ''
            },
        },
        watch: {
            value(val) {
                console.log(val);
                this.val = val
            },
        },
        created() {
            this.val = this.value
        },
        data() {
            return {
                val:'',
            };
        },
        methods: {
            input() {
                this.$emit('input',this.val);
            },
            clear() {
                this.val = ''
                this.input()
            }
        }
    }
</script>

<style scoped>
    .main {
        display: flex;
        align-items: center;
        min-height: 70rpx;
        background-color: #FFF;
        /* border-bottom: 1px solid darkgray; */
    }
    .put {
        display: flex;
        flex-shrink: 0;
    }
	
    .inner1 {
        width: 120rpx;
        padding-left: 8px;
        font-weight: 700;
        font-family:'Helvetica Neue';
    }
    .inner2 {
        background-color: aliceblue;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .p-input {
        flex:1;
        padding-left: 8px;
    }
    .p-icon {
        margin-left: 8px;
        margin-right: 8px;
    }
    .inner3 {
        width: 200rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .m-btn {
        background-color: #3c9cff;
        color: #FFF;
    }
    .m-btn:active {
        background-color: #55bbff;
        color: #FFF;
    }

</style>

 pages.json

@@ -1,6 +1,12 @@
{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/component/demo",
            "style": {
                "navigationBarTitleText": "测试"
            }
        },
        {
            "path": "pages/LoginDemo/LoginDemo",
            "style": {
                "navigationBarTitleText": "登录"

 pages/component/demo.vue

New file
@@ -0,0 +1,26 @@
<template>
    <view>
        <z-input v-for="it in zInputList" :desc="it.desc" :btn="it.btn" :btn-name="it.btnName" v-model="it.val"></z-input>
        <view>输入框1</view>
        <view>{{zInputList[0].val}}</view>
        <view>输入框2</view>
        <view>{{zInputList[1].val}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                zInputList: [ 
                    {name: 'yyy',desc: '托盘码',val: 'a'},
                    {name: 'yyy',desc: '物料码',btn: true,btnName: '提取',placeholder: '',val: 8}
                ],
				
            }
        }
    }
</script>

<style>
</style>