后端问一个 element plus 和 vue3 的问题

[617953997]

第一个问题: 我使用 vue3 和 element plus 框架,使用 webpack 打包做的一个油猴脚本,发现将打包后的脚本挂在目标网站上之后,大概是由于目标网站也使用的是 element 且和我自己的脚本的版本不一致,导致了两个问题: 1.我自己脚本上的默认样式全变为了目标网站的样式,比如 element plus 默认的按钮是蓝色,脚本挂载到目标网站上之后油猴脚本的按钮样式变为了目标网站的按钮颜色.

2.目标网站的一些样式,比如输入框,时间选择器等等的样式都错乱了,无法正常使用.

所以我想问问如何在不换 element plus 的前提下解决这种问题, 按照 element plus 官网的方法 更换脚本的主题可行吗, 更换命名空间可行吗

第二个问题: 如果网站使用 vue 开发,在发布之后,用户能不能在前台拿到 vue 的实例对象. 网站使用路由的方式在不刷新页面的情况下更改 URL 地址,并且打开新功能页, 控制台中能不能实现类似的效果?

[otmself]

第一个问题感觉应该是样式类名相同，优先层级问题。思路应该没问题，但是具体实施我也没干过。

[FakerLeung]

换命名空间。在 scoped 的 style 标签中再引入你的 css 试试

[duan602728596]

https://element-plus.org/zh-CN/component/config-provider.html#config-provider-attributes
Config Provider Attributes 的 namespace

[sechi]

除非主动把 Vue 实例挂载到 window 对象上，不然是没办法在控制台拿到的吧。如果你只是想跳转路由，可以直接在控制台使用 window.history 来操作路由，这也是 vue-router history 模式的底层实现。

[wangtian2020]

<style scoped>

</style>

—— 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素
https://cn.vuejs.org/api/sfc-css-features.html

[liaoliaojun]

ElementPlus 是使用 BEM 命名规则，所以分为俩步 1.修改组件的命名：参考 3 楼。2. 修改对应的 css 文件中的命名：ElementPlus 中的$namespace 变量：位于 https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/mixins/config.scss#L1 重新编译指定版本的 scss 生成 css 文件。

[YANGTEKE]

第一个问题除了上面老哥说的可以看下 css 变量是不是污染了
第二个问题可以通过 html app 节点的__vue_app__访问 vue 实例

[SixGodHave7]

第一个问题，你打包设置一下替换你的 element class 类名，用什么 loader 你搜一下

[lilu0826]

换命令空间，el 改为 dl 即可