Minimalist UI

Popover 气泡卡片

引入组件

<template>
  <m-popover>
    <template v-slot:content>
      <p>这虽然是游戏，但可不是闹着玩的</p>
    </template>
    <m-button :options="{shape: 'rounded'}">Click Me</m-button>
  </m-popover>
  <m-popover trigger="hover">
    <template v-slot:content>
      <p>这味道……是说谎的味道</p>
    </template>
    <m-button :options="{shape: 'rounded', color: 'red'}">Hover Me</m-button>
  </m-popover>
</template>

<script>
  import { MPopover, MButton } from "@csr/m_ui";
  export default { 
    components: {
      MPopover,
      MButton
    }
  }
</script>

基础用法

Click Me Hover Me
代码
<m-popover>
  <template v-slot:content>
    <p>这虽然是游戏，但可不是闹着玩的</p>
  </template>
  <m-button :options="{shape: 'rounded'}">Click Me</m-button>
</m-popover>
<m-popover trigger="hover">
  <template v-slot:content>
    <p>这味道……是说谎的味道</p>
  </template>
  <m-button :options="{shape: 'rounded', color: 'red'}">Hover Me</m-button>
</m-popover>

不同方向

Hover Me Hover Me Hover Me Hover Me
代码
<m-popover trigger="hover">
  <template v-slot:content>
    <p>这虽然是游戏，但可不是闹着玩的</p>
  </template>
  <m-button :options="{shape: 'rounded'}">Hover Me</m-button>
</m-popover>
<m-popover trigger="hover" position="left">
  <template v-slot:content>
    <p>这味道……是说谎的味道</p>
  </template>
  <m-button :options="{shape: 'rounded', color: 'red'}">Hover Me</m-button>
</m-popover>
<m-popover trigger="hover" position="right">
  <template v-slot:content>
    <p>锵锵锵！冲击性的事实！</p>
  </template>
  <m-button :options="{shape: 'rounded', color: 'blue'}">Hover Me</m-button>
</m-popover>
<m-popover trigger="hover" position="bottom">
  <template v-slot:content>
    <p>我自始至终都是最佳状态</p>
  </template>
  <m-button :options="{shape: 'rounded', color: 'green'}">Hover Me</m-button>
</m-popover>

在气泡里关闭

Hover Me
代码
<m-popover trigger="hover">
  <template v-slot:content="slotProps">
    <p>这虽然是游戏，但可不是闹着玩的</p>
    <m-button @click="slotProps.close">关闭</m-button>
  </template>
  <m-button :options="{shape: 'rounded'}">Hover Me</m-button>
</m-popover>

API

属性说明类型默认值
position 气泡出现位置，可选值：top（上），left（左），right（右），bottom（下） string top
trigger 触发气泡出现方式，可选值：click（点击），hover（鼠标悬停） string click
maxWidth 气泡最大宽度，单位像素，传入的时候需要加上单位px string
mountPosition 气泡挂载元素的class名 string

事件

事件名 说明 回调参数
open 气泡出现时触发
close 气泡消失时触发

← Dialog 对话框 →