@wines/popover NPM

`@wines/popover`

弹出气泡式的卡片浮层。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "wux-popover",
  "usingComponents": {
    "wux-popover": "@wines/popover"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">Popover</view>
		<view class="page__desc">气泡框</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Placement</view>
		<view class="button-sp-area">
			<wux-popover
			 placement="topLeft"
			 mask
			 title="Title"
			 content="Content"
			>
				<wux-button type="light">topLeft</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area">
			<wux-popover placement="top" title="Title" content="Content">
				<wux-button type="light">top</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area">
			<wux-popover placement="topRight" title="Title" content="Content">
				<wux-button type="light">topRight</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area text-left">
			<wux-popover placement="rightTop" title="Title" content="Content">
				<wux-button type="light">rightTop</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area text-left">
			<wux-popover placement="right" title="Title" content="Content">
				<wux-button type="light">right</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area text-left">
			<wux-popover placement="rightBottom" title="Title" content="Content">
				<wux-button type="light">rightBottom</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area">
			<wux-popover placement="bottomRight" title="Title" content="Content">
				<wux-button type="light">bottomRight</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area">
			<wux-popover placement="bottom" title="Title" content="Content">
				<wux-button type="light">bottom</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area">
			<wux-popover placement="bottomLeft" title="Title" content="Content">
				<wux-button type="light">bottomLeft</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area text-right">
			<wux-popover placement="leftBottom" title="Title" content="Content">
				<wux-button type="light">leftBottom</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area text-right">
			<wux-popover placement="left" title="Title" content="Content">
				<wux-button type="light">left</wux-button>
			</wux-popover>
		</view>
		<view class="button-sp-area text-right">
			<wux-popover placement="leftTop" title="Title" content="Content">
				<wux-button type="light">leftTop</wux-button>
			</wux-popover>
		</view>
		<view class="sub-title">Default Visible</view>
		<view class="button-sp-area text-left">
			<wux-popover
			 defaultVisible
			 placement="rightBottom"
			 title="Title"
			 content="Content"
			>
				<wux-button type="light">rightBottom</wux-button>
			</wux-popover>
		</view>
		<view class="sub-title">Custom style</view>
		<view class="button-sp-area">
			<wux-popover
			 placement="top"
			 title="Title"
			 content="Content"
			 body-style="width: 300px;"
			>
				<wux-button type="light">top</wux-button>
			</wux-popover>
		</view>
		<view class="sub-title">Theme = dark</view>
		<view class="button-sp-area">
			<wux-popover
			 theme="dark"
			 placement="top"
			 title="Title"
			 content="Content"
			>
				<wux-button type="light">top</wux-button>
			</wux-popover>
		</view>
		<view class="sub-title">Slot</view>
		<view class="button-sp-area">
			<wux-popover placement="top">
				<wux-button type="light">top</wux-button>
				<view slot="title" style="padding: 20rpx; color: red;">Title</view>
				<view slot="content" style="padding: 20rpx">Content</view>
			</wux-popover>
		</view>
		<view class="sub-title">Controlled</view>
		<view class="button-sp-area">
			<wux-popover
			 visible="{{ visible }}"
			 controlled
			 placement="top"
			 title="Title"
			 bind:change="onChange"
			>
				<view slot="content" style="padding: 20rpx" bindtap="hide">Close</view>
				<wux-button type="light">top</wux-button>
			</wux-popover>
		</view>
	</view>
</view>

import './index.less';

Page({
  data: {
    visible: false,
  },
  hide() {
    this.setData({
      visible: false,
    });
  },
  onChange(e) {
    console.log('onChange', e);
    this.setData({
      visible: e.detail.visible,
    });
  },
});

API

Popover props

参数	类型	描述	默认值
prefixCls	`string`	自定义类名前缀	wux-popover
classNames	`any`	过渡的类名，更多内置过渡效果请参考 AnimationGroup	wux-animate--fadeIn
theme	`string`	气泡框主题，可选值为 light、dark	light
title	`string`	提示标题	-
content	`string`	提示内容	-
bodyStyle	`string,object`	自定义样式	-
defaultVisible	`boolean`	默认是否显隐，当 `controlled` 为 `false` 时才生效	false
placement	`string`	气泡框位置，可选值为 top、left、right、bottom、topLeft、topRight、bottomLeft、bottomRight、leftTop、leftBottom、rightTop、rightBottom	top
trigger	`string`	触发行为，可选值为 click	click
visible	`boolean`	用于手动控制浮层显隐，当 `controlled` 为 `true` 时才生效	false
controlled	`boolean`	是否受控说明文档	false
mask	`boolean`	是否显示蒙层	false
maskClosable	`boolean`	点击蒙层是否允许关闭	true
bind:change	`function`	显示隐藏的回调函数	-