vue引入，两种组件库vant，vue-ydui变量冲突问题

出现问题原因：

     组件库引入Toast时，变量名互相冲突，导致页面发版后出现错误。

如何解决：

 解决变量冲突问题即可

1.首先在main.js引入vant

 import {Loading, Overlay, NavBar, Toast, Col, Row, Icon, Button} from 'vant'Vue.use(Loading);Vue.use(Overlay);Vue.use(NavBar);Vue.use(Toast);Vue.use(Button);Vue.use(Col);Vue.use(Row);Vue.use(Icon);

2.新建js文件，代码如下

//引入vue-yduiimport { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog'var Confirms=Confirmvar Alerts=Alertvar Toasts=Toastvar Notifys=Notifyvar Loadings=Loadingexport{Confirms,Alerts,Toasts,Notifys,Loadings}

3.在main.js引入js文件，结构赋值

//引入vue-yduiimport {Confirms,Alerts,Toasts,Notifys,Loadings} from './mainConflict'Vue.prototype.$dialogs = {confirm: Confirms,alert: Alerts,toast: Toasts,notify: Notifys,loading: Loadings};

4.页面中使用

//使用vue-yduithis.$dialogs.toast({mes: "签到成功！", timeout: 1000});
//使用vantthis.$toast(('未整改禁止确认'));

vue引入，两种组件库vant，vue-ydui变量冲突问题相关推荐

vant步进器传值_有赞开源的Vue 2.0 的 Mobile 组件库 Vant
有赞开源的Vue 2.0 的 Mobile 组件库 Vant 是一个轻量.可靠的移动端 Vue 组件库.包括了基础组件.Button 按钮.Cell 单元格.Icon 图标.Image 图片.Layo ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
Vue 移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 文档 | github地址 | 在线预览 2. vux vux 基于We ...
Vue移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档 | github地址 | 在线预览 image 2. vux ...
前端开发常用UI组件库（vue、react）
pc端 Ant Design Ant Design是基于 Ant Design 设计体系的 React UI 组件库 Element Element是基于 Vue 2 的UI组件库 Element+ ...
[vue] 你有自己用vue写过UI组件库吗？
[vue] 你有自己用vue写过UI组件库吗? {{item.title}}<dl v-if="item.list.length > 0"><dd v-fo ...
webpack 安装vue（两种代码模式compiler 和runtime）
使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...
小程序动端组件库Vant Weapp教程
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用两大参考神兽: 文档:https://youzan.g ...

vue引入，两种组件库vant，vue-ydui变量冲突问题

vue引入，两种组件库vant，vue-ydui变量冲突问题相关推荐

最新文章

热门文章