vue引入组件,html页面引入vue组件

出现问题原因：

组件库引入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(('未整改禁止确认'));