BIN-UI-DESIGN

Appearance

On this page

弹层 Popper ​

popper借助了第三方插件popper.js，可参考文档进行配置，组件内部弹层都借助此基础组件实现，你也可以自行编写扩展。

基础用法 ​

<template>
  <div style="width: 200px">
    <b-popper trigger="click" theme="light" :z-index="1000">
      <template #default>这是一段内容这是一段内容这是一段内容</template>
      <template #trigger>
        <b-button>触发popper</b-button>
      </template>
    </b-popper>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(false)
</script>
<template>
  <div style="width: 200px">
    <b-popper trigger="click" theme="light" :z-index="1000">
      <template #default>这是一段内容这是一段内容这是一段内容</template>
      <template #trigger>
        <b-button>触发popper</b-button>
      </template>
    </b-popper>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(false)
</script>

选择列 ​

[
  {
    "name": "姓名",
    "checked": false
  },
  {
    "name": "年龄",
    "checked": false
  },
  {
    "name": "电话",
    "checked": false
  },
  {
    "name": "性别",
    "checked": false
  },
  {
    "name": "地址",
    "checked": false
  },
  {
    "name": "备注",
    "checked": false
  }
]
<template>
  <div>
    <div style="width: 200px">
      <b-popper
        trigger="click"
        theme="light"
        :show-arrow="false"
        :offset="4"
        placement="bottom-start"
        transition="zoom-in-top"
        popper-class="bin-select__popper"
        :gpu-acceleration="false"
      >
        <template #default>
          <div style="width: 120px">
            <div style="padding: 8px 10px 10px; border-bottom: 1px solid #eee">选择列</div>
            <div v-for="(item, index) in list" :key="index" style="padding: 4px 8px">
              <b-checkbox v-model="item.checked">{{ item.name }}</b-checkbox>
            </div>
          </div>
        </template>
        <template #trigger>
          <b-button>选择列</b-button>
        </template>
      </b-popper>
    </div>

    <pre>{{ list }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
  { name: '姓名', checked: false },
  { name: '年龄', checked: false },
  { name: '电话', checked: false },
  { name: '性别', checked: false },
  { name: '地址', checked: false },
  { name: '备注', checked: false }
])
</script>
<template>
  <div>
    <div style="width: 200px">
      <b-popper
        trigger="click"
        theme="light"
        :show-arrow="false"
        :offset="4"
        placement="bottom-start"
        transition="zoom-in-top"
        popper-class="bin-select__popper"
        :gpu-acceleration="false"
      >
        <template #default>
          <div style="width: 120px">
            <div style="padding: 8px 10px 10px; border-bottom: 1px solid #eee">选择列</div>
            <div v-for="(item, index) in list" :key="index" style="padding: 4px 8px">
              <b-checkbox v-model="item.checked">{{ item.name }}</b-checkbox>
            </div>
          </div>
        </template>
        <template #trigger>
          <b-button>选择列</b-button>
        </template>
      </b-popper>
    </div>

    <pre>{{ list }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
  { name: '姓名', checked: false },
  { name: '年龄', checked: false },
  { name: '电话', checked: false },
  { name: '性别', checked: false },
  { name: '地址', checked: false },
  { name: '备注', checked: false }
])
</script>

Props ​

参数说明类型可选值默认值
v-model:visible状态是否可见Boolean—false
trigger触发方式stringhover（悬停）click（点击）focus（聚焦）click
appendToBody是否将弹层放置于 body 内Boolean—false
placement提示框出现的位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end—
disabled是否禁用提示框Boolean—false
transition自定义渐变动画，自定义动画后需要关闭硬件加速，否则不生效string—fade-in-linear
gpu-accelerationgpu加速，默认动画，Boolean—true
stop-popper-mouse-event是否阻止popper的mouse事件Boolean—true
show-arrow是否显示箭头Boolean—true
manual-mode是否是手动控制，手动控制后需要设置:visibleBoolean—true
theme主题stringdark 或 lightdark
show-after延迟出现，单位毫秒number—0
close-delay延迟消失，单位毫秒number—0
offset出现位置的偏移量Number—12
arrow-offset箭头偏移Number—5
class触发器classstring——
popper-class弹层的额外classstring——
popper-options弹层的额外options，可参考官网，一般不需要额外设置Object——
z-index层级Number，默认为2000，弹窗会自增，如设置了此值，则会追加当前值后进行自增进行自增—0
style弹层的styleObject——

Slot ​

名称说明
default弹层内容插槽，必须，可扩展很多业务实现
trigger触发插槽，必须，切必须使用一个dom 或者 component组件插入，因为要监听事件

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