support Tooltip
support Tooltip
This commit is contained in:
梁灏
parent
30510c3d9e
commit
d6f644e1d9
8 changed files with 44 additions and 88 deletions
|
|
@ -27,4 +27,5 @@ class 改为了 className
|
|||
### Circle
|
||||
改名为 iCircle
|
||||
### Tabs
|
||||
废弃 activeKey，改用 value，使用 v-model，key 更名为 name
|
||||
废弃 activeKey，改用 value，使用 v-model，key 更名为 name
|
||||
### popper.js 将 prop: visible 移至 data 里
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
- [x] Collapse
|
||||
- [x] Timeline
|
||||
- [x] Tag
|
||||
- [ ] Tooltip
|
||||
- [x] Tooltip
|
||||
- [ ] Poptip
|
||||
- [x] Carousel
|
||||
- [x] Tree
|
||||
|
|
|
|||
|
|
@ -18,20 +18,28 @@ export default {
|
|||
offset: {
|
||||
default: 0
|
||||
},
|
||||
value: Boolean,
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transition: String,
|
||||
options: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
gpuAcceleration: false,
|
||||
boundariesElement: 'body'
|
||||
// boundariesElement: 'body' // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证
|
||||
};
|
||||
}
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
// visible: {
|
||||
// type: Boolean,
|
||||
// default: false
|
||||
// }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: this.value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -59,8 +67,8 @@ export default {
|
|||
}
|
||||
|
||||
const options = this.options;
|
||||
const popper = this.popper || this.$els.popper;
|
||||
const reference = this.reference || this.$els.reference;
|
||||
const popper = this.popper || this.$refs.popper;
|
||||
const reference = this.reference || this.$refs.reference;
|
||||
|
||||
if (!popper || !reference) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<template>
|
||||
<div :class="[prefixCls]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
|
||||
<div :class="[prefixCls + '-rel']" v-el:reference>
|
||||
<div :class="[prefixCls + '-rel']" ref="reference">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && (visible || always)">
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<div :class="[prefixCls + '-arrow']"></div>
|
||||
<div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
|
||||
<transition name="fade">
|
||||
<div :class="[prefixCls + '-popper']" ref="popper" v-show="!disabled && (visible || always)">
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<div :class="[prefixCls + '-arrow']"></div>
|
||||
<div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import InputNumber from './components/input-number';
|
|||
import Progress from './components/progress';
|
||||
import Radio from './components/radio';
|
||||
import Rate from './components/rate';
|
||||
// import Slider from './components/slider';
|
||||
import Slider from './components/slider';
|
||||
// import Spin from './components/spin';
|
||||
import Steps from './components/steps';
|
||||
import Switch from './components/switch';
|
||||
|
|
@ -38,7 +38,7 @@ import Tabs from './components/tabs';
|
|||
import Tag from './components/tag';
|
||||
import Timeline from './components/timeline';
|
||||
// import TimePicker from './components/time-picker';
|
||||
// import Tooltip from './components/tooltip';
|
||||
import Tooltip from './components/tooltip';
|
||||
// import Transfer from './components/transfer';
|
||||
import Tree from './components/tree';
|
||||
import Upload from './components/upload';
|
||||
|
|
@ -94,7 +94,7 @@ const iview = {
|
|||
Rate,
|
||||
Row,
|
||||
// iSelect: Select,
|
||||
// Slider,
|
||||
Slider,
|
||||
// Spin,
|
||||
Step: Steps.Step,
|
||||
Steps,
|
||||
|
|
@ -106,7 +106,7 @@ const iview = {
|
|||
Timeline,
|
||||
TimelineItem: Timeline.Item,
|
||||
// TimePicker,
|
||||
// Tooltip,
|
||||
Tooltip,
|
||||
// Transfer,
|
||||
Tree,
|
||||
Upload
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/rate">Rate</router-link></li>
|
||||
<li><router-link to="/circle">Circle</router-link></li>
|
||||
<li><router-link to="/tabs">Tabs</router-link></li>
|
||||
<li><router-link to="/tooltip">Tooltip</router-link></li>
|
||||
<li><router-link to="/slider">Slider</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -104,6 +104,14 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/tabs',
|
||||
component: require('./routers/tabs.vue')
|
||||
},
|
||||
{
|
||||
path: '/tooltip',
|
||||
component: require('./routers/tooltip.vue')
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
component: require('./routers/slider.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,75 +1,10 @@
|
|||
<style scoped>
|
||||
.top,.bottom{
|
||||
text-align: center;
|
||||
}
|
||||
.center{
|
||||
width: 300px;
|
||||
margin: 10px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.center-left{
|
||||
float: left;
|
||||
}
|
||||
.center-right{
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="top">
|
||||
<Tooltip content="Top Left 文字提示" placement="top-start" @on-popper-hide="hide">
|
||||
<i-button>上左</i-button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Top Center 文字提示" placement="top">
|
||||
<i-button>上边</i-button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Top Right 文字提示" placement="top-end">
|
||||
<i-button>上右</i-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="center-left">
|
||||
<Tooltip content="Left Top 文字提示" placement="left-start">
|
||||
<i-button>左上</i-button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Left Center 文字提示" placement="left">
|
||||
<i-button>左边</i-button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Left Bottom 文字提示" placement="left-end">
|
||||
<i-button>左下</i-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="center-right">
|
||||
<Tooltip content="Right Top 文字提示" placement="right-start">
|
||||
<i-button>右上</i-button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Right Center 文字提示" placement="right">
|
||||
<i-button>右边</i-button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Right Bottom 文字提示" placement="right-end">
|
||||
<i-button>右下</i-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<Tooltip content="Bottom Left 文字提示" placement="bottom-start">
|
||||
<i-button>下左</i-button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Bottom Center 文字提示" placement="bottom">
|
||||
<i-button>下边</i-button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Bottom Right 文字提示" placement="bottom-end">
|
||||
<i-button>下右</i-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Tooltip placement="top" content="Tooltip 文字提示" :delay="1000">
|
||||
<Button @click="disabled = true">延时1秒显示</Button>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<script>
|
||||
import { Tooltip, iButton, Message } from 'iview';
|
||||
export default {
|
||||
components: { Tooltip, iButton },
|
||||
methods: {
|
||||
hide () {
|
||||
Message.info('hide')
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue