【error】项目中同时引入Antd 和ElementUI 组件样式异常

最新推荐文章于 2024-11-11 23:32:58 发布

Joise.

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量1.8k

点赞数

分类专栏： error vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Joise_/article/details/125602648

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

error

5 篇文章 0 订阅

订阅专栏

VUE项目中同时引入Antd 和ElementUI 组件样式异常

同时引入了Antd 和 ElementUI 导致部分地方组件使用Antd的$confirm和 $message组件时，由于elementUI中也存在同名的组件，导致页面样式异常。

采用的是全局引用，由于同名所以在main.js中修改antd的组件名称

给antd的组件改名

Vue.use(ElementUI);
Vue.use(Antd)
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$antdconfirm = Vue.prototype.$confirm

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Joise.

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件（在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件）

王佳斌

07-07

3011

本文将从 0 - 1 实现一个通过纯方式，调用自定义组件的完整过程，您一路复制粘贴，便可像知名组件库的模态框、消息提示框的使用方法调用，常见于登录失效、或未登录时，通过一行弹出登录框需求。在文件夹下，新建文件，您直接一键复制全部代码。vue中如何用纯js调用组件，vue通过js里调用定义弹框，模仿组件库的this.$message，利用vue2实现一个可以用js调用的组件，Vue 使用js来调用一个组件，在如果仅组件页面中调用无法满足您，而您是想在纯文件（*.j

VUE项目中同时引入Antd 和ElementUI 组件样式异常解决方案

weixin_48181168的博客

12-13

9503

