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

support Poptip & clickoutside

Browse source 
support Poptip & clickoutside
This commit is contained in:
梁灏 2017-03-03 15:19:21 +08:00
parent d6f644e1d9
commit 79288d43dd
11 changed files with 72 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore Normal file
View file

@ -0,0 +1 @@
src/directives

2
README.md
View file

@ -46,7 +46,7 @@
- [x] Timeline
- [x] Tag
- [x] Tooltip
- [ ] Poptip
- [x] Poptip
- [x] Carousel
- [x] Tree
- [ ] Menu

2
src/components/base/popper.js
View file

@ -40,7 +40,7 @@ export default {
data () {
return {
visible: this.value
}
};
},
watch: {
value: {

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

@ -6,33 +6,35 @@
v-clickoutside="handleClose">
<div
:class="[prefixCls + '-rel']"
v-el:reference
ref="reference"
@click="handleClick"
@mousedown="handleFocus(false)"
@mouseup="handleBlur(false)">
<slot></slot>
</div>
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
<div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']" v-if="confirm">
<div :class="[prefixCls + '-body']">
<i class="ivu-icon ivu-icon-help-circled"></i>
<div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
<transition name="fade">
<div :class="[prefixCls + '-popper']" :style="styles" ref="popper" v-show="visible">
<div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']" v-if="confirm">
<div :class="[prefixCls + '-body']">
<i class="ivu-icon ivu-icon-help-circled"></i>
<div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
</div>
<div :class="[prefixCls + '-footer']">
<i-button type="text" size="small" @click.native="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="small" @click.native="ok">{{ okText }}</i-button>
</div>
</div>
<div :class="[prefixCls + '-footer']">
<i-button type="text" size="small" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
</div>
</div>
<div :class="[prefixCls + '-inner']" v-if="!confirm">
<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"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
<div :class="[prefixCls + '-inner']" v-if="!confirm">
<div :class="[prefixCls + '-title']" v-if="showTitle" ref="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"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
@ -45,6 +47,7 @@
const prefixCls = 'ivu-poptip';
export default {
name: 'Poptip',
mixins: [Popper],
directives: { clickoutside },
components: { iButton },
@ -167,8 +170,8 @@
this.$emit('on-ok');
},
getInputChildren () {
const $input = this.$els.reference.querySelectorAll('input');
const $textarea = this.$els.reference.querySelectorAll('textarea');
const $input = this.$refs.reference.querySelectorAll('input');
const $textarea = this.$refs.reference.querySelectorAll('textarea');
let $children = null;
if ($input.length) {
@ -180,9 +183,10 @@
return $children;
}
},
compiled () {
mounted () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
// this.showTitle = this.$refs.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
this.showTitle = this.$slots.title !== undefined;
}
// if trigger and children is input or textarea,listen focus & blur event
if (this.trigger === 'focus') {

1
src/components/tooltip/tooltip.vue
View file

@ -20,6 +20,7 @@
const prefixCls = 'ivu-tooltip';
export default {
name: 'Tooltip',
mixins: [Popper],
props: {
placement: {

20
src/directives/clickoutside.js
View file

@ -1,19 +1,21 @@
export default {
bind () {
this.documentHandler = (e) => {
if (this.el.contains(e.target)) {
bind (el, binding, vnode) {
function documentHandler (e) {
if (el.contains(e.target)) {
return false;
}
if (this.expression) {
this.vm[this.expression]();
if (binding.expression) {
binding.value(e);
}
};
document.addEventListener('click', this.documentHandler);
}
el.__vueClickOutside__ = documentHandler;
document.addEventListener('click', documentHandler);
},
update () {
},
unbind () {
document.removeEventListener('click', this.documentHandler);
unbind (el, binding) {
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
}
};

4
src/index.js
View file

@ -25,7 +25,7 @@ import InputNumber from './components/input-number';
// import Modal from './components/modal';
// import Notice from './components/notice';
// import Page from './components/page';
// import Poptip from './components/poptip';
import Poptip from './components/poptip';
import Progress from './components/progress';
import Radio from './components/radio';
import Rate from './components/rate';
@ -87,7 +87,7 @@ const iview = {
// OptionGroup,
// Page,
Panel: Collapse.Panel,
// Poptip,
Poptip,
Progress,
Radio,
RadioGroup: Radio.Group,

1
test/app.vue
View file

@ -36,6 +36,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<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="/poptip">Poptip</router-link></li>
<li><router-link to="/slider">Slider</router-link></li>
</ul>
</nav>

4
test/main.js
View file

@ -109,6 +109,10 @@ const router = new VueRouter({
path: '/tooltip',
component: require('./routers/tooltip.vue')
},
{
path: '/poptip',
component: require('./routers/poptip.vue')
},
{
path: '/slider',
component: require('./routers/slider.vue')

2
test/routers/card.vue
View file

@ -12,7 +12,7 @@
<li v-for="item in movieList">
<a :href="item.url" target="_blank">{{ item.name }}</a>
<span>
<Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
<!--<Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>-->
{{ item.rate }}
</span>
</li>

36
test/routers/poptip.vue
View file

@ -1,22 +1,32 @@
<template>
<div style="margin: 100px">
<Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
<i-button>hover 激活</i-button>
<div style="margin: 100px;">
<Poptip
confirm
title="您确认删除这条内容吗？"
@on-ok="ok"
@on-cancel="cancel">
<Button>删除</Button>
</Poptip>
<Poptip title="提示标题" placement="bottom" content="提示内容">
<i-button>click 激活</i-button>
</Poptip>
<Poptip trigger="focus" title="提示标题" content="提示内容">
<i-input type="textarea"></i-input>
<!--<i-button>focus 激活</i-button>-->
</Poptip>
<Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
<i-input></i-input>
<Poptip
confirm
title="Are you sure delete this task?"
@on-ok="ok"
@on-cancel="cancel"
ok-text="yes"
cancel-text="no">
<Button>国际化</Button>
</Poptip>
</div>
</template>
<script>
export default {
methods: {
ok () {
this.$Message.info('点击了确定');
},
cancel () {
this.$Message.info('点击了取消');
}
}
}
</script>