Popover

弹出层组件 / Popover提示框组件

简介

这个组件适用于对组件中某部分进行弹出提示, 比如:

  • 单词点击弹出翻译
  • 点击按钮弹出可选择的操作(和Fab有点类似, 但是Popover可自定义程度高, 但是显示内容建议小于Modal组件)

传入模板的弹出层组件

Popover的实现和Modal组件相似, 都需要传入*.vue模板文件, 具体事例参考usage

子组件如何获取数据

在组件中使用: this.$options.$data 获取传入data. 例如Usage中的示例, 子组件获取data中的contentEle数据这样操作:

this.contentEle = this.$options.$data.contentEle
源码:

传入属性 / Props:

Name Type Attributes Default Description
cssClass String 额外的样式
mode mode <optional>
 'ios' 模式
showBackdrop Boolean <optional>
 true 是否显示backdrop
enableBackdropDismiss Boolean <optional>
 true 点击backdrop是否能关闭组件
dismissOnPageChange Boolean <optional>
 true 页面切换是否关闭组件, 默认关闭
onDismiss function <optional>
 完全关闭时的回调
component Object | String | function | Promise popover内部显示的vue组件, 是一个*.vue文件; 如果是String的话则为html字符串; 支持异步
data Object 传给popover内部显示的vue组件的数据, 内部组件通过`this.$options.$data`获取
ev Object | MouseEvent 点击元素的事件, $event, 这个值的传入可以计算popover放置的位置

用法 / Usages

import { Popover, List, ListHeader, ItemGroup, Item, ItemSliding, ItemOptions, ItemDivider } from 'vimo'
import TextTool from './textTool.vue'
export default{
 methods: {
   openSetting ($event) {
     Popover.present({
       ev: $event,                           // 事件
       component: TextTool,                  // 传入组件
       data: {
         contentEle: this.$refs.content.$el  // 传入数据, 内部通过`this.$options.$data`获取这个data
       }
     })
   },
   specialText ($event, text) {
     Popover.present({
       ev: $event,
       component: `<p style="padding:0 14px;" text-center>You choose the word of <strong>${text}</strong>.</p>`
     })
   }
 },
 components: {Popover, List, ListHeader, ItemGroup, Item, ItemSliding, ItemOptions, ItemDivider}
}