diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md index 40abfde06..8916ac483 100644 --- a/src/popover/README.zh-CN.md +++ b/src/popover/README.zh-CN.md @@ -2,6 +2,8 @@ ### 介绍 +弹出式的气泡菜单。 + ### 引入 ```js @@ -15,8 +17,136 @@ Vue.use(Popover); ### 基础用法 -```html +当 Popover 弹出时,会基于 `reference` 插槽的内容进行定位。 +```html + + + +``` + +```js +export default { + data() { + return { + showPopover: false, + // 通过 actions 属性来定义菜单选项 + actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }], + }; + }, +}; +``` + +### 深色风格 + +Popover 支持浅色和深色两种风格,默认为浅色风格,将 `theme` 属性设置为 `dark` 可切换为深色风格。 + +```html + + + +``` + +```js +export default { + data() { + return { + showPopover: false, + actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }], + }; + }, +}; +``` + +### 展示图标 + +在 `actions` 数组中,可以通过 `icon` 字段来定义选项的图标,支持传入[图标名称](#/zh-CN/icon)或图片链接。 + +```html + + + +``` + +```js +export default { + data() { + return { + showPopover: false, + actions: [ + { text: '选项一', icon: 'add-o' }, + { text: '选项二', icon: 'music-o' }, + { text: '选项三', icon: 'more-o' }, + ], + }; + }, +}; +``` + +### 禁用选项 + +在 `actions` 数组中,可以通过 `disabled` 字段来禁用某个选项。 + +```html + + + +``` + +```js +export default { + data() { + return { + showPopover: false, + actions: [ + { text: '选项一', disabled: true }, + { text: '选项二', disabled: true }, + { text: '选项三' }, + ], + }; + }, +}; +``` + +### 弹出位置 + +通过 `placement` 属性来控制气泡的弹出位置。 + +```html + +``` + +`placement` 支持以下值: + +```bash +top # 顶部中间位置 +top-start # 顶部左侧位置 +top-end # 顶部右侧位置 +left # 左侧中间位置 +left-start # 左侧上方位置 +left-end # 左侧下方位置 +right # 右侧中间位置 +right-start # 右侧上方位置 +right-end # 右侧下方位置 +bottom # 底部中间位置 +bottom-start # 底部左侧位置 +bottom-end # 底部右侧位置 ``` ## API @@ -27,12 +157,12 @@ Vue.use(Popover); | --- | --- | --- | --- | | v-model | 是否展示气泡弹出层 | _boolean_ | `false` | | actions | 选项列表 | _Action[]_ | `[]` | -| placement | 弹出位置 | _string_ | - | +| placement | 弹出位置 | _string_ | `bottom` | | theme | 主题风格,可选值为 `dark` | _string_ | `light` | | overlay | 是否显示遮罩层 | _boolean_ | `false` | | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` | | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` | -| get-container `v2.4.4` | 指定挂载的节点,[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` | +| get-container | 指定挂载的节点,[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` | ### Action 数据结构 diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue index a5710dbbf..0d52daa8d 100644 --- a/src/popover/demo/index.vue +++ b/src/popover/demo/index.vue @@ -17,7 +17,6 @@ v-model="show.darkTheme" theme="dark" :actions="t('actions')" - placement="bottom" style="margin-left: 16px;" > @@ -118,6 +116,7 @@ export default { lightTheme: '浅色风格', showPopover: '点击弹出气泡', actionOptions: '选项配置', + disableAction: '禁用选项', choosePlacement: '选择弹出位置', }, 'en-US': { @@ -143,6 +142,7 @@ export default { lightTheme: 'Light Theme', showPopover: 'Show Popover', actionOptions: 'Action Options', + disableAction: 'Disable Action', choosePlacement: 'Choose Placement', }, }, @@ -150,11 +150,11 @@ export default { data() { return { show: { - disabled: false, showIcon: false, placement: false, darkTheme: false, lightTheme: false, + disableAction: false, }, showPicker: false, currentPlacement: '', @@ -192,8 +192,6 @@ export default { @import '../../style/var'; .demo-popover { - min-height: 200vh; - &-refer { width: 60px; height: 60px; diff --git a/src/popover/index.js b/src/popover/index.js index facc4eb6c..d07482f1f 100644 --- a/src/popover/index.js +++ b/src/popover/index.js @@ -23,7 +23,6 @@ export default createComponent({ props: { value: Boolean, overlay: Boolean, - placement: String, textColor: String, backgroundColor: String, offset: { @@ -38,6 +37,10 @@ export default createComponent({ type: Array, default: () => [], }, + placement: { + type: String, + default: 'bottom', + }, getContainer: { type: [String, Function], default: 'body',