iView常用笔记

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

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

 <Tabs type="card">
                <TabPane :label="faileds" name="key1">
                    <div style="height:338px; overflow:auto;">
                       
                    </div>
 				</TabPane>
 </Tabs>

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

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

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

  <Tooltip  :transfer="true" placement="top" :max-width=maxwidth>
            <Icon type="ios-alert" size="16" color="#FF9902" class="icon-warn hover-icon"></Icon>
            <div slot="content" class="tips-hover-slot">
                <span style="color:#888888;" v-if="hasTitle">{{title}}</span>
                <span style="color:#888888;" v-if="hasContent"></br>{{contentTemplate}}</span>
                <div class="triangle-icon  ivu-tooltip-arrow"></div>
            </div>
  </Tooltip>

// 内容背景样式
.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控制模态框的展示隐藏