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

本文探讨了在项目中同时使用Vant和Element-TS时可能遇到的问题及其解决方案。通过分别介绍按需引入和全局导入的方法,避免组件冲突,特别是对于Notify等组件的使用。在按需引入Vant时,需要自定义types并在@types/vant.d.ts定义类型,同时在plugins/vant.ts按需引入组件。而在src/main.ts中进行配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于 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 {}
  export class Circle extends VanComponent {}
  export class Col extends VanComponent {}
  export class Collapse extends VanComponent {}
  export class CollapseItem extends VanComponent {}
  export class ContactCard extends VanComponent {}
  export class ContactEdit extends VanComponent {}
  export class ContactList extends VanComponent {}
  export class CouponCell extends VanComponent {}
  export class CouponList extends VanComponent {}
  export class Divider extends VanComponent {}
  export class DropdownMenu extends VanComponent {}
  export class Empty extends VanComponent {}
  export class Grid extends VanComponent {}
  export class GridItem extends VanComponent {}
  export class GoodsAction extends VanComponent {}
  export class GoodsActionButton extends VanComponent {}
  export class GoodsActionIcon extends VanComponent {}
  export class Icon extends VanComponent {}
  export class Image extends VanComponent {}
  export class IndexAnchor extends VanComponent {}
  export class IndexBar extends VanComponent {}
  export class Info extends VanComponent {}
  export class Loading extends VanComponent {}
  export class NavBar extends VanComponent {}
  export class NoticeBar extends VanComponent {}
  export class NumberKeyboard extends VanComponent {}
  export class Overlay extends VanComponent {}
  export class Pagination extends VanComponent {}
  export class Panel extends VanComponent {}
  export class PasswordInput extends VanComponent {}
  export class Popup extends VanComponent {}
  export class Progress extends VanComponent {}
  export class PullRefresh extends VanComponent {}
  export class Radio extends VanComponent {}
  export class RadioGroup extends VanComponent {}
  export class Rate extends VanComponent {}
  export class Row extends VanComponent {}
  export class Search extends VanComponent {}
  export class ShareSheet extends VanComponent {}
  export class Sidebar extends VanComponent {}
  export class SidebarItem extends VanComponent {}
  export class Skeleton extends VanComponent {}
  export class Slider extends VanComponent {}
  export class Step extends VanComponent {}
  export class Stepper extends VanComponent {}
  export class Steps extends VanComponent {}
  export class Sticky extends VanComponent {}
  export class SubmitBar extends VanComponent {}
  export class SwipeItem extends VanComponent {}
  export class Switch extends VanComponent {}
  export class SwitchCell extends VanComponent {}
  export class Tab extends VanComponent {}
  export class Tabbar extends VanComponent {}
  export class TabbarItem extends VanComponent {}
  export class Tag extends VanComponent {}
  export class TreeSelect extends VanComponent {}
  export {
    // AddressEdit,
    // Area,
    // Calendar,
    // Checkbox,
    // CheckboxGroup,
    // CountDown,
    // DatetimePicker,
    Dialog,
    // DropdownItem,
    // Form,
    Field,
    // ImagePreview,
    // Lazyload,
    List,
    // Locale,
    // Picker,
    // Sku,
    // Swipe,
    SwipeCell,
    Tabs,
    Toast,
    // Uploader,
  };
}

定义plugins/vant.ts 按需引入(需要啥引入即可)

import Vue from 'vue';
import {
  Dialog,
  Toast,
  NavBar,
  Button,
  Cell,
  CellGroup,
  Popup,
  Field,
  PullRefresh,
  SwipeCell,
  Collapse,
  CollapseItem,
  Step,
  Steps,
  Tab,
  Tabs,
  List,
  Search,
} from 'vant/lib';
import 'vant/lib/index.css';

Vue.use(Dialog);
Vue.use(Toast);
Vue.use(NavBar);
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Popup);
Vue.use(Field);
Vue.use(PullRefresh);
Vue.use(SwipeCell);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Step);
Vue.use(Steps);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(List);
Vue.use(Search);

src/main.ts 中

import '@/plugins/vant';
  • 情形二: 按需引入 element。
    src/main.ts
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
// 按需引入你用到的组件, 而不是安装整个组件库
import ElButton from 'element-ui/lib/button';
import 'element-ui/lib/theme-chalk/button.css';
Vue.component('el-button', ElButton);
// 并且在tsconfig.json中添加配置规则
{
  "compilerOptions": {
    "paths": {
      // 指向正确的声明映射
      "element-ui/lib/button": ["node_modules/element-ui/types/button"]
    }
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值