blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Popover): support config action color (#8049)

Browse Source
This commit is contained in:
neverland 2021-01-31 18:36:11 +08:00 committed by GitHub
parent 94b9e3981c
commit d27626ada2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/popover/README.md
View File

@ -221,6 +221,7 @@ export default {
| --------- | ----------------------- | --------------------------- |
| text | Action Text | _string_ |
| icon | Icon | _string_ |
| color | Action Color | _string_ |
| disabled | Whether to be disabled | _boolean_ |
| className | className of the option | _string \| Array \| object_ |

1
src/popover/README.zh-CN.md
View File

@ -237,6 +237,7 @@ export default {
| --- | --- | --- |
| text | 选项文字 | _string_ |
| icon | 文字左侧的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ |
| color | 选项文字颜色 | _string_ |
| disabled | 是否为禁用状态 | _boolean_ |
| className | 为对应选项添加额外的类名 | _string \| Array \| object_ |

3
src/popover/index.js
View File

@ -124,11 +124,12 @@ export default createComponent({
};
const renderAction = (action, index) => {
const { icon, text, disabled, className } = action;
const { icon, text, color, disabled, className } = action;
return (
<div
role="menuitem"
class={[bem('action', { disabled, 'with-icon': icon }), className]}
style={{ color }}
onClick={() => onClickAction(action, index)}
>
{icon && <Icon name={icon} class={bem('action-icon')} />}

6
src/popover/test/__snapshots__/index.spec.js.snap
View File

@ -17,7 +17,7 @@ exports[`should locate to reference element when showed 1`] = `
exports[`should locate to reference element when showed 2`] = `
<transition-stub>
<div style="z-index: 2006; position: absolute; left: 0px; top: 8px; margin: 0px;"
<div style="z-index: 2007; position: absolute; left: 0px; top: 8px; margin: 0px;"
class="van-popup van-popover van-popover--light"
data-popper-placement="bottom"
>
@ -33,7 +33,7 @@ exports[`should locate to reference element when showed 2`] = `
exports[`should locate to reference element when showed 3`] = `
<transition-stub>
<div style="z-index: 2006; display: none;"
<div style="z-index: 2007; display: none;"
class="van-popup van-popover van-popover--light"
>
<div class="van-popover__arrow">
@ -48,7 +48,7 @@ exports[`should locate to reference element when showed 3`] = `
exports[`should watch placement prop and update location 1`] = `
<transition-stub>
<div style="z-index: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;"
<div style="z-index: 2008; position: absolute; left: 0px; top: -8px; margin: 0px;"
class="van-popup van-popover van-popover--light"
data-popper-placement="top"
>

14
src/popover/test/index.spec.js
View File

@ -82,6 +82,20 @@ test('should allow to custom the className of action', () => {
expect(wrapper.find('.van-popover__action').html()).toMatchSnapshot();
});
test('should allow to custom the color of action test', () => {
const wrapper = mount(Popover, {
props: {
show: true,
teleport: null,
actions: [{ text: 'Option', color: 'red' }],
},
});
expect(wrapper.find('.van-popover__action').element.style.color).toEqual(
'red'
);
});
test('should locate to reference element when showed', async () => {
const root = document.createElement('div');
const wrapper = mount(Popover, {