iView常用笔记

1. 使用Tabs标签页时多个Tab-pane标签之前高度互相影响

在Tab-pane标签下多加一个div标签

之后高度互不影响，效果：

2.使用Tooltip组件修改弹出框背景颜色

使用slot嵌入内容，并将内容的样式覆盖外层div样式

  
            
            

                {{title}}
                
{{contentTemplate}}
                

            
  

// 内容背景样式
.tips-hover-slot{
	
    margin: -8px -12px;
    border: 1px solid #FFCA75;
    border-color: #FFCA75;
    background-color: #FFF7EB;
    color:#888888;
    // 自动换行
    // white-space: normal;
}
// 小三角背景图标样式
.ivu-tooltip-popper[x-placement^=top] .triangle-icon,
.ivu-tooltip-popper[x-placement^=bottom] .triangle-icon,
.ivu-tooltip-popper[x-placement^=left] .triangle-icon,
.ivu-tooltip-popper[x-placement^=right] .triangle-icon,
.ivu-tooltip-popper[x-placement^=right-start] .triangle-icon,
.ivu-tooltip-popper[x-placement^=right-end] .triangle-icon,
.ivu-tooltip-popper[x-placement^=top-start] .triangle-icon,
.ivu-tooltip-popper[x-placement^=top-end] .triangle-icon,
.ivu-tooltip-popper[x-placement^=bottom-start] .triangle-icon,
.ivu-tooltip-popper[x-placement^=bottom-end] .triangle-icon,
.ivu-tooltip-popper[x-placement^=left-start] .triangle-icon,
.ivu-tooltip-popper[x-placement^=left-end] .triangle-icon
{
    border-top-color: #FFCA75;
    border-bottom-color:  #FFCA75;
    // border-color: #FFCA75;
}

3.强制重新渲染

this.$forceUpdate()

4.修改使用了transfer属性的组件样式

因为使用了transfer属性的组件放置在了最外层标签body下，所以修改样式需要在最外层使用深度选择器deep修改（在flex布局下有效，其他没有测试）

<style lang="less" scoped>
&/deep/.dropDownBottom{
    border-top: 1.5px solid rgb(139, 132, 132);
}

5.两个模态框之间影响，闪一下的bug

1.解决方法1：html标签创建一个模态框，js弹出一个模态框
2.解决方法2：this.$Modal弹出的组件中使用html标签创建一个模态框，使用prop控制模态框的展示隐藏