magiccube-vue3/package/components/amount-range/index.js

vue3-js版组件库

import { ref, computed, getCurrentInstance, watch, nextTick } from 'vue'
import getFormValidMethod from '../../utils/form-valid'
import AmountInput from './amount-input'

const AmountRange = {
    name: 'McAmountRange',
    props: {
        modelValue: [Array, String],
        value: [Array, String],
        minPlaceholder: {
            type: String,
            default: '最小'
        },
        maxPlaceholder: {
            type: String,
            default: '最大'
        },
        errorStatus: Boolean,
    },
    emit: ['update:modelValue', 'change', 'action'],
    setup(props, { emit }){
        const min = ref()
        const max = ref()
        const instance = getCurrentInstance()
        const { fieldName, validator, errorMessage } = getFormValidMethod(instance)
        const fieldError = computed(() => fieldName && errorMessage?.value && !props.unchecked ? errorMessage.value[fieldName] : '')
        watch(() => props.modelValue, (n, o) => {
            /* 监听外部改变参数 清空校验器报错 */
            n && n !== o && validator && validator('change', n)
            // 回显
            model.value = n
        })
        const model = computed({
            get(){
                if(props.modelValue){
                    return props.modelValue
                } else if(min.value || max.value){
                    return [min.value || '', max.value || '']
                } else {
                    return null
                }
            },
            set(value){
                if(Array.isArray(value)){
                    emit('update:modelValue', value)
                    emit('change', value)
                } else if(typeof value === 'string' || typeof value === 'number'){
                    min.value = value
                    max.value = ''
                    emit('update:modelValue', [value, ''])
                    emit('change', [value, ''])
                } else if(!value){
                    min.value = ''
                    max.value = ''
                    emit('update:modelValue', null)
                    emit('change')
                }
            }
        })
        const handleKeyboard = async () => {
            model.value = [min.value, max.value]
            await nextTick()
            emit('action', model.value)
        }
        return () => (
            <div
                class={[
                    'mc-amount-range-picker',
                    {
                        'disabled': props.disabled,
                        'error': Boolean(fieldError.value) || props.errorStatus
                    }
                ]}
            >
                <AmountInput
                    v-model={min.value}
                    placeholder={props.minPlaceholder}
                    onKeyboard={handleKeyboard}
                />
                <AmountInput
                    v-model={max.value}
                    placeholder={props.maxPlaceholder}
                    onKeyboard={handleKeyboard}
                />
            </div>
        )
    }
}

AmountRange.install = Vue => {
    Vue.component(AmountRange.name, AmountRange)
}
const McAmountRange = AmountRange
export { McAmountRange, McAmountRange as default }