xshop/resources/js/components/BorderRadiosInput.vue

<template>
    <div id="border-radios-input">
        <div id="shadow-input">

            <div class="row mb-2">
                <template v-for="i in 4">
                    <div class="col text-center" v-if="i != 3">
                        <button type="button" :class="`cir-btn `+(i == count?'active':'')" @click="count = i">
                            {{ i }}
                        </button>
                    </div>
                </template>
            </div>
            <div class="row">
                <div class="col-10">
                    <input type="range" class="form-range" v-model="val1" min="0" max="99">
                </div>
                <div class="col-2 text-end">
                    {{ val1 }}
                </div>
            </div>
            <div v-if="count > 1" class="row">
                <div class="col-10">
                    <input type="range" class="form-range" v-model="val2" min="0" max="99">
                </div>
                <div class="col-2 text-end">
                    {{ val2 }}
                </div>
            </div>
            <div v-if="count > 2" class="row">
                <div class="col-10">
                    <input type="range" class="form-range" v-model="val3" min="0" max="99">
                </div>
                <div class="col-2 text-end">
                    {{ val3 }}
                </div>
                <div class="col-10">
                    <input type="range" class="form-range" v-model="val4" min="0" max="99">
                </div>
                <div class="col-2 text-end">
                    {{ val4 }}
                </div>
            </div>

            <input type="hidden" :value="calcVal">

        </div>
    </div>
</template>

<script>
export default {
    name: "border-radios-input",
    components: {},
    data: () => {
        return {
            count: 0,
            val1: 0,
            val2: 0,
            val3: 0,
            val4: 0,
        }
    },
    emits: ['update:modelValue'],
    props: {
        modelValue: {
            default: '7px'
        }
    },
    mounted() {
        // setTimeout(()=>{
            let spltd = this.modelValue.trim().split(' ');
            this.count = spltd.length;
            // make valid
            for (const s in spltd) {
                spltd[s] = parseInt(spltd[s]);
                this['val' + (parseInt(s) + 1)] = parseInt(spltd[s]);
            }
        // },30);
    },
    computed: {
        calcVal() {
            let result;
            if (this.count == 0){
                return '';
            }
            if (this.count == 1) {
                result = this.val1 + 'px';
            } else if (this.count == 2) {
                result = this.val1 + 'px ' + this.val2 + 'px';
            }else if (this.count == 4) {
                result = this.val1 + 'px ' + this.val2 + 'px ' +this.val3 + 'px ' + this.val4 + 'px';
            }

            this.$emit('update:modelValue', result);
            return result.trim();
        }
    },
    methods: {}
}
</script>

<style scoped>
#border-radios-input {

}

.cir-btn {
    background: transparent;
    font-size: 17px;
    border: 1px solid gray;
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding-top: 3px;

    &.active {
        background: darkred;
    }
}
</style>