VUE項目中同時引入Antd 和ElementUI 組件重名樣式異常解決方案

公司Vue項目中根據需求同時引入了Antd 和 ElementUI 導致部分地方組件使用Antd的$confirm 和$message組件時，由於elementUI中也存在同名的組件，導致頁面樣式異常。

 

解決方案1：給antd的組件改名

Vue.use(Antd)
Vue.prototype.$antdconfirm = Vue.prototype.$confirm

使用的時候：

this.$antdconfirm({....

解決方案2：按需引用

將你需要使用elementUi 的組件提前抽取到一個單獨js文件中去

這里是抽取的elementUI的ColorPicker組件

import{
    ColorPicker
} from 'element-ui'
const element = {
    install:function (Vue) {
        Vue.use(ColorPicker)
    }
}
export default elementColorPicker

在main.js中引入

import elementui from './utils/elementColorPicker'

Vue.use(elementui)

使用confirm的時候正常使用即可

this.$confirm({....