提交 239d09c3 编写于 作者: richard_1015's avatar richard_1015

docs: actionsheet

上级 2e3f1d54
<template>
<div class="demo-list demo">
<h2>基本用法(选择类)</h2>
<h2>基本用法</h2>
<nut-cell
:showIcon="true"
:show-icon="true"
:isLink="true"
@click="switchActionSheet('isVisible1')"
>
<span><label>基础用法</label></span>
<div class="selected-option">{{ state.val1 }}</div>
<div class="selected-option" v-html="state.val1"></div>
</nut-cell>
<nut-cell
:showIcon="true"
......@@ -15,11 +15,11 @@
@click="switchActionSheet('isVisible2')"
>
<span><label>展示取消按钮</label></span>
<div class="selected-option">{{ state.val2 }}</div>
<div class="selected-option" v-html="state.val2"></div>
</nut-cell>
<nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
<span><label>展示描述信息</label></span>
<div class="selected-option">{{ state.val3 }}</div>
<div class="selected-option" v-html="state.val3"></div>
</nut-cell>
<h2>选项状态</h2>
......@@ -39,7 +39,8 @@
cancel-txt="取消"
:menu-items="menuItemsOne"
@choose="chooseItemTwo"
></nut-actionsheet>
>
</nut-actionsheet>
<!-- 展示描述信息 -->
<nut-actionsheet
:is-visible="state.isVisible3"
......
......@@ -2,39 +2,39 @@
从底部弹出的动作菜单面板。
## 基本用法(选择类)
## 基本用法
默认
```html
``` html
<div @click="switchActionSheet">
<span><label>基础用法</label></span>
<div class="selected-option">state.val }}</div>
<div class="selected-option" v-html="state.val"></div>
</div>
<nut-actionsheet
:is-visible="state.isVisible"
:menu-items="menuItems"
@choose="chooseItem"
></nut-actionsheet>
:is-visible="state.isVisible"
:menu-items="menuItems"
@choose="chooseItem"
></nut-actionsheet>
```
## 展示取消按钮
```html
<div @click="switchActionSheet">
<span><label>展示取消按钮</label></span>
<div class="selected-option">state.val }}</div>
<span><label>展示取消按钮</label></span>
<div class="selected-option" v-html="state.val"></div>
</div>
<nut-actionsheet :is-visible="isVisible"
@close="switchActionSheet"
:menu-items="menuItems"
@choose="chooseItem"
cancel-txt="取消"
<nut-actionsheet :is-visible="isVisible"
@close="switchActionSheet"
:menu-items="menuItems"
@choose="chooseItem"
cancel-txt="取消"
></nut-actionsheet>
```
## 展示描述信息
```html
<div @click.native="switchActionSheet">
<span><label>展示取消按钮</label></span>
<div class="selected-option">state.val }}</div>
<div class="selected-option" v-html="state.val"></div>
</div>
<nut-actionsheet :is-visible="isVisible"
@close="switchActionSheet"
......@@ -49,14 +49,14 @@
```html
<div @click.native="switchActionSheet">
<span class="title"><label>性别</label></span>
<span class="selected-option">{{sex}}</span>
<span class="selected-option" v-html="sex"></span>
</div>
<nut-actionsheet
@close="switchActionSheet"
:is-visible="state.isVisible4"
cancel-txt="取消"
:menu-items="menuItemsThree"
></nut-actionsheet>
:is-visible="state.isVisible4"
cancel-txt="取消"
:menu-items="menuItemsThree"
></nut-actionsheet>
```
```javascript
......@@ -91,23 +91,23 @@ setup() {
## Prop
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| cancel-txt | 取消文案 | String | '取消'
| menu-items | 列表项 | Array | [ ]
| option-tag | 设置列表项展示使用参数 | String | 'name'
| is-visible | 遮罩层可见 | Boolean | false
| option-sub-tag | 设置列表项描述展示使用参数 | String | 'subname'
| choose-tag-value | 设置选中项的值,和'option-tag'的值对应 | String | ''
| title | 设置列表项标题 | String | ''
| description | 设置列表项副标题/描述 | String | ''
| color | 高亮颜色 | String | '#ee0a24'
| close-abled | 遮罩层是否可关闭 | Boolean | true
| 字段 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------|---------|-----------|
| cancel-txt | 取消文案 | String | '取消' |
| menu-items | 列表项 | Array | [ ] |
| option-tag | 设置列表项展示使用参数 | String | 'name' |
| is-visible | 遮罩层可见 | Boolean | false |
| option-sub-tag | 设置列表项描述展示使用参数 | String | 'subname' |
| choose-tag-value | 设置选中项的值,和'option-tag'的值对应 | String | '' |
| title | 设置列表项标题 | String | '' |
| description | 设置列表项副标题/描述 | String | '' |
| color | 高亮颜色 | String | '#ee0a24' |
| close-abled | 遮罩层是否可关闭 | Boolean | true |
## Event
| 字段 | 说明 | 回调参数
|----- | ----- | -----
| choose | 选择之后触发 | 选中列表项item, 选中的索引值index
| cancel | 点击取消文案时触发 | 无
\ No newline at end of file
| 字段 | 说明 | 回调参数 |
|--------|--------------------|-----------------------------------|
| choose | 选择之后触发 | 选中列表项item, 选中的索引值index |
| cancel | 点击取消文案时触发 | 无 |
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册