chenhaodong / mew-iview

Commit 79288d43dd7616be2a7b3a9a087049a71acf6b81

Authored by 梁灏
1 parent d6f644e1

support Poptip & clickoutside 

support Poptip & clickoutside
Showing 11 changed files with 72 additions and 49 deletions   Show diff stats
Inline Side-by-side
.eslintignore 0 → 100644
  Show/Hide comments   View file @79288d4
  1 +src/directives
0 2 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @79288d4
... ... @@ -46,7 +46,7 @@
46 46 - [x] Timeline
47 47 - [x] Tag
48 48 - [x] Tooltip
49   -- [ ] Poptip
  49 +- [x] Poptip
50 50 - [x] Carousel
51 51 - [x] Tree
52 52 - [ ] Menu
... ...
src/components/base/popper.js
  Show/Hide comments   View file @79288d4
... ... @@ -40,7 +40,7 @@ export default {
40 40 data () {
41 41 return {
42 42 visible: this.value
43   - }
  43 + };
44 44 },
45 45 watch: {
46 46 value: {
... ...
src/components/poptip/poptip.vue
  Show/Hide comments   View file @79288d4
... ... @@ -6,33 +6,35 @@
6 6 v-clickoutside="handleClose">
7 7 <div
8 8 :class="[prefixCls + '-rel']"
9   - v-el:reference
  9 + ref="reference"
10 10 @click="handleClick"
11 11 @mousedown="handleFocus(false)"
12 12 @mouseup="handleBlur(false)">
13 13 <slot></slot>
14 14 </div>
15   - <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
16   - <div :class="[prefixCls + '-content']">
17   - <div :class="[prefixCls + '-arrow']"></div>
18   - <div :class="[prefixCls + '-inner']" v-if="confirm">
19   - <div :class="[prefixCls + '-body']">
20   - <i class="ivu-icon ivu-icon-help-circled"></i>
21   - <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
  15 + <transition name="fade">
  16 + <div :class="[prefixCls + '-popper']" :style="styles" ref="popper" v-show="visible">
  17 + <div :class="[prefixCls + '-content']">
  18 + <div :class="[prefixCls + '-arrow']"></div>
  19 + <div :class="[prefixCls + '-inner']" v-if="confirm">
  20 + <div :class="[prefixCls + '-body']">
  21 + <i class="ivu-icon ivu-icon-help-circled"></i>
  22 + <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
  23 + </div>
  24 + <div :class="[prefixCls + '-footer']">
  25 + <i-button type="text" size="small" @click.native="cancel">{{ cancelText }}</i-button>
  26 + <i-button type="primary" size="small" @click.native="ok">{{ okText }}</i-button>
  27 + </div>
22 28 </div>
23   - <div :class="[prefixCls + '-footer']">
24   - <i-button type="text" size="small" @click="cancel">{{ cancelText }}</i-button>
25   - <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
26   - </div>
27   - </div>
28   - <div :class="[prefixCls + '-inner']" v-if="!confirm">
29   - <div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
30   - <div :class="[prefixCls + '-body']">
31   - <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
  29 + <div :class="[prefixCls + '-inner']" v-if="!confirm">
  30 + <div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
  31 + <div :class="[prefixCls + '-body']">
  32 + <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
  33 + </div>
32 34 </div>
33 35 </div>
34 36 </div>
35   - </div>
  37 + </transition>
36 38 </div>
37 39 </template>
38 40 <script>
... ... @@ -45,6 +47,7 @@
45 47 const prefixCls = 'ivu-poptip';
46 48  
47 49 export default {
  50 + name: 'Poptip',
48 51 mixins: [Popper],
49 52 directives: { clickoutside },
50 53 components: { iButton },
... ... @@ -167,8 +170,8 @@
167 170 this.$emit('on-ok');
168 171 },
169 172 getInputChildren () {
170   - const $input = this.$els.reference.querySelectorAll('input');
171   - const $textarea = this.$els.reference.querySelectorAll('textarea');
  173 + const $input = this.$refs.reference.querySelectorAll('input');
  174 + const $textarea = this.$refs.reference.querySelectorAll('textarea');
172 175 let $children = null;
173 176  
174 177 if ($input.length) {
... ... @@ -180,9 +183,10 @@
180 183 return $children;
181 184 }
182 185 },
183   - compiled () {
  186 + mounted () {
184 187 if (!this.confirm) {
185   - this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
  188 +// this.showTitle = this.$refs.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
  189 + this.showTitle = this.$slots.title !== undefined;
186 190 }
187 191 // if trigger and children is input or textarea,listen focus & blur event
188 192 if (this.trigger === 'focus') {
... ...
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @79288d4
... ... @@ -20,6 +20,7 @@
20 20 const prefixCls = 'ivu-tooltip';
21 21  
22 22 export default {
  23 + name: 'Tooltip',
23 24 mixins: [Popper],
24 25 props: {
25 26 placement: {
... ...
src/directives/clickoutside.js
  Show/Hide comments   View file @79288d4
1 1 export default {
2   - bind () {
3   - this.documentHandler = (e) => {
4   - if (this.el.contains(e.target)) {
  2 + bind (el, binding, vnode) {
  3 + function documentHandler (e) {
  4 + if (el.contains(e.target)) {
5 5 return false;
6 6 }
7   - if (this.expression) {
8   - this.vm[this.expression]();
  7 + if (binding.expression) {
  8 + binding.value(e);
9 9 }
10   - };
11   - document.addEventListener('click', this.documentHandler);
  10 + }
  11 + el.__vueClickOutside__ = documentHandler;
  12 + document.addEventListener('click', documentHandler);
12 13 },
13 14 update () {
14 15  
15 16 },
16   - unbind () {
17   - document.removeEventListener('click', this.documentHandler);
  17 + unbind (el, binding) {
  18 + document.removeEventListener('click', el.__vueClickOutside__);
  19 + delete el.__vueClickOutside__;
18 20 }
19 21 };
20 22 \ No newline at end of file
... ...
src/index.js
  Show/Hide comments   View file @79288d4
... ... @@ -25,7 +25,7 @@ import InputNumber from &#39;./components/input-number&#39;;
25 25 // import Modal from './components/modal';
26 26 // import Notice from './components/notice';
27 27 // import Page from './components/page';
28   -// import Poptip from './components/poptip';
  28 +import Poptip from './components/poptip';
29 29 import Progress from './components/progress';
30 30 import Radio from './components/radio';
31 31 import Rate from './components/rate';
... ... @@ -87,7 +87,7 @@ const iview = {
87 87 // OptionGroup,
88 88 // Page,
89 89 Panel: Collapse.Panel,
90   - // Poptip,
  90 + Poptip,
91 91 Progress,
92 92 Radio,
93 93 RadioGroup: Radio.Group,
... ...
test/app.vue
  Show/Hide comments   View file @79288d4
... ... @@ -36,6 +36,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
36 36 <li><router-link to="/circle">Circle</router-link></li>
37 37 <li><router-link to="/tabs">Tabs</router-link></li>
38 38 <li><router-link to="/tooltip">Tooltip</router-link></li>
  39 + <li><router-link to="/poptip">Poptip</router-link></li>
39 40 <li><router-link to="/slider">Slider</router-link></li>
40 41 </ul>
41 42 </nav>
... ...
test/main.js
  Show/Hide comments   View file @79288d4
... ... @@ -110,6 +110,10 @@ const router = new VueRouter({
110 110 component: require('./routers/tooltip.vue')
111 111 },
112 112 {
  113 + path: '/poptip',
  114 + component: require('./routers/poptip.vue')
  115 + },
  116 + {
113 117 path: '/slider',
114 118 component: require('./routers/slider.vue')
115 119 }
... ...
test/routers/card.vue
  Show/Hide comments   View file @79288d4
... ... @@ -12,7 +12,7 @@
12 12 <li v-for="item in movieList">
13 13 <a :href="item.url" target="_blank">{{ item.name }}</a>
14 14 <span>
15   - <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>
  15 + <!--<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>-->
16 16 {{ item.rate }}
17 17 </span>
18 18 </li>
... ...
test/routers/poptip.vue
  Show/Hide comments   View file @79288d4
1 1 <template>
2   - <div style="margin: 100px">
3   - <Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
4   - <i-button>hover 激活</i-button>
  2 + <div style="margin: 100px;">
  3 + <Poptip
  4 + confirm
  5 + title="您确认删除这条内容吗？"
  6 + @on-ok="ok"
  7 + @on-cancel="cancel">
  8 + <Button>删除</Button>
5 9 </Poptip>
6   - <Poptip title="提示标题" placement="bottom" content="提示内容">
7   - <i-button>click 激活</i-button>
8   - </Poptip>
9   - <Poptip trigger="focus" title="提示标题" content="提示内容">
10   - <i-input type="textarea"></i-input>
11   - <!--<i-button>focus 激活</i-button>-->
12   - </Poptip>
13   - <Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
14   - <i-input></i-input>
  10 + <Poptip
  11 + confirm
  12 + title="Are you sure delete this task?"
  13 + @on-ok="ok"
  14 + @on-cancel="cancel"
  15 + ok-text="yes"
  16 + cancel-text="no">
  17 + <Button>国际化</Button>
15 18 </Poptip>
16 19 </div>
17 20 </template>
18 21 <script>
19 22 export default {
20   -
  23 + methods: {
  24 + ok () {
  25 + this.$Message.info('点击了确定');
  26 + },
  27 + cancel () {
  28 + this.$Message.info('点击了取消');
  29 + }
  30 + }
21 31 }
22 32 </script>
... ...