Расширение компонентов Vuetify в TypeScript - PullRequest
Новая
       4

Расширение компонентов Vuetify в TypeScript

1 голос
/ 28 апреля 2020

Я пытаюсь расширить компонент vuetify с помощью некоторых параметров по умолчанию, установленных в TypeScript. В JavaScript он работал отлично, но я не могу понять, как расширить компоненты в TS. Вот код для компонента в 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"
      }
  }
}

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

Я нашел решение, заглянув в компонент VTextArea в Vuetify. Вот мое решение: 

import Vue from 'vue'
//@ts-ignore
import VTextField from 'vuetify/lib/components/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"
      }
  }
})
0 голосов
/ 29 апреля 2020

надеюсь, что это работает для вас: 

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


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

@Component({
    name: 'TodoItem',
    components: {
        '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>
        );
    }
}
...