[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="show1 = true"
|
||||
>
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show1"
|
||||
:actions="simpleActions"
|
||||
safe-area-inset-bottom
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('status')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="show2 = true"
|
||||
>
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show2"
|
||||
:actions="statusActions"
|
||||
safe-area-inset-bottom
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="show3 = true"
|
||||
>
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show3"
|
||||
:actions="simpleActions"
|
||||
:cancel-text="$t('cancel')"
|
||||
safe-area-inset-bottom
|
||||
@cancel="onCancel"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@click="show4 = true"
|
||||
>
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show4"
|
||||
:title="$t('title')"
|
||||
safe-area-inset-bottom
|
||||
>
|
||||
<p>{{ $t('content') }}</p>
|
||||
</van-action-sheet>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
buttonText: '弹出菜单',
|
||||
title2: '展示取消按钮',
|
||||
title3: '展示标题栏',
|
||||
status: '选项状态',
|
||||
description: '描述信息',
|
||||
disabledOption: '禁用选项'
|
||||
},
|
||||
'en-US': {
|
||||
buttonText: 'Show ActionSheet',
|
||||
title2: 'ActionSheet with cancel button',
|
||||
title3: 'ActionSheet with title',
|
||||
status: 'Status',
|
||||
description: 'Description',
|
||||
disabledOption: 'Disabled Option'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
simpleActions() {
|
||||
return [
|
||||
{ name: this.$t('option') },
|
||||
{ name: this.$t('option') },
|
||||
{ name: this.$t('option'), subname: this.$t('description') }
|
||||
];
|
||||
},
|
||||
|
||||
statusActions() {
|
||||
return [
|
||||
{ name: this.$t('option') },
|
||||
{ loading: true },
|
||||
{ name: this.$t('disabledOption'), disabled: true }
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSelect(item) {
|
||||
this.show1 = false;
|
||||
this.show2 = false;
|
||||
this.$toast(item.name);
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.$toast('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-action-sheet {
|
||||
background-color: @white;
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
# ActionSheet
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { ActionSheet } from 'vant';
|
||||
|
||||
Vue.use(ActionSheet);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Use `actions` prop to set options of action-sheet.
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
@select="onSelect"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option', subname: 'Description' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSelect(item) {
|
||||
this.show = false;
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option' },
|
||||
{ loading: true },
|
||||
{ name: 'Disabled Option', disabled: true }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### ActionSheet with cancel button
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
@select="onSelect"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
|
||||
### ActionSheet with title
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" title="Title">
|
||||
<p>Content</p>
|
||||
</van-action-sheet>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| actions | Options | `Array` | `[]` |
|
||||
| title | Title | `String` | - |
|
||||
| cancel-text | Text of cancel button | `String` | - |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||||
| close-on-click-action | Whether to close when click action | `Boolean` | `false` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
|
||||
| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
|
||||
| duration | Transition duration, unit second | `Number` | `0.3` |
|
||||
| get-container | Return the mount node for action-sheet | `String | () => HTMLElement` | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| select | Triggered when click option | item, index |
|
||||
| cancel | Triggered when cancel click | - |
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
| open | Triggered when open ActionSheet | - |
|
||||
| opened | Triggered when opened ActionSheet | - |
|
||||
| close | Triggered when close ActionSheet | - |
|
||||
| closed | Triggered when closed ActionSheet | - |
|
||||
|
||||
### Data struct of actions
|
||||
|
||||
| key | Description |
|
||||
|------|------|
|
||||
| name | Title |
|
||||
| subname | Subtitle |
|
||||
| className | className for the option |
|
||||
| loading | Whether to be loading status |
|
||||
| disabled | Whether to be disabled |
|
||||
@@ -0,0 +1,64 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-action-sheet {
|
||||
max-height: @action-sheet-max-height;
|
||||
color: @action-sheet-item-text-color;
|
||||
|
||||
&__item,
|
||||
&__cancel {
|
||||
font-size: @action-sheet-item-font-size;
|
||||
line-height: @action-sheet-item-height;
|
||||
text-align: center;
|
||||
background-color: @action-sheet-item-background;
|
||||
|
||||
&:active {
|
||||
background-color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: @action-sheet-item-height;
|
||||
|
||||
&--disabled {
|
||||
color: @gray;
|
||||
|
||||
&:active {
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__subname {
|
||||
margin-left: 5px;
|
||||
color: @action-sheet-subname-color;
|
||||
font-size: @action-sheet-subname-font-size;
|
||||
}
|
||||
|
||||
&__cancel::before {
|
||||
display: block;
|
||||
height: 10px;
|
||||
background-color: @background-color;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&__header {
|
||||
font-size: @action-sheet-header-font-size;
|
||||
line-height: @action-sheet-header-height;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0 15px;
|
||||
color: @action-sheet-close-icon-color;
|
||||
font-size: @action-sheet-close-icon-size;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
&--safe-area-inset-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
import { PopupMixin } from '../mixins/popup';
|
||||
import Icon from '../icon';
|
||||
import Popup from '../popup';
|
||||
import Loading from '../loading';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/types';
|
||||
import { PopupMixinProps } from '../mixins/popup/type';
|
||||
|
||||
export type ActionSheetItem = {
|
||||
name: string;
|
||||
subname?: string;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
callback?: (item: ActionSheetItem) => void;
|
||||
};
|
||||
|
||||
export type ActionSheetProps = PopupMixinProps & {
|
||||
title?: string;
|
||||
actions: ActionSheetItem[];
|
||||
duration: number;
|
||||
cancelText?: string;
|
||||
closeOnClickAction?: boolean;
|
||||
safeAreaInsetBottom?: boolean;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('action-sheet');
|
||||
|
||||
function ActionSheet(
|
||||
h: CreateElement,
|
||||
props: ActionSheetProps,
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<ActionSheetProps>
|
||||
) {
|
||||
const { title, cancelText } = props;
|
||||
|
||||
function onCancel() {
|
||||
emit(ctx, 'input', false);
|
||||
emit(ctx, 'cancel');
|
||||
}
|
||||
|
||||
function Header() {
|
||||
if (title) {
|
||||
return (
|
||||
<div class={[bem('header'), 'van-hairline--bottom']}>
|
||||
{title}
|
||||
<Icon name="close" class={bem('close')} onClick={onCancel} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Content() {
|
||||
if (slots.default) {
|
||||
return <div class={bem('content')}>{slots.default()}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
function Option(item: ActionSheetItem, index: number) {
|
||||
const disabled = item.disabled || item.loading;
|
||||
|
||||
function onClickOption(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (item.disabled || item.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.callback) {
|
||||
item.callback(item);
|
||||
}
|
||||
|
||||
emit(ctx, 'select', item, index);
|
||||
|
||||
if (props.closeOnClickAction) {
|
||||
emit(ctx, 'input', false);
|
||||
}
|
||||
}
|
||||
|
||||
function OptionContent() {
|
||||
if (item.loading) {
|
||||
return <Loading size="20px" />;
|
||||
}
|
||||
|
||||
return [
|
||||
<span class={bem('name')}>{item.name}</span>,
|
||||
item.subname && <span class={bem('subname')}>{item.subname}</span>
|
||||
];
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class={[bem('item', { disabled }), item.className, 'van-hairline--top']}
|
||||
onClick={onClickOption}
|
||||
>
|
||||
{OptionContent()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CancelText() {
|
||||
if (cancelText) {
|
||||
return (
|
||||
<div class={bem('cancel')} onClick={onCancel}>
|
||||
{cancelText}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Popup
|
||||
class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
|
||||
position="bottom"
|
||||
value={props.value}
|
||||
overlay={props.overlay}
|
||||
duration={props.duration}
|
||||
lazyRender={props.lazyRender}
|
||||
lockScroll={props.lockScroll}
|
||||
getContainer={props.getContainer}
|
||||
closeOnClickOverlay={props.closeOnClickOverlay}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{Header()}
|
||||
{props.actions.map(Option)}
|
||||
{Content()}
|
||||
{CancelText()}
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
|
||||
ActionSheet.props = {
|
||||
...PopupMixin.props,
|
||||
title: String,
|
||||
actions: Array,
|
||||
cancelText: String,
|
||||
getContainer: [String, Function],
|
||||
closeOnClickAction: Boolean,
|
||||
safeAreaInsetBottom: Boolean,
|
||||
duration: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
};
|
||||
|
||||
export default createComponent<ActionSheetProps>(ActionSheet);
|
||||
@@ -0,0 +1,26 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,23 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`callback events 1`] = `
|
||||
<div class="van-popup van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
|
||||
<div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
|
||||
<div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</div>
|
||||
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></div>
|
||||
<div class="van-action-sheet__cancel">Cancel</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable lazy-render 1`] = `
|
||||
<div class="van-popup van-popup--bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
|
||||
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
|
||||
<div class="van-action-sheet__cancel">Cancel</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render title and default slot 1`] = ``;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,139 @@
|
||||
import { mount } from '../../../test/utils';
|
||||
import ActionSheet from '..';
|
||||
|
||||
test('callback events', () => {
|
||||
const callback = jest.fn();
|
||||
const onInput = jest.fn();
|
||||
const onCancel = jest.fn();
|
||||
const onSelect = jest.fn();
|
||||
|
||||
const actions = [
|
||||
{ name: 'Option', callback },
|
||||
{ name: 'Option', disabled: true },
|
||||
{ name: 'Option', loading: true },
|
||||
{ name: 'Option', subname: 'Subname' },
|
||||
];
|
||||
|
||||
const wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
value: true,
|
||||
actions,
|
||||
cancelText: 'Cancel'
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
input: onInput,
|
||||
cancel: onCancel,
|
||||
select: onSelect
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const options = wrapper.findAll('.van-action-sheet__item');
|
||||
options.at(0).trigger('click');
|
||||
options.at(1).trigger('click');
|
||||
wrapper.find('.van-action-sheet__cancel').trigger('click');
|
||||
|
||||
expect(callback).toHaveBeenCalled();
|
||||
expect(onCancel).toHaveBeenCalled();
|
||||
expect(onInput).toHaveBeenCalledWith(false);
|
||||
expect(onSelect).toHaveBeenCalledWith(actions[0], 0);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('click overlay and close', () => {
|
||||
const onInput = jest.fn();
|
||||
const onClickOverlay = jest.fn();
|
||||
const div = document.createElement('div');
|
||||
|
||||
mount({
|
||||
template: `
|
||||
<div>
|
||||
<action-sheet
|
||||
:value="true"
|
||||
:get-container="getContainer"
|
||||
@input="onInput"
|
||||
@click-overlay="onClickOverlay"
|
||||
/>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
ActionSheet
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getContainer: () => div
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput,
|
||||
onClickOverlay
|
||||
}
|
||||
});
|
||||
|
||||
div.querySelector('.van-overlay').click();
|
||||
expect(onInput).toHaveBeenCalledWith(false);
|
||||
expect(onClickOverlay).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('disable lazy-render', () => {
|
||||
const wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
lazyRender: false,
|
||||
actions: [
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option' }
|
||||
],
|
||||
cancelText: 'Cancel'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render title and default slot', () => {
|
||||
const wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
title: 'Title'
|
||||
},
|
||||
scopedSlots: {
|
||||
default() {
|
||||
return 'Default';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('get container', () => {
|
||||
const wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
value: true,
|
||||
getContainer: 'body'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.$el.parentNode).toEqual(document.body);
|
||||
});
|
||||
|
||||
test('close-on-click-action prop', () => {
|
||||
const onInput = jest.fn();
|
||||
const wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
value: true,
|
||||
actions: [{ name: 'Option' }],
|
||||
closeOnClickAction: true
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
input: onInput
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const option = wrapper.find('.van-action-sheet__item');
|
||||
option.trigger('click');
|
||||
|
||||
expect(onInput).toHaveBeenCalledWith(false);
|
||||
});
|
||||
@@ -0,0 +1,137 @@
|
||||
# ActionSheet 上拉菜单
|
||||
|
||||
### 引入
|
||||
``` javascript
|
||||
import { ActionSheet } from 'vant';
|
||||
|
||||
Vue.use(ActionSheet);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
`ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
@select="onSelect"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项' },
|
||||
{ name: '选项' },
|
||||
{ name: '选项', subname: '描述信息' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSelect(item) {
|
||||
// 点击选项时默认不会关闭菜单，可以手动关闭
|
||||
this.show = false;
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 选项状态
|
||||
|
||||
选项可以设置为加载状态或禁用状态
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项' },
|
||||
{ name: '选项', loading: true },
|
||||
{ name: '禁用选项', disabled: true }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 展示取消按钮
|
||||
|
||||
设置`cancelText`属性后，会在底部展示取消按钮，点击后关闭当前菜单
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
@select="onSelect"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
|
||||
### 展示标题栏
|
||||
|
||||
通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" title="标题">
|
||||
<p>内容</p>
|
||||
</van-action-sheet>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| actions | 菜单选项 | `Array` | `[]` | - |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| cancel-text | 取消按钮文字 | `String` | - | - |
|
||||
| overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
|
||||
| close-on-click-action | 是否在点击选项后关闭 | `Boolean` | `false` | 2.0.0 |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | `Boolean` | `true` | - |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.11 |
|
||||
| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | 2.0.0 |
|
||||
| duration | 动画时长，单位秒 | `Number` | `0.3` | 2.0.3 |
|
||||
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
|
||||
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
|
||||
| cancel | 取消按钮点击时触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
| open | 打开菜单时触发 | - |
|
||||
| opened | 打开菜单且动画结束后触发 | - |
|
||||
| close | 关闭菜单时触发 | - |
|
||||
| closed | 关闭菜单且动画结束后触发 | - |
|
||||
|
||||
### actions
|
||||
|
||||
`Props`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|------|------|
|
||||
| name | 标题 |
|
||||
| subname | 二级标题 |
|
||||
| className | 为对应列添加额外的 class |
|
||||
| loading | 是否为加载状态 |
|
||||
| disabled | 是否为禁用状态 |
|
||||
Reference in New Issue
Block a user