lc-popover

在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。 同时设置了遮罩层，通过点击遮罩层的任一位置，进行退出。

注意事项

• 常用于拓展气泡按钮组
• 在指定坐标位置弹出气泡，点击遮罩层进行关闭
• 支持上、下、左、右四个方向
• 可自定义气泡和箭头具体位置

效果

使用方法

<!-- 95735 新增lc-popover气泡菜单组件 -->

<template>
  <div class="lc-demo">
      <lc-title title="lc-popover"></lc-title>
      <category title="使用案例"></category>
      <div>

        <div class="demo1">
          <lc-minibar title="点击右方拓展按钮"
                      background-color="#999"
                      @LcMinibarRightButtonClicked="minibarRightButtonClick"
                      right-text="..."></lc-minibar>
        </div>

        <div class="demo demo3">
          <lc-button text="向右弹出|无动画" type="normal" :btnStyle="btn3Style"  @LcButtonClicked="LcButtonClicked3"></lc-button>                     
          <lc-button text="向左弹出" type="normal" :btnStyle="btn4Style"  @LcButtonClicked="LcButtonClicked4"></lc-button>            
        </div>

        <div class="demo demo2">
          <lc-button text="向上弹出" @LcButtonClicked="LcButtonClicked2"></lc-button>
        </div>

        <!-- demo 1 pop -->
        <lc-popover ref="lc-popover1"
                     :buttons="btns"
                     :position="popoverPosition"
                     :arrowPosition="popoverArrowPosition"
                     @LcPopoverButtonClicked="popoverButtonClicked"
        ></lc-popover>

        <!-- demo 2 pop -->
        <lc-popover ref="lc-popover2"
                     :buttons="btns2"
                     :position="popoverPosition2"
                     :arrowPosition="popoverArrowPosition2"
                     @LcPopoverButtonClicked="popoverButtonClicked"
        ></lc-popover>

        <!-- demo 3 pop -->
        <lc-popover ref="lc-popover3"
                     :buttons="btns3"
                     :position="popoverPosition3"
                     :hasAnimation="false"
                     :arrowPosition="popoverArrowPosition3"
                     @LcPopoverButtonClicked="popoverButtonClicked"
        ></lc-popover>

        <!-- demo 4 pop -->
        <lc-popover ref="lc-popover4"
                     :buttons="btns4"
                     :position="popoverPosition4"
                     :arrowPosition="popoverArrowPosition4"
                     @LcPopoverButtonClicked="popoverButtonClicked"
        ></lc-popover>
      </div>
  </div>
</template>

<style scoped>
  .lc-demo {
    background-color: #FFFFFF;
  }
  .scroller{height: 1000px;}
  .demo {
    width: 750px;
    padding-top: 60px;
    align-items: center;
    flex-direction: row;
    padding: 60px 10px;
    justify-content: space-between;
  }
  .demo1 {
    margin-top: 80px;
  }
  .demo2 {
    justify-content: center;
  }
  .demo3 {
    padding: 100px 30px 45px 30px;
  }
</style>

<script>
  import Light from 'light';
  import LcTitle from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcMinibar from 'lighting-ui/packages/lc-minibar';
  import LcButton from 'lighting-ui/packages/lc-button';
  import LcPopover from 'lighting-ui/packages/lc-popover';

  const modal = Light.requireModule('modal');

  import {WEEXUI_ICON, RETURN_ICON, SCAN_ICON, QRCODE_ICON, QUESTION_ICON } from 'popover.js';

  export default {
    components: { LcTitle, Category, LcMinibar, LcButton, LcPopover },
    data: () => ({
      leftButton: RETURN_ICON,
      btns: [
        {
          icon: SCAN_ICON,
          text: 'Scan',
          key: 'key-scan'
        },
        {
          icon: QRCODE_ICON,
          text: 'My Qrcode',
          key: 'key-qrcode'
        },
        {
          icon: QUESTION_ICON,
          text: 'Help',
          key: 'key-help'
        }
      ],
      popoverPosition: { x: -4, y: 360 },
      popoverArrowPosition: { pos: 'top', x: -26 },
      btns2: [

        {
          text: 'Popover Select 1',
          key: 's1'
        },
        {
          text: 'Popover Select 2',
          key: 's2'
        },
        {
          text: 'Popover Select 3',
          key: 's3'
        }
      ],
      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:{
        height: '200px',
        width: '300px'
      }
    }),
    methods: {
      minibarRightButtonClick () {
        this.$refs['lc-popover1'].lcPopoverShow();
      },
      popoverButtonClicked (obj) {
        modal.toast({ 'message': `key:${obj.key}, index:${obj.index}`, 'duration': 1 });
      },
      LcButtonClicked3(){
        this.$refs['lc-popover3'].lcPopoverShow();
      },
      LcButtonClicked4(){
        this.$refs['lc-popover4'].lcPopoverShow();
      },
      LcButtonClicked2(){
        this.$refs['lc-popover2'].lcPopoverShow();
      }
    }
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
buttons	Array	Y	[]	气泡按钮数据列表(注1)
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定位箭头位置
coverColor	String	N	rgba(0,0,0,0.4)	遮罩层颜色，如 rgba(0,0,0,0.4)，rgb(0,0,0)，#000
hasAnimation	Boolean	N	true	是否开启展开动画
textStyle	Object	N	{}	文字样式覆盖

注1:

[{icon: 'xx.png',text:'Help',key:'key-help'}]

调用显示

在lc-popover上面绑定ref，然后调用this.$refs['lc-popover'].hide();即可显示

事件回调

// `@LcPopoverButtonClicked` 返回一个对象，标志点击按钮的 `key` 和 `index`