BIN-UI-DESIGN

Appearance

On this page

弹出信息 Popover ​

气泡类型的弹窗,用于放置更多信息或询问流程等

基础用法 ​

<template>
  <div>
    <b-popover trigger="hover" title="Title" content="这是一段内容这是一段内容这是一段内容">
      <b-button>Hover</b-button>
    </b-popover>
    <b-popover
      trigger="click"
      title="Title"
      content="这是一段内容这是一段内容这是一段内容"
      :z-index="1000"
    >
      <b-button>Click</b-button>
    </b-popover>
    <b-popover trigger="focus" title="Title" content="这是一段内容这是一段内容这是一段内容">
      <b-button>Focus</b-button>
    </b-popover>
  </div>
</template>
<template>
  <div>
    <b-popover trigger="hover" title="Title" content="这是一段内容这是一段内容这是一段内容">
      <b-button>Hover</b-button>
    </b-popover>
    <b-popover
      trigger="click"
      title="Title"
      content="这是一段内容这是一段内容这是一段内容"
      :z-index="1000"
    >
      <b-button>Click</b-button>
    </b-popover>
    <b-popover trigger="focus" title="Title" content="这是一段内容这是一段内容这是一段内容">
      <b-button>Focus</b-button>
    </b-popover>
  </div>
</template>

多种悬停位置 ​

使用 placement 来设置不同的悬停位置









<template>
  <div class="demo-popover">
    <div class="top">
      <b-popover title="Title" content="Top Left text" placement="top-start">
        <b-button>上左</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Top Center text" placement="top">
        <b-button>上边</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Top Right text" placement="top-end">
        <b-button>上右</b-button>
      </b-popover>
    </div>
    <div class="center">
      <div class="center-left">
        <b-popover title="Title" content="Left Top text" placement="left-start">
          <b-button>左上</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Left Center text" placement="left">
          <b-button>左边</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Left Bottom text" placement="left-end">
          <b-button>左下</b-button>
        </b-popover>
      </div>
      <div class="center-right">
        <b-popover title="Title" content="Right Top text" placement="right-start">
          <b-button>右上</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Right Center text" placement="right">
          <b-button>右边</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Right Bottom text" placement="right-end">
          <b-button>右下</b-button>
        </b-popover>
      </div>
    </div>
    <div class="bottom">
      <b-popover title="Title" content="Bottom Left text" placement="bottom-start">
        <b-button>下左</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Bottom Center text" placement="bottom">
        <b-button>下边</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Bottom Right text" placement="bottom-end">
        <b-button>下右</b-button>
      </b-popover>
    </div>
  </div>
</template>

<style scoped>
.demo-popover {
  .top,
  .bottom {
    text-align: center;
  }
  .center {
    width: 300px;
    margin: 10px auto;
    overflow: hidden;
    .center-left {
      float: left;
    }
    .center-right {
      float: right;
    }
  }
}
</style>
<template>
  <div class="demo-popover">
    <div class="top">
      <b-popover title="Title" content="Top Left text" placement="top-start">
        <b-button>上左</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Top Center text" placement="top">
        <b-button>上边</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Top Right text" placement="top-end">
        <b-button>上右</b-button>
      </b-popover>
    </div>
    <div class="center">
      <div class="center-left">
        <b-popover title="Title" content="Left Top text" placement="left-start">
          <b-button>左上</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Left Center text" placement="left">
          <b-button>左边</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Left Bottom text" placement="left-end">
          <b-button>左下</b-button>
        </b-popover>
      </div>
      <div class="center-right">
        <b-popover title="Title" content="Right Top text" placement="right-start">
          <b-button>右上</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Right Center text" placement="right">
          <b-button>右边</b-button>
        </b-popover>
        <br />
        <br />
        <b-popover title="Title" content="Right Bottom text" placement="right-end">
          <b-button>右下</b-button>
        </b-popover>
      </div>
    </div>
    <div class="bottom">
      <b-popover title="Title" content="Bottom Left text" placement="bottom-start">
        <b-button>下左</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Bottom Center text" placement="bottom">
        <b-button>下边</b-button>
        &nbsp;&nbsp;
      </b-popover>
      <b-popover title="Title" content="Bottom Right text" placement="bottom-end">
        <b-button>下右</b-button>
      </b-popover>
    </div>
  </div>
</template>

<style scoped>
.demo-popover {
  .top,
  .bottom {
    text-align: center;
  }
  .center {
    width: 300px;
    margin: 10px auto;
    overflow: hidden;
    .center-left {
      float: left;
    }
    .center-right {
      float: right;
    }
  }
}
</style>

浮层内关闭 ​

