drip-public/iview
5
0
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
Download patch file Download diff file Expand all files Collapse all files

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,