根据需求同时引入了Antd 和 ElementUI 导致部分地方组件使用Antd的$confirm 和$message组件时，由于elementUI中也存在同名的组件，导致页面样式异常。直接引用element,组件显示会报错. 给antd的组件改名 Vue.use(Antd) Vue.prototype.$antdconfirm = Vue.prototype.$confirm 使用的时候： this.$antdconfirm({.... 修改之后,显示的效果: ...

参与评论您还未登录，请先登录后发表或查看评论

【解决ElementUI 和Antd的对话弹窗样式冲突问题】

丁东的博客

05-31

1584

项目中使用了Antd 和element-UI两种UI库，Antd是全局样式，element-ui则是按需引入，在使用element-ui的页面处点击退出，弹出的对话框就会样式失效。组件的名字，自定义一个组件名（在main.js中修改）在使用时则使用重命名的即可。

新建一个vue-cli@3 项目，并使用And Design Vue和Element组件库

小钻风的博客

07-28

700

1、要创建Vue3项目，首先自己电脑中要安装配置好node,cnpm,vue； 2、vue create 项目名称 3、项目新建成功以后，使用命令npm run serve运行项目 4、一般使用vue都会配合ant design vue或者element组件库来使用，网址分别为Ant Design Vue和Element 5、若使用ant design vue，要先npm i --save ant-design-vue， 6、使用element要先vue add element ...

vue2中同时使用element-ui和Antd样式起冲突confirm或message无法使用的解决方法

h110001的博客

06-13

453

只需要在ui里将confirm和message另外起个名字就行在页面使用。

手写VUE后台管理系统4 - 整合UI框架AntDesignVue

死牛胖子的技术随笔

03-24

1748

从零开始手写VUE后台管理系统，整合UI框架ant-design-vue

jsp中使用vuejs+element-ui+vuejs第三方组件

02-17

2. **引入样式和脚本**: 在JSP页面中，引入Element-UI的CSS和JS文件。 ```html <script src="node_modules/element-ui/lib/index.js"></script> ``` 3. **使用Element-UI组件**: 例如，我们可以使用`<el-button>`...

react项目引入antd组件没有样式的问题

TarkuNi的博客

11-19

2740

明显是antd的样式文件没有引入进来，有两种方式解决： 1.在项目最外层组件引入antd样式包如在App.css中最上面加 @import '~antd/dist/antd.css'; 2.webpack配置引入 module.exports = { entry: { index: path.join(srcPath, 'index.js'), }, module: { rules: [ // babel-load

jeecgboot前端使用elementui

zhf_123666的博客

12-27

2039

//================= import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); //=============== /** init domain config */ import './config' import Vue from 'vue' import App from './App.vue' import Stora

关于react项目引入antd样式的问题

蓝枫秋千的踩坑记录

12-03

2102

创建react项目安装antd依赖前两步都没有什么问题,不多说了这个时候使用antd的组件是这样使用的 import Button from 'antd/es/button'; import './App.css'; 在App.css的文件中还要导入antd/dist/antd.css 用起来特别的麻烦如何按需导入并且样式自动导入呢? 安装customize-cra $ y...

关于vue ts项目同时引入element-ui和ant-design，ts报错不能编译的解决方法。

热门推荐

bob422720735的博客

07-06

1万+

vue ts版本同时引入ant和element不能打包。 Subsequent property declarations must have the same type. Property ‘$confirm’ must be of type ‘(modalOptios: ModalOptions) => ModalConfirm’, but here has type ‘ElMessageBoxShortcutMethod’. Subsequent property declarations m

09-react 使用antd,修改主题，配置别名

yunbabac的博客

11-16

861

正常使用antd 安装 yarn add antd 引入样式我们需要在index.js引入全局css样式 import "antd/dist/antd.css" antd本身就是按需引入使用craco修改主题安装 yarn add @craco/craco 修改package.json文件创建craco.config.js文件在根目录下创建craco.config.js文件用于修改默认配置 const CracoLessPlugin = r...

Element组件被Antd覆盖解决办法

童童童彤

09-24

2232

在一个项目里引了两个组件库，第一个引入的组件库有的时候就会被覆盖掉，导致不能使用，这是因为后引入的组件库会将前一个覆盖掉（组件名称重复的情况下），所以样式和使用方法都会出现问题，导致第一个引入的组件库部分不能使用，在一个项目里建议是只引入一个组件库。当然啦，如果引入两个组件库也不是没有办法的，可以在src下面的main.js文件中进行更改来实现两个组件在一个项目里都可以使用。就比如说Vue.prototype.$message和Vue.prototype.$confirmElement和Antd都是相同的

element+vue小技巧和报错解决(持续更新~建议收藏)

请叫我欧皇！的博客

04-24

2999

2.在，添加prop，prop的值是formInline:{time:“”}的time属性。清空1.给,添加ref绑定dom。不再使用slot-scope="scope"来获取当前行数据。后端需要什么格式你就在。4.一键清空表单数据。

antd vue 与 element ui导入实现

weixin_41424721的博客

09-10

1087

element ui vue文件 <template> <div> <el-dialog title="导入数据" :visible.sync="drVisible" width="350px" :modal-append-to-body="false" > <el-upload class="avatar-uploader"

Vue开发实战十一:Vue3+TS+Antd实现vben项目的增删改查

博主逸尘

12-03

3446

文章目录1.效果图预览2.列表的实现3.数据新增、修改及附件上传的实现4.详情界面的实现说明：之前用Vue2+ElementUI|iView用的那是相当的爽，写法和之前做移动的用的Ionic很是类似，最近新开了一个项目，用的Vue3+TS+Antd那真是一把辛酸一把泪，完全摸索+找规律+瞎蒙，开发了一个模块之后终于有所得，以此篇文章记录。 1.效果图预览老规矩先上效果图列表新增附件上传修改详情 2.列表的实现 index.vue页面中 template布局如下，BasicTable列

antd 与 element-ui如何按需引入，以及二者的不同

胡聊前端的博客

12-19

5653

antd与element-ui作为两个用途广泛的ui框架，均提供了按需引入，毕竟全量引入会导致包体积太大。尤其是当我们只想使用其中几个组件的时候，按需引入就变得更有必要了。我特意数了一下，二者均提供了共计63个组件，这是不是有什么特殊意义… 当然这么多组件更进一步证明了按需引入的必要性。其实官方均已经提供了按需引入的方式： antd # 安装 babel-plugin-import $ npm install babel-plugin-import -D # 在babel.config.js，或者.b

第四十二章 Vue中使用mutations修改Vuex仓库数据