[+] popover extend animation

example/popover/index.vue

@@ -13,17 +13,43 @@
                        background-color="#F2F3F4"
                        @wxcMinibarRightButtonClicked="minibarRightButtonClick"
                        right-text="..."></wxc-minibar>
-          <wxc-popover ref="wxc-popover"
+          <wxc-popover ref="wxc-popover1"
                        :buttons="btns"
                        :position="popoverPosition"
                        :arrowPosition="popoverArrowPosition"
                        @wxcPopoverButtonClicked="popoverButtonClicked"
           ></wxc-popover>
         </div>
 
+        <div class="demo demo3">
+          <wxc-button text="向右弹出|无动画"
+                      :btnStyle="btn3Style"
+                      type="normal"
+                      @wxcButtonClicked="wxcButtonClicked('wxc-popover3')"></wxc-button>
+          <wxc-popover ref="wxc-popover3"
+                       :buttons="btns3"
+                       :position="popoverPosition3"
+                       :hasAnimation="false"
+                       :arrowPosition="popoverArrowPosition3"
+                       @wxcPopoverButtonClicked="popoverButtonClicked"
+          ></wxc-popover>
+
+          <wxc-button text="向左弹出"
+                      :btnStyle="btn4Style"
+                      type="highlight"
+                      @wxcButtonClicked="wxcButtonClicked('wxc-popover4')"></wxc-button>
+          <wxc-popover ref="wxc-popover4"
+                       :buttons="btns4"
+                       :position="popoverPosition4"
+                       :arrowPosition="popoverArrowPosition4"
+                       @wxcPopoverButtonClicked="popoverButtonClicked"
+          ></wxc-popover>
+
+        </div>
+
         <div class="demo demo2">
           <wxc-button text="向上弹出"
-                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+                      @wxcButtonClicked="wxcButtonClicked('wxc-popover2')"></wxc-button>
           <wxc-popover ref="wxc-popover2"
                        :buttons="btns2"
                        :position="popoverPosition2"
@@ -46,19 +72,18 @@
     right: 0;
     background-color: #FFFFFF;
   }
-
-  .scroller {
-    flex: 1;
-  }
-
   .demo {
     width: 750px;
-    height: 180px;
     padding-top: 60px;
   }
 
   .demo2 {
-    margin-top: 200px;
+    margin-top: 50px;
+    margin-left: 20px;
+  }
+  .demo3 {
+    position: relative;
+    margin-top: 50px;
     margin-left: 20px;
   }
 </style>
@@ -70,7 +95,7 @@
 
   const modal = weex.requireModule('modal');
   import { setTitle } from '../_mods/set-nav';
-  import { RETURN_ICON, SCAN_ICON, QRCODE_ICON, QUESTION_ICON } from './type';
+  import {WEEXUI_ICON, RETURN_ICON, SCAN_ICON, QRCODE_ICON, QUESTION_ICON } from './type';
 
   export default {
     components: { Title, Category, WxcMinibar, WxcButton, WxcPopover },
@@ -110,21 +135,46 @@
           key: 's3'
         }
       ],
-      popoverPosition2: { x: 200, y: 390 },
+      popoverPosition2: { x: 200, y: 520 },
       popoverArrowPosition2: { pos: 'bottom', x: 160 },
