javascript - Extend Vuetify components in TypeScript - Stack Overflow

admin管理员组

文章数量:1402975

I'm trying to extend a vuetify ponent with some default props set in TypeScript. In JavaScript it worked perfectly but I can't figure out how to extend the ponents in TS. Here is the code for the Component in JS:

import { VTextField } from 'vuetify/lib'

export default {
  name: "my-text-field",
  extends: VTextField,
  props: {
      "hide-details": {
        type: Boolean,
        default: true
      },
      outlined: {
        type: Boolean,
        default: true
      },
      dense: {
        type: Boolean,
        default: true
      },
      "single-line": {
        type: Boolean,
        default: true
      },
      color: {
        type: String,
        default: "secondary"
      }
  }
}

I'm trying to extend a vuetify ponent with some default props set in TypeScript. In JavaScript it worked perfectly but I can't figure out how to extend the ponents in TS. Here is the code for the Component in JS:

import { VTextField } from 'vuetify/lib'

export default {
  name: "my-text-field",
  extends: VTextField,
  props: {
      "hide-details": {
        type: Boolean,
        default: true
      },
      outlined: {
        type: Boolean,
        default: true
      },
      dense: {
        type: Boolean,
        default: true
      },
      "single-line": {
        type: Boolean,
        default: true
      },
      color: {
        type: String,
        default: "secondary"
      }
  }
}

• javascript
• typescript
• vue.js
• vuetify.js

Share Improve this question Follow asked Apr 28, 2020 at 9:33 Y. RamozY. Ramoz 6711 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The proper way to do that add in the tsconfig.json

// tsconfig.json

{
  "pilerOptions": {
    "types": ["vuetify"]
  }
}

Now just extend the needful ponent.

<script lang="ts">
import { VTextField } from 'vuetify/lib'

import { Component,  Prop } from 'vue-property-decorator'

@Component({})
export default class TextField extends VTextField {
    @Prop({default: 'auto'}) private hideDetails!: boolean|string;
    @Prop({default: true}) private outlined!: boolean;
    @Prop({default: true}) private dense!: boolean
    @Prop({default: true}) private singleLine!: boolean;
    @Prop({default: 'secondary'}) private color!: string
}
</script>

I've found a solution by peeking into the VTextArea ponent of Vuetify. Here's my solution:

import Vue from 'vue'
//@ts-ignore
import VTextField from 'vuetify/lib/ponents/VTextField/VTextField'

// Create Base Mixins and Define Custom Properties
const base = Vue.extend({ mixins: [VTextField] })
export default base.extend({
  name: "my-text-field",
  props: {
      hideDetails: {
        type: Boolean,
        default: true
      },
      outlined: {
        type: Boolean,
        default: true
      },
      dense: {
        type: Boolean,
        default: true
      },
      singleLine: {
        type: Boolean,
        default: true
      },
      color: {
        type: String,
        default: "secondary"
      }
  }
})

hope this works for you:

import {Vue, Component, Prop} from 'vue-property-decorator';
import { VIcon, VTextField} from 'vuetify/lib'


interface Item {
    text: string;
    plete: boolean;
}

@Component({
    name: 'TodoItem',
    ponents: {
        'v-icon': VIcon,
         'v-text-field': VTextField
    }
})
export default class TodoItem extends Vue {

    @Prop(Object) public item!: Item;
    @Prop(Number) public index!: number;
    @Prop(Number) public editingId!: number;

    public editingContent = 'nihao';

    public edit() {
        this.$emit('on-edit', this.index)
    }

    public save() {
        alert('k');
    }


    protected render() {
        return (
            <li>
                {this.editingId === this.index ?
                    (<div>
                        {/* tslint:disable-next-line:max-line-length */}
                        <v-text-field v-model={this.editingContent} append-icon={'mdi-close'} placeholder={this.item.text} on-click:append={this.save}/>
                        {/*<v-text-field><v-icon color={'red'} slot={'append'}>mdi-close</v-icon></v-text-field>*/}
                    </div>)
                    : (<div>
                            <span>{this.item.text}</span>
                            <v-icon x-small={true} nativeOn-click={this.edit}>mdi-pencil</v-icon>
                        </div>)
                }
            </li>
        );
    }
}

本文标签： javascriptExtend Vuetify components in TypeScriptStack Overflow