archives/src/global/components/hc-counter/index.vue

<template>
    <div class="hc-counter-box" :class="[block?'hc-counter-block':'', size, ui]">
        <div class="counter-box">
            <div class="counter-btn first" :disabled="modelValues <= 1" @click="moveBtnClick">-</div>
            <div class='counter-val w-20'>
                <span>{{modelValues}}</span>
                <span class="ml-2" v-if="text">{{text}}</span>
            </div>
            <div class="counter-btn end" @click="addBtnClick">+</div>
        </div>
    </div>
</template>

<script setup>
import {nextTick, ref, watch} from "vue";
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    modelValue: {
        type: [String,Number],
        default: 1
    },
    text: {
        type: String,
        default: ''
    },
    block: {
        type: Boolean,
        default: false
    },
    size: {
        type: String,
        default: ''
    },
})

const modelValues = ref(1)

nextTick(() => {
    setModelVal(props.modelValue)
})

//监听
watch(() => [
    props.modelValue,
], ([val]) => {
    setModelVal(val)
})

//转换
const setModelVal = (val) => {
    modelValues.value = Number(val)
    setEmitData(val)
}

const emit = defineEmits(['update:modelValue','addClick','moveClick', 'change'])

//减少
const moveBtnClick = () => {
    let val = modelValues.value - 1;
    if (val < 1) {
        modelValues.value =  1;
    } else {
        modelValues.value =  val;
        setEmitData(val)
    }
}

//增加
const addBtnClick = () => {
    let val = modelValues.value + 1;
    modelValues.value =  val;
    setEmitData(val)
}

//事件
const setEmitData = (val) => {
    emit('update:modelValue', val)
    emit('addClick', val)
    emit('change', val)
}

</script>

<style lang="scss" scoped>
.hc-counter-box {
    position: relative;
    display: inline-block;
    height: 32px;
    .counter-box {
        display: flex;
        align-items: center;
        height: inherit;
        color: #000000;
        .counter-btn {
            height: 32px;
            width: 32px;
            border: 1px solid #dddfe6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 100;
            cursor: pointer;
            user-select: none;
            background-color: white;
            transition: color 0.2s, background-color 0.2s;
            &.first {
                border-radius: 4px 0 0 4px;
            }
            &.end {
                border-radius: 0 4px 4px 0;
            }
            &:hover {
                color: var(--el-color-primary);
                background-color: var(--el-color-primary-light-8);
            }
            &[disabled=true] {
                cursor: not-allowed;
                color: #c5c5c5;
                background-color: #f3f3f3;
            }
        }
        .counter-val {
            height: inherit;
            border-top: 1px solid #dddfe6;
            border-bottom: 1px solid #dddfe6;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    &.hc-counter-block {
        width: 100%;
        .counter-box {
            width: 100%;
            .counter-val {
                width: auto;
                flex: 1;
            }
        }
    }
    &.large {
        height: 40px;
        .counter-btn {
            height: 40px;
            width: 40px;
            font-size: 26px;
        }
    }
}
</style>