+      btns3: [
+        { icon: WEEXUI_ICON, text: 'Item 1', key: 's1'},
+        { icon: WEEXUI_ICON, text: 'Item 2', key: 's2'},
+        { icon: WEEXUI_ICON, text: 'Item 3', key: 's3'}
+      ],
+      popoverPosition3: { x: 325, y: 550 },
+      popoverArrowPosition3: { pos: 'left', y: 0 },
+      btns4: [
+        { icon: WEEXUI_ICON, text: 'Item 1', key: 's1'},
+        { icon: WEEXUI_ICON, text: 'Item 2', key: 's2'},
+        { icon: WEEXUI_ICON, text: 'Item 3', key: 's3'}
+      ],
+      popoverPosition4: { x: 175, y: 380 },
+      popoverArrowPosition4: { pos: 'right', y: -50 },
+      btn3Style:{
+        height: '200px',
+        width: '300px'
+      },
+      btn4Style:{
+        position: 'absolute',
+        right: '40px',
+        top: '60px',
+        height: '200px',
+        width: '300px'
+      }
     }),
     created () {
       setTitle('Popover')
     },
     methods: {
       minibarRightButtonClick () {
-        this.$refs['wxc-popover'].wxcPopoverShow();
+        this.$refs['wxc-popover1'].wxcPopoverShow();
       },
       popoverButtonClicked (obj) {
         modal.toast({ 'message': `key:${obj.key}, index:${obj.index}`, 'duration': 1 });
       },
-      wxcButtonClicked () {
-        this.$refs['wxc-popover2'].wxcPopoverShow();
+      wxcButtonClicked (ref='wxc-popover2') {
+        this.$refs[ref].wxcPopoverShow();
       }
     }
   };

example/popover/type.js

@@ -1,6 +1,7 @@
 /**
  * Created by zwwill on 2018/03/02.
  */
+export const WEEXUI_ICON = 'https://gw.alicdn.com/tfs/TB1JpgJRFXXXXc7XpXXXXXXXXXX-800-800.png';
 export const RETURN_ICON = 'https://gw.alicdn.com/tfs/TB1cAYsbv2H8KJjy0FcXXaDlFXa-30-53.png';
 export const SCAN_ICON = 'https://gw.alicdn.com/tfs/TB1Vm3abuuSBuNjy1XcXXcYjFXa-64-64.png';
 export const QRCODE_ICON = 'https://gw.alicdn.com/tfs/TB1U93abuuSBuNjy1XcXXcYjFXa-64-64.png';

packages/wxc-popover/README.md

@@ -81,8 +81,9 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 |-------------|------------|--------|-----|-----|
 | buttons | `Array` |`Y`|`[]` | buttons data,  |
 | position | `Object` |`Y`|`{x:0,y:0}` | Bubble position, x>0 meaning the distance to the left, x<0 to right, and y is the same. |
-| arrowPosition | `Object` |`Y`|`{pos:'top',x:0,y:0}` | Bubble arrow position，pos could be'top|bottom|left|right'  |
+| arrowPosition | `Object` |`Y`|`{pos:'top',x:0,y:0}` | Bubble arrow position，pos could be'top,bottom,left,right'  |
 | coverColor | `String` |`N`|`rgba(0,0,0,0.4)`| Mask layer color, e.g `rgba(0,0,0,0.4)`，`rgb(0,0,0)`，`#000` |
+| hasAnimation | `Boolean` |`N`| `true` | whether to animate  |
 
 ### Manual Show
 

packages/wxc-popover/README_cn.md

@@ -79,8 +79,9 @@
 |-------------|------------|--------|-----|-----|
 | buttons | `Array` |`Y`|`[]` | 气泡按钮数据列表，如 `[{icon: 'http://cdn.zwwill.com/weexui/icon/scan.png',text:'Help',key:'key-help'}]` |
 | position | `Object` |`Y`|`{x:0,y:0}` | 气泡位置，x>0 为左边距，x<0 为右边距，y同理 |
-| arrowPosition | `Object` |`Y`|`{pos:'top',x:0,y:0}` | 气泡箭头位置，pos 为'top|bottom|left|right'，配合x，y定位箭头位置  |
+| arrowPosition | `Object` |`Y`|`{pos:'top',x:0,y:0}` | 气泡箭头位置，pos 为'top,bottom,left,right'，配合x，y定位箭头位置  |
 | coverColor | `String` |`N`|`rgba(0,0,0,0.4)`| 遮罩层颜色，如 `rgba(0,0,0,0.4)`，`rgb(0,0,0)`，`#000` |
+| hasAnimation | `Boolean` |`N`| `true` | 是否开启展开动画  |
 
 ### 调用显示