嘟嘟云A sass ui框架

# Popover 弹出框

# 基础用法

  • Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
  • trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。
  • 对width进行了改进，如果传输的是number或者string值为50那么会自动拼上px单位。如果携带了px % em rem的字符串则是直接使用
hover 激活 click 激活 自定义宽度 手动激活
<template>
  <db-popover
    placement="top-start"
    width="200"
    trigger="hover"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <db-button slot="reference">hover 激活</db-button>
  </db-popover>

  <db-popover
    placement="bottom"
    width="200"
    trigger="click"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <db-button slot="reference">click 激活</db-button>
  </db-popover>

  <db-popover
    ref="popover"
    placement="right"
    width="20em"
    trigger="focus"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
  </db-popover>
  <db-button v-popover:popover>自定义宽度</db-button>

  <db-popover
    placement="bottom"
    width="200"
    trigger="manual"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
    v-model="visible">
    <db-button slot="reference" @click="visible = !visible">手动激活</db-button>
  </db-popover>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    }
  };
</script>
Expand Copy

# 嵌套信息

  • 可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。
  • 利用分发取代content属性
click 激活
<db-popover
  placement="right"
  width="50%"
  trigger="click">
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :show-pagination="false"
  />
  <db-button slot="reference">click 激活</db-button>
</db-popover>

<script>
  export default {
    data() {
      return {
        tableList: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        ],
        tableColumns: [
          {
            key: 'date',
            label: '时间'
          },
          {
            key: 'name',
            label: '昵称'
          },
          {
            key: 'address',
            label: '地址'
          }
        ]
      };
    }
  };
</script>
Expand Copy

# 嵌套操作

  • 将show-aciton值为true才会显示操作栏，默认会展示取消和确定

  • 当前您也可以定义slot的name为aciton。自定义插槽

  • 您也可以通过confirmText设定确定文本，通过cancelText设定取消文本。通过showConfirm和showCancel分别指定是否显示默认都为true

  • 您可以通过指定:beforeConfirm来设置确定前置操作，通过:beforeCancel设定取消前置操作。function返回false则不会自动关闭

  • 通过设置type属性来决定icon，也可以通过icon属性来自定义

这是一段内容确定删除吗？
删除
这是一段内容确定删除吗？
自定义确定
自定义插槽
<db-popover
  placement="top"
  type="warning"
  show-aciton
  v-model="visible">
  <div>这是一段内容确定删除吗？</div>
  <db-button slot="reference">删除</db-button>
</db-popover>

<db-popover
  placement="top"
  type="warning"
  show-aciton
  v-model="visible2">
  <div>这是一段内容确定删除吗？</div>
  <div style="text-align: right; margin: 0" slot="action">
    <db-button type="text" size="mini" @click="visible2 = false">自定义确定</db-button>
  </div>
  <db-button slot="reference">自定义插槽</db-button>
</db-popover>

<script>
  export default {
    data() {
      return {
        visible: false,
        visible2: false
      };
    }
  }
</script>
Expand Copy

# 指令触发

  • 通过指令的方式我们也可以轻松的实现，v-db_popover的:后参数为触发条件，值必须是一个Object。通过修改原型的方式，他可以传入当前该组件所有能实现的功能。
<template>
  <higher-table
    :list="tableList"
    :columns="tableColumns"
    :table-load="tableLoad"
    :options="options"
    ref="multipleTable"
    action-width="200px"
  >
    <template v-slot:action="{ scope }">
      <db-button type="text" v-db_popover:click="{
        content: '确定要关闭该功能吗？',
        type: 'warning',
        showAciton: true,
        confirm: () => del(scope)
      }">删除</db-button>
    </template>
  </higher-table>
</template>

<script>
export default {
  computed: {
    tableColumns() {
      return [
        {
          key: "id",
          label: "id",
        },
        {
          key: "name",
          label: "昵称",
        },
        {
          key: "date",
          label: "时间",
        },
        {
          key: "email",
          label: "邮箱",
        },
        {
          key: "content",
          label: "内容",
        },
      ];
    },
  },
  methods: {
    del({ row }) {
      const i = this.tableList.findIndex(item => row.id === item.id)
      if(i > -1) this.tableList.splice(i, 1)
      this.$db_message.success('id: ' + row.id + ' 删除成功！')
    },
  },
  data() {
    // 数据
    return {
      show: true,
      align: "center",
      tableList: [
        {
          id: "1",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        }, 
        {
          id: "2",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        }, 
        {
          id: "3",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },
        {
          id: "4",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        },{
          id: "5",
          name: null,
          date: "2012-07-11",
          email: "1247930@qq.com",
          content: "打工人，打工魂。打工都是人上人！",
        }
      ],
      tableLoad: false,
      options: {
        pageSize: 10,
        currentPage: 1,
        total: 300,
      }
    };
  },
};
</script>
<style>
table {
  margin: 0;
}
</style>
Expand Copy

# Attributes

参数 说明 类型 可选值 默认值
trigger 触发方式 String click/focus/hover/manual click
title 标题 String — —
content 显示的内容，也可以通过 slot 传入 DOM String — —
width 宽度 String, Number — 最小宽度 150px
placement 出现位置 String top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end bottom
disabled Popover 是否可用 Boolean — false
value / v-model 状态是否可见 Boolean — false
offset 出现位置的偏移量 Number — 0
transition 定义渐变动画 String — fade-in-linear
visible-arrow 是否显示 Tooltip 箭头，更多参数可见Vue-popper (opens new window) Boolean — true
popper-options popper.js (opens new window) 的参数 Object 参考 popper.js (opens new window) 文档 { boundariesElement: 'body', gpuAcceleration: false }
popper-class 为 popper 添加类名 String — —
open-delay 触发方式为 hover 时的显示延迟，单位为毫秒 Number — —
close-delay 触发方式为 hover 时的隐藏延迟，单位为毫秒 number — 200
tabindex Popover 组件的 tabindex (opens new window) number — 0
confirmText 确定文本 String — 确定
cancelText 取消文本 String — 取消
showConfirm 显示确定 Boolean — true
showCancel 显示取消 Boolean — true
beforeConfirm 确定按钮前置触发 Function — -
beforeCancel 取消按钮前置触发
Function — -
customContent 自定义内容样式 Boolean — false
type 显示类型 String success/error/warning/primary -
icon 显示图标 String — -
maxNumber 最大内容隐藏 Number — -
show 显示时触发 Function — -
after-enter 显示动画播放完毕后触发 Function — -
hide 隐藏时触发 Function — -
after-leave 隐藏动画播放完毕后触发 Function — -
cancel 取消按钮触发 Function — -
confirm 确定按钮触发 Function — -
confirmType 设置确定按钮类型 text — -
cancelType 设置取消按钮类型 text — -

# Slot

参数 说明
— Popover 内嵌 HTML 文本
reference 触发 Popover 显示的 HTML 元素
action 操作栏插槽

# Events

事件名称 说明 回调参数
show 显示时触发 —
after-enter 显示动画播放完毕后触发 —
hide 隐藏时触发 —
after-leave 隐藏动画播放完毕后触发 —

← 空占位 empty →