src/controls/ControlPercentVector.vue

<template>
<div class="control-percent-vector">
    <div v-for="(dim, index) in dimsArr"
        :key="index">
        <label>{{dim}}</label>
        <ControlPercent
            :value="innerValueArr[index]"
            controls-position="right"
            :min="min == null ? -1e4 : +min"
            :max="max == null ? 1e4 : +max"
            :step="step == null ? 1 : +step"
            @change="(value) => onValueChange(index, value)"
        ></ControlPercent>
    </div>
</div>
</template>

<script>

import ControlPercent from './ControlPercent.vue';

export default {

    components: {
        ControlPercent
    },

    props: ['value', 'min', 'max', "step", 'dims'],

    data() {
        return {
            innerValueArr: this.value.split(',').map(val => val.trim())
        };
    },

    computed: {
        dimsArr() {
            return this.dims
                ? this.dims.split(',').map(dim => dim.trim())
                : this.value.split(',').map(_ => '');
        }
    },

    watch:  {
        value(newVal) {
            this.innerValueArr = this.value.split(',').map(val => val.trim())
        }
    },

    methods: {
        onValueChange(index, value) {
            this.innerValueArr[index] = value;
            this.$emit('change', this.innerValueArr.slice());
        }
    }
}
</script>

<style lang="scss">
.control-percent-vector {
    &>div {
        margin-top: 3px;
        font-size: 12px;
        font-weight: bold;

        &>label {
            text-transform: uppercase;
            margin-right: 5px;
        }
    }

    .control-percent, label {
        display: inline-block;
    }


    .control-percent .el-slider {
        width: 100px;
    }
}
</style>