Popover 气泡

使用指南

气泡式弹窗组件，可添加描述或者额外的菜单；若是简单文本描述请使用Tooltip组件；

与h3-mobile-vue组件的区别以及迁移

通过对组件梳理，进行重构及统一风格及UI。引用了popper.js来对气泡进行定位。若要做迁移请参考

弃用了H3PopoverItem组件

1. 弃用的props：menus gutter
2. 替换的props：-
3. 新增的props：maskCls offset disabled always control wrapCls getRenderContainer type reference
4. placement 枚举新增了 top-start top-end bottom-start bottom-end bottom-start bottom-end left-start left-end right-start right-end，弃用了 topLeft topRight bottomLeft bottomRight

代码演示

查看代码

<template>
  <div>
    <h3-nav-bar mode="light" title="气泡">
      <template slot="right">
        <h3-icon type="search-o" />
        <div>
          <h3-popover v-model="visible" mask placement="bottom-end">
            <h3-icon type="more" />
            <template #content>
              <h3-button-group divide layout="vertical">
                <h3-button
                  type="primary"
                  ghost
                  size="small"
                  icon="heart-o"
                >
                  收藏
                </h3-button>
                <h3-button
                  type="primary"
                  ghost
                  icon="like-o"
                  size="small"
                >
                  点赞
                </h3-button>
                <h3-button
                  type="primary"
                  ghost
                  icon="message-o"
                  size="small"
                >
                  评论
                </h3-button>
              </h3-button-group>
            </template>
          </h3-popover>
        </div>
      </template>
    </h3-nav-bar>
    <br />
    <br />
    <div class="top">
      <h3-popover content="上左" placement="top-start">
        <h3-button size="small" inline>
          上左
        </h3-button>
      </h3-popover>
      <h3-popover content="上边" placement="top">
        <h3-button size="small" inline>
          上边
        </h3-button>
      </h3-popover>
      <h3-popover content="上右" placement="top-end">
        <h3-button size="small" inline>
          上右
        </h3-button>
      </h3-popover>
    </div>
    <div class="center">
      <div class="center-left">
        <h3-popover content="左上" placement="left-start">
          <h3-button size="small" inline>
            左上
          </h3-button>
        </h3-popover>
        <br />
        <br />
        <h3-popover content="左边" placement="left">
          <h3-button size="small" inline>
            左边
          </h3-button>
        </h3-popover>
        <br />
        <br />
        <h3-popover content="左下" placement="left-end">
          <h3-button size="small" inline>
            左下
          </h3-button>
        </h3-popover>
      </div>
      <div class="center-right">
        <h3-popover content="右上" placement="right-start">
          <h3-button size="small" inline>
            右上
          </h3-button>
        </h3-popover>
        <br />
        <br />
        <h3-popover content="右边" placement="right">
          <h3-button size="small" inline>
            右边
          </h3-button>
        </h3-popover>
        <br />
        <br />
        <h3-popover content="右下" placement="right-end">
          <h3-button size="small" inline>
            右下
          </h3-button>
        </h3-popover>
      </div>
    </div>
    <div class="bottom">
      <h3-popover content="下左" placement="bottom-start">
        <h3-button size="small" inline>
          下左
        </h3-button>
      </h3-popover>
      <h3-popover content="下边" placement="bottom">
        <h3-button size="small" inline>
          下边
        </h3-button>
      </h3-popover>
      <h3-popover content="下右" placement="bottom-end">
        <h3-button size="small" inline>
          下右
        </h3-button>
      </h3-popover>
    </div>
    <div class="pop-item">
      <h3-popover content="主色" type="primary" always>
        <h3-button size="small" inline>
          主色
        </h3-button>
      </h3-popover>
    </div>
    <div class="pop-item">
      <h3-popover
        content="警告"
        type="warning"
        always
        placement="right"
      >
        <h3-button size="small" inline>
          警告
        </h3-button>
      </h3-popover>
    </div>
    <div class="pop-item">
      <h3-popover
        content="错误"
        type="error"
        always
        placement="left"
      >
        <h3-button size="small" inline>
          错误
        </h3-button>
      </h3-popover>
    </div>
    <div class="pop-item">
      <h3-popover
        content="成功"
        type="success"
        always
        placement="top"
      >
        <h3-button size="small" inline>
          成功
        </h3-button>
      </h3-popover>
    </div>
  </div>
</template>

<script>
import H3Popover from '@/components/h3-popover/';
import H3NavBar from '@/components/h3-nav-bar/';
import H3Icon from '@/components/h3-icon/';
import H3Button from '@/components/h3-button/';

export default {
  name: 'Popover',
  components: {
    H3Popover,
    H3NavBar,
    H3Icon,
    H3Button,
    H3ButtonGroup: H3Button.Group,
  },
  data () {
    return {
      visible: false,
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.visible = true;
    });
  },
};
</script>

<style lang="less" scoped>
.pop-item {
  height: 100px;
  line-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top,
.bottom {
  text-align: center;
}
.center {
  width: 250px;
  margin: 10px auto;
  overflow: hidden;
}
.center-left {
  float: left;
}
.center-right {
  float: right;
}
</style>

API

参数	说明	类型	默认值
mask	是否显示遮罩层	boolean	false
visible	是否显示，v-model绑定值	boolean	false
reference	参照元素，可以为VNode，或者DOM元素，若使用该方式，default插槽请不要使用	VNode，DOM	-
placement	位置，可选值：top left right bottom top-start top-end bottom-start bottom-end bottom-start bottom-end left-start left-end right-start right-end	string	bottom
type	气泡类型 default primary warning error success	string	default
maskCls	mask蒙层自定义class	string	无
wrapCls	wrap弹窗内容区域的自定义class	string	无
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body
offset	气泡弹出后偏移量, 一般用来进行气泡偏移调整	number	0
disabled	是否禁用	boolean	false
always	是否一直呈现	boolean	false
control	是否由父组件控制显示隐藏，默认是在触发气泡组件上添加点击事件，触发	boolean	false

Slot

属性	说明	参数
default	触发气泡的组件	-
content	气泡内容插槽	-

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-