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 \ No newline at end of file 2 \ No newline at end of file
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 - [x] Timeline 46 - [x] Timeline
47 - [x] Tag 47 - [x] Tag
48 - [x] Tooltip 48 - [x] Tooltip
49 -- [ ] Poptip 49 +- [x] Poptip
50 - [x] Carousel 50 - [x] Carousel
51 - [x] Tree 51 - [x] Tree
52 - [ ] Menu 52 - [ ] Menu
src/components/base/popper.js
  Show/Hide comments   View file @79288d4
@@ -40,7 +40,7 @@ export default { @@ -40,7 +40,7 @@ export default {
40 data () { 40 data () {
41 return { 41 return {
42 visible: this.value 42 visible: this.value
43 - } 43 + };
44 }, 44 },
45 watch: { 45 watch: {
46 value: { 46 value: {
src/components/poptip/poptip.vue
  Show/Hide comments   View file @79288d4
@@ -6,33 +6,35 @@ @@ -6,33 +6,35 @@
6 v-clickoutside="handleClose"> 6 v-clickoutside="handleClose">
7 <div 7 <div
8 :class="[prefixCls + '-rel']" 8 :class="[prefixCls + '-rel']"
9 - v-el:reference 9 + ref="reference"
10 @click="handleClick" 10 @click="handleClick"
11 @mousedown="handleFocus(false)" 11 @mousedown="handleFocus(false)"
12 @mouseup="handleBlur(false)"> 12 @mouseup="handleBlur(false)">
13 <slot></slot> 13 <slot></slot>
14 </div> 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 </div> 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 </div> 34 </div>
33 </div> 35 </div>
34 </div> 36 </div>
35 - </div> 37 + </transition>
36 </div> 38 </div>
37 </template> 39 </template>
38 <script> 40 <script>
@@ -45,6 +47,7 @@ @@ -45,6 +47,7 @@
45 const prefixCls = 'ivu-poptip'; 47 const prefixCls = 'ivu-poptip';
46 48
47 export default { 49 export default {
  50 + name: 'Poptip',
48 mixins: [Popper], 51 mixins: [Popper],
49 directives: { clickoutside }, 52 directives: { clickoutside },
50 components: { iButton }, 53 components: { iButton },
@@ -167,8 +170,8 @@ @@ -167,8 +170,8 @@
167 this.$emit('on-ok'); 170 this.$emit('on-ok');
168 }, 171 },
169 getInputChildren () { 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 let $children = null; 175 let $children = null;
173 176
174 if ($input.length) { 177 if ($input.length) {
@@ -180,9 +183,10 @@ @@ -180,9 +183,10 @@
180 return $children; 183 return $children;
181 } 184 }
182 }, 185 },
183 - compiled () { 186 + mounted () {
184 if (!this.confirm) { 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 // if trigger and children is input or textarea,listen focus & blur event 191 // if trigger and children is input or textarea,listen focus & blur event
188 if (this.trigger === 'focus') { 192 if (this.trigger === 'focus') {
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @79288d4
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 const prefixCls = 'ivu-tooltip'; 20 const prefixCls = 'ivu-tooltip';
21 21
22 export default { 22 export default {
  23 + name: 'Tooltip',
23 mixins: [Popper], 24 mixins: [Popper],
24 props: { 25 props: {
25 placement: { 26 placement: {
src/directives/clickoutside.js
  Show/Hide comments   View file @79288d4
1 export default { 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 return false; 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 update () { 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 \ No newline at end of file 22 \ No newline at end of file
@@ -25,7 +25,7 @@ import InputNumber from &#39;./components/input-number&#39;; @@ -25,7 +25,7 @@ import InputNumber from &#39;./components/input-number&#39;;
25 // import Modal from './components/modal'; 25 // import Modal from './components/modal';
26 // import Notice from './components/notice'; 26 // import Notice from './components/notice';
27 // import Page from './components/page'; 27 // import Page from './components/page';
28 -// import Poptip from './components/poptip'; 28 +import Poptip from './components/poptip';
29 import Progress from './components/progress'; 29 import Progress from './components/progress';
30 import Radio from './components/radio'; 30 import Radio from './components/radio';
31 import Rate from './components/rate'; 31 import Rate from './components/rate';
@@ -87,7 +87,7 @@ const iview = { @@ -87,7 +87,7 @@ const iview = {
87 // OptionGroup, 87 // OptionGroup,
88 // Page, 88 // Page,
89 Panel: Collapse.Panel, 89 Panel: Collapse.Panel,
90 - // Poptip, 90 + Poptip,
91 Progress, 91 Progress,
92 Radio, 92 Radio,
93 RadioGroup: Radio.Group, 93 RadioGroup: Radio.Group,
@@ -36,6 +36,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -36,6 +36,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
36 <li><router-link to="/circle">Circle</router-link></li> 36 <li><router-link to="/circle">Circle</router-link></li>
37 <li><router-link to="/tabs">Tabs</router-link></li> 37 <li><router-link to="/tabs">Tabs</router-link></li>
38 <li><router-link to="/tooltip">Tooltip</router-link></li> 38 <li><router-link to="/tooltip">Tooltip</router-link></li>
  39 + <li><router-link to="/poptip">Poptip</router-link></li>
39 <li><router-link to="/slider">Slider</router-link></li> 40 <li><router-link to="/slider">Slider</router-link></li>
40 </ul> 41 </ul>
41 </nav> 42 </nav>
@@ -110,6 +110,10 @@ const router = new VueRouter({ @@ -110,6 +110,10 @@ const router = new VueRouter({
110 component: require('./routers/tooltip.vue') 110 component: require('./routers/tooltip.vue')
111 }, 111 },
112 { 112 {
  113 + path: '/poptip',
  114 + component: require('./routers/poptip.vue')
  115 + },
  116 + {
113 path: '/slider', 117 path: '/slider',
114 component: require('./routers/slider.vue') 118 component: require('./routers/slider.vue')
115 } 119 }
test/routers/card.vue
  Show/Hide comments   View file @79288d4
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 <li v-for="item in movieList"> 12 <li v-for="item in movieList">
13 <a :href="item.url" target="_blank">{{ item.name }}</a> 13 <a :href="item.url" target="_blank">{{ item.name }}</a>
14 <span> 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 {{ item.rate }} 16 {{ item.rate }}
17 </span> 17 </span>
18 </li> 18 </li>
test/routers/poptip.vue
  Show/Hide comments   View file @79288d4
1 <template> 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 </Poptip> 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 </Poptip> 18 </Poptip>
16 </div> 19 </div>
17 </template> 20 </template>
18 <script> 21 <script>
19 export default { 22 export default {
20 - 23 + methods: {
  24 + ok () {
  25 + this.$Message.info('点击了确定');
  26 + },
  27 + cancel () {
  28 + this.$Message.info('点击了取消');
  29 + }
  30 + }
21 } 31 }
22 </script> 32 </script>