<template>
  <b-popover v-model:visible="visible">
    <b-button type="text" @click="close">点我打开浮层</b-button>
    <a style="margin-left: 30px">Click</a>
    <template #content>
      <b-button type="text" @click="close">关闭</b-button>
    </template>
  </b-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
function close() {
  visible.value = false
}
</script>
<template>
  <b-popover v-model:visible="visible">
    <b-button type="text" @click="close">点我打开浮层</b-button>
    <a style="margin-left: 30px">Click</a>
    <template #content>
      <b-button type="text" @click="close">关闭</b-button>
    </template>
  </b-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
function close() {
  visible.value = false
}
</script>

更多内容 ​

<template>
  <div>
    <b-popover placement="top" width="200px">
      <b-button>长文本</b-button>
      <template #content>
        <div>这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长的描述</div>
      </template>
    </b-popover>
    <b-popover placement="right" width="300px">
      <b-button>更多内容</b-button>
      <template #content>
        <div>这是自定义内容~这是自定义内容~这是自定义内容~这是自定义内容~</div>
        <div>这是自定义内容~这是自定义内容~这是自定义内容~这是自定义内容~</div>
      </template>
    </b-popover>
  </div>
</template>
<template>
  <div>
    <b-popover placement="top" width="200px">
      <b-button>长文本</b-button>
      <template #content>
        <div>这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长的描述</div>
      </template>
    </b-popover>
    <b-popover placement="right" width="300px">
      <b-button>更多内容</b-button>
      <template #content>
        <div>这是自定义内容~这是自定义内容~这是自定义内容~这是自定义内容~</div>
        <div>这是自定义内容~这是自定义内容~这是自定义内容~这是自定义内容~</div>
      </template>
    </b-popover>
  </div>
</template>

确认气泡框 ​

通过设置属性confirm开启确认框模式。确认框只会以 click 的形式激活，并且只会显示 title 的内容，忽略 content。

<template>
  <b-popover v-model:visible="visible" :width="240">
    <b-button type="danger" plain>确认气泡框</b-button>
    <template #content>
      <p>
        <b-icon name="question-circle" size="16" color="#f5222d"></b-icon>
        Are you sure delete this item?
      </p>
      <div style="text-align: right; margin-top: 4px">
        <b-button size="mini" type="text" @click="cancel">取消</b-button>
        <b-button type="primary" size="mini" @click="ok">确定</b-button>
      </div>
    </template>
  </b-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message } from 'bin-ui-design'

const visible = ref(false)

function ok() {
  visible.value = false
  Message('点击了 [确定]')
}
function cancel() {
  visible.value = false
  Message('点击了 [取消]')
}
</script>
<template>
  <b-popover v-model:visible="visible" :width="240">
    <b-button type="danger" plain>确认气泡框</b-button>
    <template #content>
      <p>
        <b-icon name="question-circle" size="16" color="#f5222d"></b-icon>
        Are you sure delete this item?
      </p>
      <div style="text-align: right; margin-top: 4px">
        <b-button size="mini" type="text" @click="cancel">取消</b-button>
        <b-button type="primary" size="mini" @click="ok">确定</b-button>
      </div>
    </template>
  </b-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message } from 'bin-ui-design'

const visible = ref(false)

function ok() {
  visible.value = false
  Message('点击了 [确定]')
}
function cancel() {
  visible.value = false
  Message('点击了 [取消]')
}
</script>

Props ​

参数说明类型可选值默认值
trigger触发方式stringhover（悬停）click（点击）focus（聚焦）click
title标题string——
content显示的内容string——
width宽度string/number——
placement提示框出现的位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end—
disabled是否禁用提示框Boolean—false
v-model:visible状态是否可见Boolean—false
placement提示框出现的位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end—
transition自定义渐变动画string—fade-in-linear
show-arrow是否显示箭头Boolean—true
popper-optionspopper.js 参数Object—
show-after延迟出现，单位毫秒number—0
hide-after延迟消失，单位毫秒number—0
auto-closetooltip出现后自动隐藏演示，单位毫秒，为0时不隐藏number—0
manual手动控制模式，true时鼠标进入移出事件不生效Boolean—false
offset出现位置的偏移量Number—0
appendToBody是否将弹层放置于 body 内Boolean—true
options自定义 popper.js 的配置项具体参考popper.jsObject——
z-index层级Number，默认为2000，弹窗会自增，如设置了此值，则会追加当前值后进行自增进行自增—0

Slot ​

名称说明
content提示框的内容，定义此 slot 时，会覆盖 props content。

MIT Licensed | Copyright © 2023-present bin-ui-design