vue el-tooptip el-select el-popover等的样式修改问题 el-tree修改气泡窗问题

elizebeth6

于 2021-09-24 15:19:12 发布

阅读量683

点赞数

分类专栏： vue 前端文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/elizebeth6/article/details/120455583

版权

本文讨论了在Vue.js应用中遇到的el-tooltip、el-select、el-popover等组件样式修改的问题，由于它们存在于全局HTML中，影响范围广泛。解决方法是在APP.vue中为这些组件添加自定义class，避免全局影响。同时，文章提到了el-tree组件中气泡窗口和自定义按钮的样式调整，提供了部分代码示例，鼓励读者根据实际情况进行调整。

摘要由CSDN通过智能技术生成

这些样式都有一个共同点就是他们都在vue的实例对象之外，只存在与最根部的html中，也就是说我们设置的时候要去APP.vue中进行设置，这样就会有一个问题，会影响全局的同类型组件

解决办法就是给他们加一个自定义的class类名 popper-class="autopop"
这里就不贴具体代码了，大家可以具体情况具体分析

下面说一下el-tree
还是修改样式的问题，修改的就是气泡窗以及自定义的按钮

代码如下

<el-tree :highlight-current="true" :data="chapterData" class="tree" node-key="id"
:default-expanded-keys="expandedChapter" :props="defaultProps"  @node-click="node_Click">
<template slot-scope="{node}">
		<el-tooltip :content="node.label" placement="right" :open-delay="0.8" :visible-arrow="false"  popper-class="atooltip">
				<span>{
   {
   node.label}}</span>
		</el-tooltip>
</template>
</el-tree>


defaultProps: {
   
        children: "children",
        label: "name",
        key: "id&