mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat(ActionSheet): add icon support to the actions data (#12671)
This commit is contained in:
Gavin
GitHub
parent
a9201b24db
commit
a4bb0a3aaa
@ -20,6 +20,7 @@ import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
|
||||
const [name, bem] = createNamespace('action-sheet');
|
||||
|
||||
export type ActionSheetAction = {
|
||||
icon?: string;
|
||||
name?: string;
|
||||
color?: string;
|
||||
subname?: string;
|
||||
@ -94,6 +95,12 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
const renderIcon = (action: ActionSheetAction) => {
|
||||
if (action.icon) {
|
||||
return <Icon class={bem('item-icon')} name={action.icon} />;
|
||||
}
|
||||
};
|
||||
|
||||
const renderActionContent = (action: ActionSheetAction, index: number) => {
|
||||
if (action.loading) {
|
||||
return <Loading class={bem('loading-icon')} />;
|
||||
@ -135,6 +142,7 @@ export default defineComponent({
|
||||
class={[bem('item', { loading, disabled }), className]}
|
||||
onClick={onClick}
|
||||
>
|
||||
{renderIcon(action)}
|
||||
{renderActionContent(action, index)}
|
||||
</button>
|
||||
);
|
||||
|
||||
@ -53,6 +53,41 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Show Icon
|
||||
|
||||
Use the `icon` field of `actions` to set the icon for the option.
|
||||
|
||||
```html
|
||||
<van-cell is-link title="Show Icon" @click="show = true" />
|
||||
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const show = ref(false);
|
||||
const actions = [
|
||||
{ name: 'Option 1', icon: 'cart-o' },
|
||||
{ name: 'Option 2', icon: 'shop-o' },
|
||||
{ name: 'Option 3', icon: 'star-o' },
|
||||
];
|
||||
const onSelect = (item) => {
|
||||
show.value = false;
|
||||
showToast(item.name);
|
||||
};
|
||||
|
||||
return {
|
||||
show,
|
||||
actions,
|
||||
onSelect,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Show Cancel Button
|
||||
|
||||
```html
|
||||
@ -195,15 +230,16 @@ export default {
|
||||
|
||||
### Data Structure of ActionSheetAction
|
||||
|
||||
| Key | Description | Type |
|
||||
| --------- | ------------------------------- | --------------------------- |
|
||||
| name | Title | _string_ |
|
||||
| subname | Subtitle | _string_ |
|
||||
| color | Text color | _string_ |
|
||||
| className | className for the option | _string \| Array \| object_ |
|
||||
| loading | Whether to be loading status | _boolean_ |
|
||||
| disabled | Whether to be disabled | _boolean_ |
|
||||
| callback | Callback function after clicked | _action: ActionSheetAction_ |
|
||||
| Key | Description | Type |
|
||||
| --- | --- | --- |
|
||||
| name | Title | _string_ |
|
||||
| subname | Subtitle | _string_ |
|
||||
| color | Text color | _string_ |
|
||||
| icon `v4.8.6` | Icon name or URL | _string_ |
|
||||
| className | className for the option | _string \| Array \| object_ |
|
||||
| loading | Whether to be loading status | _boolean_ |
|
||||
| disabled | Whether to be disabled | _boolean_ |
|
||||
| callback | Callback function after clicked | _action: ActionSheetAction_ |
|
||||
|
||||
### Events
|
||||
|
||||
@ -253,6 +289,8 @@ The component provides the following CSS variables, which can be used to customi
|
||||
| --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
|
||||
| --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |
|
||||
| --van-action-sheet-item-disabled-text-color | _var(--van-text-color-3)_ | - |
|
||||
| --van-action-sheet-item-icon-size | _18px_ | - |
|
||||
| --van-action-sheet-item-icon-margin-right | _var(--van-padding-xs)_ | - |
|
||||
| --van-action-sheet-subname-color | _var(--van-text-color-2)_ | - |
|
||||
| --van-action-sheet-subname-font-size | _var(--van-font-size-sm)_ | - |
|
||||
| --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - |
|
||||
|
||||
@ -55,6 +55,41 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 展示图标
|
||||
|
||||
使用 `actions` 的 `icon` 字段可以为选项设置图标。
|
||||
|
||||
```html
|
||||
<van-cell is-link title="展示图标" @click="show = true" />
|
||||
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const show = ref(false);
|
||||
const actions = [
|
||||
{ name: '选项一', icon: 'cart-o' },
|
||||
{ name: '选项二', icon: 'shop-o' },
|
||||
{ name: '选项三', icon: 'star-o' },
|
||||
];
|
||||
const onSelect = (item) => {
|
||||
show.value = false;
|
||||
showToast(item.name);
|
||||
};
|
||||
|
||||
return {
|
||||
show,
|
||||
actions,
|
||||
onSelect,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 展示取消按钮
|
||||
|
||||
设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
|
||||
@ -207,15 +242,16 @@ export default {
|
||||
|
||||
`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --------- | ------------------------ | --------------------------- |
|
||||
| name | 标题 | _string_ |
|
||||
| subname | 二级标题 | _string_ |
|
||||
| color | 选项文字颜色 | _string_ |
|
||||
| className | 为对应列添加额外的 class | _string \| Array \| object_ |
|
||||
| loading | 是否为加载状态 | _boolean_ |
|
||||
| disabled | 是否为禁用状态 | _boolean_ |
|
||||
| callback | 点击时触发的回调函数 | _action: ActionSheetAction_ |
|
||||
| 键名 | 说明 | 类型 |
|
||||
| ------------- | ------------------------ | --------------------------- |
|
||||
| name | 标题 | _string_ |
|
||||
| subname | 二级标题 | _string_ |
|
||||
| color | 选项文字颜色 | _string_ |
|
||||
| icon `v4.8.6` | 选项图标名称或图片链接 | _string_ |
|
||||
| className | 为对应列添加额外的 class | _string \| Array \| object_ |
|
||||
| loading | 是否为加载状态 | _boolean_ |
|
||||
| disabled | 是否为禁用状态 | _boolean_ |
|
||||
| callback | 点击时触发的回调函数 | _action: ActionSheetAction_ |
|
||||
|
||||
### Events
|
||||
|
||||
@ -265,6 +301,8 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
|
||||
| --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
|
||||
| --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |
|
||||
| --van-action-sheet-item-disabled-text-color | _var(--van-text-color-3)_ | - |
|
||||
| --van-action-sheet-item-icon-size | _18px_ | - |
|
||||
| --van-action-sheet-item-icon-margin-right | _var(--van-padding-xs)_ | - |
|
||||
| --van-action-sheet-subname-color | _var(--van-text-color-2)_ | - |
|
||||
| --van-action-sheet-subname-font-size | _var(--van-font-size-sm)_ | - |
|
||||
| --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - |
|
||||
|
||||
@ -11,6 +11,7 @@ const t = useTranslate({
|
||||
option2: '选项二',
|
||||
option3: '选项三',
|
||||
subname: '描述信息',
|
||||
showIcon: '展示图标',
|
||||
showCancel: '展示取消按钮',
|
||||
buttonText: '弹出菜单',
|
||||
customPanel: '自定义面板',
|
||||
@ -25,6 +26,7 @@ const t = useTranslate({
|
||||
option2: 'Option 2',
|
||||
option3: 'Option 3',
|
||||
subname: 'Description',
|
||||
showIcon: 'Show Icon',
|
||||
showCancel: 'Show Cancel Button',
|
||||
buttonText: 'Show ActionSheet',
|
||||
customPanel: 'Custom Panel',
|
||||
@ -36,6 +38,7 @@ const t = useTranslate({
|
||||
},
|
||||
});
|
||||
const showBasic = ref(false);
|
||||
const showIcon = ref(false);
|
||||
const showCancel = ref(false);
|
||||
const showTitle = ref(false);
|
||||
const showStatus = ref(false);
|
||||
@ -47,6 +50,12 @@ const simpleActions = computed<ActionSheetAction[]>(() => [
|
||||
{ name: t('option3') },
|
||||
]);
|
||||
|
||||
const iconActions = computed<ActionSheetAction[]>(() => [
|
||||
{ name: t('option1'), icon: 'cart-o' },
|
||||
{ name: t('option2'), icon: 'shop-o' },
|
||||
{ name: t('option3'), icon: 'star-o' },
|
||||
]);
|
||||
|
||||
const statusActions = computed<ActionSheetAction[]>(() => [
|
||||
{ name: t('coloredOption'), color: '#ee0a24' },
|
||||
{ name: t('disabledOption'), disabled: true },
|
||||
@ -64,12 +73,18 @@ const onSelect = (item: ActionSheetAction) => {
|
||||
showToast(item.name);
|
||||
};
|
||||
|
||||
const onSelectIcon = (item: ActionSheetAction) => {
|
||||
showIcon.value = false;
|
||||
showToast(item.name);
|
||||
};
|
||||
|
||||
const onCancel = () => showToast(t('cancel'));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('basicUsage')" @click="showBasic = true" />
|
||||
<van-cell is-link :title="t('showIcon')" @click="showIcon = true" />
|
||||
<van-cell is-link :title="t('showCancel')" @click="showCancel = true" />
|
||||
<van-cell
|
||||
is-link
|
||||
@ -92,6 +107,12 @@ const onCancel = () => showToast(t('cancel'));
|
||||
@select="onSelect"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model:show="showIcon"
|
||||
:actions="iconActions"
|
||||
@select="onSelectIcon"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model:show="showCancel"
|
||||
:actions="simpleActions"
|
||||
|
||||
@ -13,6 +13,8 @@
|
||||
--van-action-sheet-item-line-height: var(--van-line-height-lg);
|
||||
--van-action-sheet-item-text-color: var(--van-text-color);
|
||||
--van-action-sheet-item-disabled-text-color: var(--van-text-color-3);
|
||||
--van-action-sheet-item-icon-size: 18px;
|
||||
--van-action-sheet-item-icon-margin-right: var(--van-padding-xs);
|
||||
--van-action-sheet-subname-color: var(--van-text-color-2);
|
||||
--van-action-sheet-subname-font-size: var(--van-font-size-sm);
|
||||
--van-action-sheet-subname-line-height: var(--van-line-height-sm);
|
||||
@ -40,7 +42,10 @@
|
||||
|
||||
&__item,
|
||||
&__cancel {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 14px var(--van-padding-md);
|
||||
font-size: var(--van-action-sheet-item-font-size);
|
||||
@ -72,6 +77,11 @@
|
||||
&--loading {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
font-size: var(--van-action-sheet-item-icon-size);
|
||||
margin-right: var(--van-action-sheet-item-icon-margin-right);
|
||||
}
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
@ -81,10 +91,12 @@
|
||||
}
|
||||
|
||||
&__subname {
|
||||
width: 100%;
|
||||
margin-top: var(--van-padding-xs);
|
||||
color: var(--van-action-sheet-subname-color);
|
||||
font-size: var(--van-action-sheet-subname-font-size);
|
||||
line-height: var(--van-action-sheet-subname-line-height);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
&__gap {
|
||||
|
||||
@ -24,6 +24,26 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<!--[-->
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="van-cell van-cell--clickable"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="van-cell__title"
|
||||
style
|
||||
>
|
||||
<span>
|
||||
Show Icon
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"
|
||||
style
|
||||
>
|
||||
<!--[-->
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="van-cell van-cell--clickable"
|
||||
role="button"
|
||||
@ -116,4 +136,5 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<!--[-->
|
||||
<!--[-->
|
||||
<!--[-->
|
||||
<!--[-->
|
||||
`;
|
||||
|
||||
@ -15,6 +15,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="van-cell van-cell--clickable"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
Show Icon
|
||||
</span>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="van-cell van-cell--clickable"
|
||||
role="button"
|
||||
@ -152,4 +165,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
css="true"
|
||||
>
|
||||
</transition-stub>
|
||||
<transition-stub
|
||||
name="van-fade"
|
||||
appear="true"
|
||||
persisted="false"
|
||||
css="true"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
</transition-stub>
|
||||
<transition-stub
|
||||
name="van-popup-slide-bottom"
|
||||
appear="false"
|
||||
persisted="false"
|
||||
css="true"
|
||||
>
|
||||
</transition-stub>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user