#

whycq

2024-03-29 bc5538eae041493fb1761ec9ffc1b2a7450dd4bf

#

 pages/test/test01.vue

@@ -1,6 +1,7 @@
<template>
    <view>
        <mt-card></mt-card>
        <mt-input></mt-input>
    </view>
</template>

@@ -9,6 +10,7 @@
        data() {
            return {
                
				
            }
        },
        methods: {

 uni_modules/mtview-ui/components/mt-card/mt-card.vue

@@ -1,5 +1,8 @@
<template>
    <view>111</view>
    <view class="container">
        <view>商品编号</view>
        <view>商品名称</view>
    </view>
</template>

<script>
@@ -9,4 +12,9 @@
</script>

<style scoped>
    .container {
        margin: 16rpx;
        padding: 16rpx;
        background-color: #999;
    }
</style>

 uni_modules/mtview-ui/components/mt-input/mt-input.vue

New file
@@ -0,0 +1,51 @@
<template>
    <view class="container">
        <view class="tips">{{tips}}</view>
        <view class="input">
            <uni-icons class="input-icon" type="scan" size="16" color="#a6a6a6" @click="scan" />
            <input class="input-input" type="text">
            <uni-icons class="input-icon" type="close" size="16" color="#a6a6a6" @click="clear" />
        </view>
        <view class="option"></view>
		
    </view>
</template>

<script>
    export default {
        name: "mt-input",
        props: {
            tips: {
                type: String,
                default: '提示'
            },
        }
    }
</script>

<style scoped>
    .container {
        margin: 16rpx;
        padding: 16rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        border: 1px solid #999;
        border-radius: 17rpx;
    }
    .tips {
        /* border-right: 2px solid #999; */
        /* padding-right: 8rpx; */
    }
    .input {
        display: flex;
        align-items: center;
        flex: 1;
    }
    .input-input {
        flex: 1;
    }
    .input-icon {
        margin: 0 8rpx;
    }
</style>