增加数值输入组件

Tevin

2021-04-19 23b866659d5e4bb61be38bccffec1727583bebba

增加数值输入组件

 forms/inputNumber/CInputNumber.vue

New file
@@ -0,0 +1,73 @@
/**
 * CInputNumber
 * @author Tevin
 */

<template>
    <view class="c-input-number">
        <AtInput
            ref="input"
            :name="itemRes.name"
            :title="itemRes.label"
            :required="itemRes.required"
            :disabled="itemRes.disabled"
            :error="itemRes.error"
        />
        <AtInputNumber
            ref="numbers"
            :min="range[0]"
            :max="range[1]"
            :step="step"
            :width="120"
            :value="itemRes.formData[itemRes.name]"
            :onChange="evt=>itemRes.onChange(evt)"
        />
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput, AtInputNumber } from 'taro-ui-vue';
import './cInputNumber.scss';

export default {
    name: 'CInputNumber',
    components: {
        AtInput,
        AtInputNumber,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 占位提示
        placeholder: String,
        // 取值范围
        range: {
            type: Array,
            default: [0, 100],
        },
        // 步长
        step: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {};
    },
    computed: {},
    methods: {},
    mounted() {
        if (process.env.TARO_ENV === 'h5') {
            $(this.$refs.input.$el)
                .find('.at-input__input')
                .prepend(this.$refs.textarea.$el);
        } else if (process.env.TARO_ENV === 'weapp') {
            $(this.$refs.input.$el)
                .find('.at-input__container')
                .append(this.$refs.numbers.$el);
        }
    },
};
</script>

 forms/inputNumber/cInputNumber.scss

New file
@@ -0,0 +1,30 @@
/**
 * input-number
 * @author Tevin
 */

@import "../../common/sassMixin";


.c-input-number {
    .at-input__container {
        .weui-input,
        .at-input__input {
            display: none;
        }
    }
    .at-input__icon {
        display: none;
    }
    .at-input {
        padding: 16px 0;
    }
    .at-input-number {
        .at-input-number__btn {
            padding: 16px 16px;
        }
        .at-input-number__input {
            font-size: 30px;
        }
    }
}

 forms/inputNumber/index.js

New file
@@ -0,0 +1,10 @@
/**
 * CInputNumber
 * @author Tevin
 */

import CInputNumber from '@components/forms/inputNumber/CInputNumber.vue';

export {
    CInputNumber,
}

 forms/textarea/CTextArea.vue

@@ -10,6 +10,7 @@
            :name="itemRes.name"
            :title="itemRes.label"
            :required="itemRes.required"
            :disabled="itemRes.disabled"
            :error="itemRes.error"
        />
        <textarea