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> </div>
<div :class="[prefixCls + '-inner']" v-if="!confirm"> <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']">
<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> </div>
</div> </div>
@ -163,7 +163,7 @@
}, },
ready () { ready () {
if (!this.confirm) { 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 { &-title {
margin: 0; margin: 0;
padding: 0 16px; padding: 8px 16px;
height: 32px; position: relative;
line-height: 32px;
border-bottom: 1px solid @border-color-split; &:after{
color: #666; 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{ &-body{
@ -29,6 +42,10 @@
&-content{ &-content{
overflow: auto; overflow: auto;
&-inner{
color: @text-color;
}
} }
} }
@ -36,7 +53,7 @@
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid @border-color-split; //border: 1px solid @border-color-split;
border-radius: @border-radius-small; border-radius: @border-radius-small;
box-shadow: @shadow-base; box-shadow: @shadow-base;
white-space: nowrap; white-space: nowrap;
@ -108,8 +125,9 @@
&-confirm &-body{ &-confirm &-body{
padding: 16px 16px 8px; padding: 16px 16px 8px;
.ivu-icon{ .ivu-icon{
font-size: 16px;
color: @warning-color; color: @warning-color;
line-height: 17px; line-height: 18px;
position: absolute; position: absolute;
} }

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

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

19
test/routers/poptip.vue
View file

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