mirror of https://github.com/ElemeFE/element
				
				
				
			Popover: add after transition events
							parent
							
								
									e92d1d13aa
								
							
						
					
					
						commit
						09cc5be758
					
				| 
						 | 
				
			
			@ -88,10 +88,7 @@
 | 
			
		|||
          date: '2016-05-07',
 | 
			
		||||
          name: 'Jack',
 | 
			
		||||
          address: 'New York City'
 | 
			
		||||
        }],
 | 
			
		||||
        singleSelection: {},
 | 
			
		||||
        multipleSelection: [],
 | 
			
		||||
        model: ''
 | 
			
		||||
        }]
 | 
			
		||||
      };
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
| 
						 | 
				
			
			@ -245,4 +242,6 @@ Of course, you can nest other operations. It's more light-weight than using a di
 | 
			
		|||
| Event Name | Description | 回调参数 |
 | 
			
		||||
|---------|--------|---------|
 | 
			
		||||
| show | triggers when popover shows | — |
 | 
			
		||||
| after-enter | triggers when the entering transition ends | — |
 | 
			
		||||
| hide | triggers when popover hides | — |
 | 
			
		||||
| after-leave | triggers when the leaving transition ends | — |
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -88,10 +88,7 @@
 | 
			
		|||
          date: '2016-05-07',
 | 
			
		||||
          name: 'Jack',
 | 
			
		||||
          address: 'New York City'
 | 
			
		||||
        }],
 | 
			
		||||
        singleSelection: {},
 | 
			
		||||
        multipleSelection: [],
 | 
			
		||||
        model: ''
 | 
			
		||||
        }]
 | 
			
		||||
      };
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
| 
						 | 
				
			
			@ -244,4 +241,6 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | 
			
		|||
| Nombre del evento | Descripción                             | Parámetros |
 | 
			
		||||
| ----------------- | --------------------------------------- | ---------- |
 | 
			
		||||
| show              | se dispara cuando se muestra el popover | —          |
 | 
			
		||||
| after-enter       | triggers when the entering transition ends | —       |
 | 
			
		||||
| hide              | se dispara cuando se oculta el popover  | —          |
 | 
			
		||||
| after-leave       | triggers when the leaving transition ends | —        |
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -74,27 +74,8 @@
 | 
			
		|||
          date: '2016-05-07',
 | 
			
		||||
          name: '王小虎',
 | 
			
		||||
          address: '上海市普陀区金沙江路 1518 弄'
 | 
			
		||||
        }],
 | 
			
		||||
        singleSelection: {},
 | 
			
		||||
        multipleSelection: [],
 | 
			
		||||
        model: ''
 | 
			
		||||
        }]
 | 
			
		||||
      };
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    watch: {
 | 
			
		||||
      singleSelection(val) {
 | 
			
		||||
        console.log('selection: ', val);
 | 
			
		||||
      },
 | 
			
		||||
 | 
			
		||||
      multipleSelection(val) {
 | 
			
		||||
        console.log('selection: ', val);
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    events: {
 | 
			
		||||
      handleClick(row) {
 | 
			
		||||
        console.log('you clicked ', row);
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
</script>
 | 
			
		||||
| 
						 | 
				
			
			@ -258,4 +239,6 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
 | 
			
		|||
| 事件名称 | 说明 | 回调参数 |
 | 
			
		||||
|---------|--------|---------|
 | 
			
		||||
| show | 显示时触发 | — |
 | 
			
		||||
| after-enter | 显示动画播放完毕后触发 | — |
 | 
			
		||||
| hide | 隐藏时触发 | — |
 | 
			
		||||
| after-leave | 隐藏动画播放完毕后触发 | — |
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,6 +1,9 @@
 | 
			
		|||
<template>
 | 
			
		||||
  <span>
 | 
			
		||||
    <transition :name="transition" @after-leave="doDestroy">
 | 
			
		||||
    <transition
 | 
			
		||||
      :name="transition"
 | 
			
		||||
      @after-enter="handleAfterEnter"
 | 
			
		||||
      @after-leave="handleAfterLeave">
 | 
			
		||||
      <div
 | 
			
		||||
        class="el-popover el-popper"
 | 
			
		||||
        :class="[popperClass, content && 'el-popover--plain']"
 | 
			
		||||
| 
						 | 
				
			
			@ -190,6 +193,13 @@ export default {
 | 
			
		|||
        !popper ||
 | 
			
		||||
        popper.contains(e.target)) return;
 | 
			
		||||
      this.showPopper = false;
 | 
			
		||||
    },
 | 
			
		||||
    handleAfterEnter() {
 | 
			
		||||
      this.$emit('after-enter');
 | 
			
		||||
    },
 | 
			
		||||
    handleAfterLeave() {
 | 
			
		||||
      this.$emit('after-leave');
 | 
			
		||||
      this.doDestroy();
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue