1

Typescript在VuewithFlatpickr和Veevalidateas 包中。

错误线：this.fp = new Flatpickr(this.$refs.field, {})

错误：'元素 | 类型的参数 元素[] | Vue | Vue[]' 不可分配给“字符串”类型的参数。类型“元素”不可分配给类型“字符串”。

<template>
  <div>
    <label :for="name">{{ name }}</label>
     <input
      v-validate="validation"
      :name="name"
      :id="name"
      v-model="name"
      :placeholder="name"
      ref="field"
      type="text"
      value="value"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Flatpickr from 'flatpickr'

@Component({})
export default class BaseDate extends Vue {
  @Prop()
  name!: string

  @Prop({ default: '' })
  validation!: string

  @Prop()
  model!: string

  @Prop()
  validator!: any

  fp: any

  mounted (): void {
    this.$validator = this.validator
    this.fp = new Flatpickr(this.$refs.field, {})
  }
}
</script>
4

2 回答 2

3

这是对我有效的最终解决方案：

this.fp = new (Flatpickr as any)(this.$refs.field as Element, {})
于 2019-04-05T06:59:38.390 回答
1

只需将参数转换为Element（或Node）：

this.fp = new Flatpickr(this.$refs.field as Element, {})

Flatpickr构造函数期望参数类型为Node | Node[] | string。TypeScript 无法将$refs类型转换为预期类型；

export interface FlatpickrFn {
  (selector: Node, config?: Options): Instance;
  (selector: ArrayLike<Node>, config?: Options): Instance[];
  (selector: string, config?: Options): Instance | Instance[];
  defaultConfig: Partial<ParsedOptions>;
  l10ns: { [k in LocaleKey]?: CustomLocale } & { default: Locale };
  localize: (l10n: CustomLocale) => void;
  setDefaults: (config: Options) => void;
  parseDate: (
    date: DateOption,
    format?: string,
    timeless?: boolean
  ) => Date | undefined;
  formatDate: (date: Date, format: string) => string;
  compareDates: (date1: Date, date2: Date, timeless?: boolean) => number;
}
于 2019-04-04T18:09:42.490 回答