Vuetify Custom Input Example

temper.js

import VTextField from 'vuetify/lib/components/VTextField/VTextField';
import VRating from 'vuetify/lib/components/VRating/VRating';
import { convertToUnit } from 'vuetify/lib/util/helpers';

export default {
    name: 'input-temper',

    extends: VTextField,

    props: {
        height: {
            type: [Number, String],
            default: 24,
        },
    },

    methods: {
        genDefaultSlot () {
            const input = this.$createElement(VRating, {
                props: {
                    length: 10,
                    size: this.height,
                    color: 'primary',
                    backgroundColor: 'grey lighten-1',
                    dense: true,
                    hover: true,
                    fullIcon: 'fas fa-fire',
                    emptyIcon: 'fas fa-fire',
                },
                on: {
                    input: (value) => {
                        this.internalValue = value;
                        this.$emit('change', value);
                    },
                },
            });

            return [this.genLabel(), input];
        },

        genInputSlot: function genInputSlot () {
            return this.$createElement('div', this.setBackgroundColor(this.backgroundColor, {
                staticClass: 'v-input__slot',
                style: { height: convertToUnit(this.height + 12) },
                directives: this.directivesInput,
                ref: 'input-slot',
            }), [this.genDefaultSlot()]);
        },

        onClick () {
            this.$emit('click');
        },
    },

    computed: {
        isLabelActive () {
            return true;
        },
    },
};