vant-element-ts一起使用存在的问题

由于 vant-ui 与 element-ui 部分组件存在冲突,导致在 vue-typescript 中 出现错误:

Subsequent property declarations must have the same type. Property '$notify' must be of type 'ElNotification', but here has type 'Notify'.

方案: 一个全局导入, 一个按需导入, 避免冲突的组件同时使用,如Notify;全局导入的直接引入即可。

  • 情形一: 按需引入 vant。(适合引入vant 组件较少时)
    重定义types: 需要 在src/文件下 新建 @types 或 type文件,并在@types/vant.d.ts中定义type

vant.d.ts

/* eslint-disable max-classes-per-file */
declare module 'vant/lib' {
   
  import Vue from 'vue';
  import {
    VanComponent } from 'vant/types/component';
  import {
    Dialog } from 'vant/types/dialog';
  import {
    List } from 'vant/types/list';
  import {
    Toast } from 'vant/types/toast';
  import {
    Field } from 'vant/types/field';
  import {
    SwipeCell } from 'vant/types/swipe-cell';
  import {
    Tabs } from 'vant/types/tabs';
  // import {
   
  //   AddressEdit,
  //   Area,
  //   Calendar,
  //   Checkbox,
  //   CheckboxGroup,
  //   CountDown,
  //   DatetimePicker,
  //   Dialog,
  //   DropdownItem,
  //   Field,
  //   Form,
  //   ImagePreview,
  //   Lazyload,
  //   List,
  //   Locale,
  //   Picker,
  //   Sku,
  //   Swipe,
  //   SwipeCell,
  //   Tabs,
  //   Toast,
  //   Uploader,
  // } from "vant/types";

  export const version: string;
  export function install(vue: typeof Vue): void;

  export class ActionSheet extends VanComponent {
   }
  export class AddressList extends VanComponent {
   }
  export class Button extends VanComponent {
   }
  export class Card extends VanComponent {
   }
  export class Cell extends VanComponent {
   }
  export class CellGroup extends VanComponent 

你可能感兴趣的:(问题总结,vue)