drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

optimize Poptip style

Browse source 
optimize Poptip style
This commit is contained in:
梁灏 2016-11-08 20:32:20 +08:00
parent 86cf21fd13
commit 3fa1c31eda
6 changed files with 42 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/styles/iview.all.css
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css
View file

File diff suppressed because one or more lines are too long

6
src/components/poptip/poptip.vue
View file

@ -26,9 +26,9 @@
</div>
</div>
<div :class="[prefixCls + '-inner']" v-if="!confirm">
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div>
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-body-content']"><slot name="content">{{ content }}</slot></div>
<div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
</div>
</div>
</div>
@ -163,7 +163,7 @@
},
ready () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != '';
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
}
}
}

32
src/styles/components/poptip.less
View file

@ -17,11 +17,24 @@
&-title {
margin: 0;
padding: 0 16px;
height: 32px;
line-height: 32px;
border-bottom: 1px solid @border-color-split;
color: #666;
padding: 8px 16px;
position: relative;
&:after{
content: '';
display: block;
height: 1px;
position: absolute;
left: 8px;
right: 8px;
bottom: 0;
background-color: @border-color-split;
}
&-inner{
color: @title-color;
font-size: @font-size-base;
}
}
&-body{
@ -29,6 +42,10 @@
&-content{
overflow: auto;
&-inner{
color: @text-color;
}
}
}
@ -36,7 +53,7 @@
width: 100%;
background-color: #fff;
background-clip: padding-box;
border: 1px solid @border-color-split;
//border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
white-space: nowrap;
@ -108,8 +125,9 @@
&-confirm &-body{
padding: 16px 16px 8px;
.ivu-icon{
font-size: 16px;
color: @warning-color;
line-height: 17px;
line-height: 18px;
position: absolute;
}

2
src/styles/themes/default/custom.less
View file

@ -38,7 +38,7 @@
@tooltip-bg : rgba(70, 76, 91, .9);
// Shadow
@shadow-color : rgba(100, 100, 100, .2);
@shadow-color : rgba(0, 0, 0, .2);
@shadow-base : @shadow-down;
@shadow-card : 0 1px 1px 0 rgba(0,0,0,.1);
@shadow-up : 0 -1px 6px @shadow-color;

19
test/routers/poptip.vue
View file

@ -55,14 +55,17 @@
当鼠标经过这段文字时，会显示一个气泡框
</Tooltip>
<div class="tooltip_out">
<!--<Poptip class="tip" placement="left-start" trigger="hover">-->
<!--<div class="tip-inner">-->
<!--<Icon type="information"></Icon>-->
<!--</div>-->
<!--<div class="tip-content" slot="content">-->
<!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->
<!--</div>-->
<!--</Poptip>-->
<Poptip trigger="hover" title="提示标题" content="提示内容">
<i-button>hover 激活</i-button>
</Poptip>
<Poptip content="提示内容" title="tip">
<i-button>click 激活</i-button>
</Poptip>
<Poptip content="提示内容">
<div slot="title"><i>自定义标题</i></div>
<i-button>click 激活</i-button>
</Poptip>
<Tooltip class="tip" placement="left-start" trigger="hover">
<div class="tip-inner">
<Icon type="information"></Icon>