Rainui

Appearance

r-popover ​

r-popover 气泡弹出框，弹出式的气泡菜单。

示例 ​

vue
<template>
  <r-config-provider>
    <view style="padding: 20rpx" @click="hide">
      <r-divider content-position="left">基本使用</r-divider>
      <r-popover
        v-model:show="showPopover"
        placement="bottom-start"
        :actions="actions"
      >
        <template #reference>
          <r-button type="primary">浅色风格</r-button>
        </template>
      </r-popover>

      <r-divider content-position="left">深色风格</r-divider>

      <r-popover
        v-model:show="showPopover2"
        placement="bottom-start"
        theme="dark"
        :actions="actions"
      >
        <template #reference>
          <r-button type="primary">深色风格</r-button>
        </template>
      </r-popover>

      <r-divider content-position="left">水平排列</r-divider>
      <r-popover
        v-model:show="showPopover3"
        :actions="actions"
        actions-direction="horizontal"
        placement="bottom-start"
      >
        <template #reference>
          <r-button type="primary">水平排列</r-button>
        </template>
      </r-popover>

      <r-divider content-position="left">弹出位置</r-divider>
      <r-cell-group inset>
        <r-cell title="弹出位置" is-link @click="popupShow = true"></r-cell>
      </r-cell-group>
      <r-divider content-position="left">展示图标</r-divider>
      <r-popover
        v-model:show="showPopover4"
        placement="bottom-start"
        :actions="actions2"
      >
        <template #reference>
          <r-button type="primary">展示图标</r-button>
        </template>
      </r-popover>

      <r-divider content-position="left">禁用选项</r-divider>

      <r-popover
        v-model:show="showPopover5"
        placement="bottom-start"
        :actions="actions3"
      >
        <template #reference>
          <r-button type="primary">禁用选项</r-button>
        </template>
      </r-popover>

      <r-divider content-position="left">自定义内容</r-divider>
      <r-popover placement="top-start" v-model:show="showPopover6">
        <r-image
          src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"
          width="200px"
          height="200px"
          mode="scaleToFill"
        ></r-image>
        <template #reference>
          <r-button type="primary">自定义内容</r-button>
        </template>
      </r-popover>
    </view>

    <r-popup v-model:show="popupShow" round position="center">
      <view
        style="
          height: calc(100vh - var(--r-padding-xs) - var(--r-padding-xs));
          width: calc(100vw - var(--r-padding-xs) - var(--r-padding-xs));
          background-color: #fff;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 12px;
          position: relative;
        "
      >
        <view style="position: absolute; right: 10px; top: 10px">
          <r-icon name="cross" @click="popupShow = false"></r-icon>
        </view>

        <r-popover
          v-model:show="showPopover7"
          theme="dark"
          :actions="actions4"
          @select="onSelect"
          :placement="position"
        >
          <template #reference>
            <r-button type="primary">弹出位置</r-button>
          </template>
        </r-popover>
      </view>
    </r-popup>
  </r-config-provider>
</template>

<script setup>
import { ref, computed } from "vue";
const position = ref("bottom");
const chooseValue = ref("bottom");
const popupShow = ref(false);
const showPopover = ref(false);
const showPopover2 = ref(false);
const showPopover3 = ref(false);
const showPopover4 = ref(false);
const showPopover5 = ref(false);
const showPopover6 = ref(false);
const showPopover7 = ref(false);
const hide = () => {
  showPopover.value = false;
  showPopover2.value = false;
  showPopover3.value = false;
  showPopover4.value = false;
  showPopover5.value = false;
  showPopover6.value = false;
  showPopover7.value = false;
};
// 通过 actions 属性来定义菜单选项
const actions = ref([
  { text: "选项一" },
  { text: "选项二" },
  { text: "选项三" },
]);

const actions2 = ref([
  { text: "选项一", icon: "add-o" },
  { text: "选项二", icon: "music-o" },
  { text: "选项三", icon: "more-o" },
]);
const actions3 = ref([
  { text: "选项一", disabled: true },
  { text: "选项二", disabled: true },
  { text: "选项三" },
]);
const actions4 = computed(() => {
  let base = [
    {
      text: "top-start",
      value: "top",
    },
    {
      text: "top",
      value: "top",
    },
    {
      text: "top-end",
      value: "top",
    },

    {
      text: "bottom-start",
      value: "bottom",
    },
    {
      text: "bottom",
      value: "bottom",
    },
    {
      text: "bottom-end",
      value: "bottom",
    },
    {
      text: "left-start",
      value: "left",
    },
    {
      text: "left",
      value: "left",
    },
    {
      text: "left-end",
      value: "left",
    },
    {
      text: "right-start",
      value: "right",
    },
    {
      text: "right",
      value: "right",
    },
    {
      text: "right-end",
      value: "right",
    },
  ];

  return base.filter((t) => t.text == t.value || t.value == chooseValue.value);
});

const onSelect = (action) => {
  position.value = action.text;
  chooseValue.value = action.value;
  console.log(action.text);
};
</script>

API ​

Props ​

名称说明类型默认值可选值
show是否展示气泡弹出层Booleanfalsetrue
actions选项列表(具体参数见下表)Array[]
actionsDirection选项列表的排列方向Stringverticalhorizontal
placement弹出位置Stringbottomtop top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end
theme主题风格Stringlightdark
duration动画时长，单位(ms)Number300
showArrow是否展示小箭头Booleantruefalse
closeOnClickAction是否在点击选项后关闭Booleantruefalse
iconPrefix图标类名前缀,等同于 r-icon 组件的prefix 属性Stringvan-iconiconfont
zIndex层级Number2000
gap弹出框与内容之间的距离String8rpx
themeNamer-theme 主题名称Stringdefault

PopoverAction 数据结构 ​

名称说明类型
text选项文字String
icon文字左侧的图标等同于 r-icon 组件的 name 属性String
color选项文字颜色String
disabled是否为禁用状态Boolean
className为对应选项添加额外的类名String

Events ​

名称说明参数
select点击选项时触发action,index
open打开菜单时触发
close关闭菜单时触发
opened打开菜单且动画结束后触发
closed关闭菜单且动画结束后触发
update:show显隐状态改变时触发show

Slots ​

名称说明参数
default自定义菜单内容
reference触发 Popover 显示的元素内容
action自定义选项内容

IMPORTANT

该组件未实现点击外部元素后关闭菜单，需自行在外层盒子上添加事件处理

更多组件，请前往rainui