|
|
@@ -2,274 +2,418 @@
|
|
|
|
|
|
从底部弹出的动作菜单面板。
|
|
|
|
|
|
-## 基本用法(选择类)
|
|
|
+## 基础样式
|
|
|
|
|
|
-默认
|
|
|
+基础样式
|
|
|
```html
|
|
|
-<div @click.native="switchActionSheet">
|
|
|
- <span class="title"><label>性别</label></span>
|
|
|
- <span class="selected-option">{{sex}}</span>
|
|
|
-</div>
|
|
|
-<nut-actionsheet :is-visible="isVisible"
|
|
|
- @close="switchActionSheet"
|
|
|
- :menu-items="menuItems"
|
|
|
- @choose="chooseItem"
|
|
|
+<nut-cell
|
|
|
+ :show-icon="true"
|
|
|
+ title="基础样式"
|
|
|
+ :desc="option"
|
|
|
+ @click.native="openSwitch('isVisible')">
|
|
|
+</nut-cell>
|
|
|
+<nut-actionsheet
|
|
|
+ :is-visible="isVisible"
|
|
|
+ @close="closeSwitch('isVisible')"
|
|
|
+ :option-list="optionList"
|
|
|
+ @choose="choose"
|
|
|
></nut-actionsheet>
|
|
|
```
|
|
|
```javascript
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- sex: '请选择',
|
|
|
- isVisible: false,
|
|
|
- menuItems: [
|
|
|
- {
|
|
|
- 'name': '男',
|
|
|
- 'value': 0
|
|
|
- },
|
|
|
- {
|
|
|
- 'name': '女',
|
|
|
- 'value': 1
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- switchActionSheet() {
|
|
|
- this.isVisible = !this.isVisible;
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: '',
|
|
|
+ isVisible: false,
|
|
|
+ optionList: [
|
|
|
+ {
|
|
|
+ name: '选项A',
|
|
|
+ value: 0
|
|
|
},
|
|
|
-
|
|
|
- chooseItem(itemParams) {
|
|
|
- this.sex = itemParams.name;
|
|
|
+ {
|
|
|
+ name: '选项B',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项C',
|
|
|
+ value: 1
|
|
|
}
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSwitch(param) {
|
|
|
+ this[`${param}`] = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ closeSwitch(param) {
|
|
|
+ this[`${param}`] = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ choose(itemParams) {
|
|
|
+ this.option = itemParams.name;
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
```
|
|
|
|
|
|
带取消按钮
|
|
|
```html
|
|
|
-<div @click.native="switchActionSheet">
|
|
|
- <span class="title"><label>性别</label></span>
|
|
|
- <span class="selected-option">{{sex}}</span>
|
|
|
-</div>
|
|
|
- <nut-actionsheet :is-visible="isVisible"
|
|
|
- @close="switchActionSheet"
|
|
|
- :menu-items="menuItems"
|
|
|
- @choose="chooseItem"
|
|
|
- cancelTxt="取消"
|
|
|
+<nut-cell
|
|
|
+ :show-icon="true"
|
|
|
+ title="带取消按钮"
|
|
|
+ :desc="option"
|
|
|
+ @click.native="openSwitch('isVisible')">
|
|
|
+</nut-cell>
|
|
|
+<nut-actionsheet
|
|
|
+ :is-visible="isVisible"
|
|
|
+ @close="closeSwitch('isVisible')"
|
|
|
+ :is-cancle-btn="true"
|
|
|
+ :option-list="optionList"
|
|
|
+ @choose="choose"
|
|
|
></nut-actionsheet>
|
|
|
```
|
|
|
```javascript
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- sex: '请选择',
|
|
|
- isVisible: false,
|
|
|
- menuItems: [
|
|
|
- {
|
|
|
- 'name': '男',
|
|
|
- 'value': 0
|
|
|
- },
|
|
|
- {
|
|
|
- 'name': '女',
|
|
|
- 'value': 1
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- switchActionSheet() {
|
|
|
- this.isVisible = !this.isVisible;
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: '',
|
|
|
+ isVisible: false,
|
|
|
+ optionList: [
|
|
|
+ {
|
|
|
+ name: '选项A',
|
|
|
+ value: 0
|
|
|
},
|
|
|
-
|
|
|
- chooseItem(itemParams) {
|
|
|
- this.sex = itemParams.name;
|
|
|
+ {
|
|
|
+ name: '选项B',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项C',
|
|
|
+ value: 1
|
|
|
}
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSwitch(param) {
|
|
|
+ this[`${param}`] = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ closeSwitch(param) {
|
|
|
+ this[`${param}`] = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ choose(itemParams) {
|
|
|
+ this.option = itemParams.name;
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
```
|
|
|
|
|
|
-高亮已选项
|
|
|
+展示标题
|
|
|
```html
|
|
|
-<div @click.native="switchActionSheet">
|
|
|
- <span class="title"><label>性别</label></span>
|
|
|
- <span class="selected-option">{{sex}}</span>
|
|
|
-</div>
|
|
|
-<nut-actionsheet :is-visible="isVisible"
|
|
|
- @close="switchActionSheet"
|
|
|
- :menu-items="menuItems"
|
|
|
- @choose="chooseItem"
|
|
|
- :chooseTagValue="sex"
|
|
|
-></nut-actionsheet>
|
|
|
+<nut-cell
|
|
|
+ :show-icon="true"
|
|
|
+ title="展示标题"
|
|
|
+ :desc="option"
|
|
|
+ @click.native="openSwitch('isVisible')">
|
|
|
+</nut-cell>
|
|
|
+<nut-actionsheet
|
|
|
+ :is-visible="isVisible"
|
|
|
+ @close="closeSwitch('isVisible')"
|
|
|
+ :is-cancle-btn="true"
|
|
|
+ :option-list="optionList"
|
|
|
+ @choose="choose"
|
|
|
+>
|
|
|
+ <div slot="title">面板标题</div>
|
|
|
+</nut-actionsheet>
|
|
|
```
|
|
|
```javascript
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- sex: '请选择',
|
|
|
- isVisible: false,
|
|
|
- menuItems: [
|
|
|
- {
|
|
|
- 'name': '男',
|
|
|
- 'value': 0
|
|
|
- },
|
|
|
- {
|
|
|
- 'name': '女',
|
|
|
- 'value': 1
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- switchActionSheet() {
|
|
|
- this.isVisible = !this.isVisible;
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: '',
|
|
|
+ isVisible: false,
|
|
|
+ optionList: [
|
|
|
+ {
|
|
|
+ name: '选项A',
|
|
|
+ value: 0
|
|
|
},
|
|
|
-
|
|
|
- chooseItem(itemParams) {
|
|
|
- this.sex = itemParams.name;
|
|
|
+ {
|
|
|
+ name: '选项B',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项C',
|
|
|
+ value: 1
|
|
|
}
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSwitch(param) {
|
|
|
+ this[`${param}`] = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ closeSwitch(param) {
|
|
|
+ this[`${param}`] = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ choose(itemParams) {
|
|
|
+ this.option = itemParams.name;
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
```
|
|
|
|
|
|
-设置禁用状态
|
|
|
+
|
|
|
+展示描述信息
|
|
|
```html
|
|
|
-<div @click.native="switchActionSheet">
|
|
|
- <span class="title"><label>性别</label></span>
|
|
|
- <span class="selected-option">{{sex}}</span>
|
|
|
-</div>
|
|
|
-<nut-actionsheet :is-visible="isVisible"
|
|
|
- @close="switchActionSheet"
|
|
|
- :menu-items="menuItems"
|
|
|
- @choose="chooseItem"
|
|
|
- :chooseTagValue="sex"
|
|
|
-></nut-actionsheet>
|
|
|
+<nut-cell
|
|
|
+ :show-icon="true"
|
|
|
+ title="展示描述信息"
|
|
|
+ :desc="option"
|
|
|
+ @click.native="openSwitch('isVisible')">
|
|
|
+</nut-cell>
|
|
|
+<nut-actionsheet
|
|
|
+ :is-visible="isVisible"
|
|
|
+ @close="closeSwitch('isVisible')"
|
|
|
+ :is-cancle-btn="true"
|
|
|
+ :option-list="optionList"
|
|
|
+ @choose="choose"
|
|
|
+>
|
|
|
+ <div slot="desc">这里是一段描述，一段描述，一段描述，一段描述</div>
|
|
|
+</nut-actionsheet>
|
|
|
```
|
|
|
```javascript
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- sex: '请选择',
|
|
|
- isVisible: false,
|
|
|
- menuItems: [
|
|
|
- {
|
|
|
- 'name': '男',
|
|
|
- 'value': 0,
|
|
|
- 'disable': false
|
|
|
- },
|
|
|
- {
|
|
|
- 'name': '女',
|
|
|
- 'value': 1,
|
|
|
- 'disable': true
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- switchActionSheet() {
|
|
|
- this.isVisible = !this.isVisible;
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: '',
|
|
|
+ isVisible: false,
|
|
|
+ optionList: [
|
|
|
+ {
|
|
|
+ name: '选项A',
|
|
|
+ value: 0
|
|
|
},
|
|
|
-
|
|
|
- chooseItem(itemParams) {
|
|
|
- this.sex = itemParams.name;
|
|
|
+ {
|
|
|
+ name: '选项B',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项C',
|
|
|
+ value: 1
|
|
|
}
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSwitch(param) {
|
|
|
+ this[`${param}`] = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ closeSwitch(param) {
|
|
|
+ this[`${param}`] = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ choose(itemParams) {
|
|
|
+ this.option = itemParams.name;
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
```
|
|
|
|
|
|
-## 提示
|
|
|
+## 其他样式
|
|
|
+
|
|
|
+带确认按钮
|
|
|
```html
|
|
|
-<div @click.native="switchActionSheet">
|
|
|
- <span class="title"><label>我就列表测试数据</label></span>
|
|
|
- <span class="sub-title">我是描述~~~~</span>
|
|
|
- <div class="selected-option">删除本条</div>
|
|
|
-</div>
|
|
|
-<nut-actionsheet :is-visible="isVisible"
|
|
|
- :menu-items="menuItems4"
|
|
|
- chooseTagValue="确定"
|
|
|
- cancelTxt="取消"
|
|
|
- @close="switchActionSheet"
|
|
|
- @choos="choose"
|
|
|
+<nut-cell
|
|
|
+ :show-icon="true"
|
|
|
+ title="带确认按钮"
|
|
|
+ :desc="option"
|
|
|
+ @click.native="openSwitch('isVisible')">
|
|
|
+</nut-cell>
|
|
|
+<nut-actionsheet
|
|
|
+ :is-visible="isVisible"
|
|
|
+ @close="closeSwitch('isVisible')"
|
|
|
+ :is-confirm-btn="true"
|
|
|
+ :option-list="optionList"
|
|
|
+ @choose="choose"
|
|
|
>
|
|
|
- <span slot="title"><label>确定删除吗？</label></span>
|
|
|
- <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>
|
|
|
+ <div slot="title">面板标题</div>
|
|
|
</nut-actionsheet>
|
|
|
```
|
|
|
```javascript
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- sex: '请选择',
|
|
|
- isVisible: false,
|
|
|
- menuItems: [
|
|
|
- {
|
|
|
- 'name': '确定'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- switchActionSheet() {
|
|
|
- this.isVisible = !this.isVisible;
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: '',
|
|
|
+ isVisible: false,
|
|
|
+ optionList: [
|
|
|
+ {
|
|
|
+ name: '选项A',
|
|
|
+ value: 0
|
|
|
},
|
|
|
-
|
|
|
- choose(itemParams) {
|
|
|
-
|
|
|
+ {
|
|
|
+ name: '选项B',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项C',
|
|
|
+ value: 1
|
|
|
}
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSwitch(param) {
|
|
|
+ this[`${param}`] = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ closeSwitch(param) {
|
|
|
+ this[`${param}`] = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ choose(itemParams) {
|
|
|
+ this.option = itemParams.name;
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
```
|
|
|
|
|
|
-## 自定义内容
|
|
|
+带确认按钮
|
|
|
```html
|
|
|
-<div @click.native="switchActionSheet">
|
|
|
- <span class="title"><label>内容自定义</label></span>
|
|
|
- <div class="selected-option">打开</div>
|
|
|
-</div>
|
|
|
-<nut-actionsheet :is-visible="isVisible"
|
|
|
- @close="switchActionSheet"
|
|
|
+<nut-cell
|
|
|
+ :show-icon="true"
|
|
|
+ title="设置禁用状态"
|
|
|
+ :desc="option"
|
|
|
+ @click.native="openSwitch('isVisible')">
|
|
|
+</nut-cell>
|
|
|
+<nut-actionsheet
|
|
|
+ :is-visible="isVisible"
|
|
|
+ @close="closeSwitch('isVisible')"
|
|
|
+ :option-list="optionList"
|
|
|
+ @choose="choose"
|
|
|
>
|
|
|
- <div slot="custom" class="custom-wrap"><span>自定义</span></div>
|
|
|
</nut-actionsheet>
|
|
|
```
|
|
|
```javascript
|
|
|
-
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isVisible: false
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: '',
|
|
|
+ isVisible: false,
|
|
|
+ optionList: [
|
|
|
+ {
|
|
|
+ name: '选项A',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项B',
|
|
|
+ value: 1,
|
|
|
+ disable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项C',
|
|
|
+ value: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSwitch(param) {
|
|
|
+ this[`${param}`] = true;
|
|
|
},
|
|
|
- methods: {
|
|
|
- switchActionSheet() {
|
|
|
- this.isVisible = !this.isVisible;
|
|
|
+
|
|
|
+ closeSwitch(param) {
|
|
|
+ this[`${param}`] = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ choose(itemParams) {
|
|
|
+ this.option = itemParams.name;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
+高亮选中项
|
|
|
+```html
|
|
|
+<nut-cell
|
|
|
+ :show-icon="true"
|
|
|
+ title="高亮选中项"
|
|
|
+ :desc="option"
|
|
|
+ @click.native="openSwitch('isVisible')">
|
|
|
+</nut-cell>
|
|
|
+<nut-actionsheet
|
|
|
+ :is-visible="isVisible"
|
|
|
+ @close="closeSwitch('isVisible')"
|
|
|
+ :chooseTagValue="option6"
|
|
|
+ :option-list="optionList"
|
|
|
+ @choose="choose"
|
|
|
+>
|
|
|
+</nut-actionsheet>
|
|
|
+```
|
|
|
+```javascript
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: '',
|
|
|
+ isVisible: false,
|
|
|
+ optionList: [
|
|
|
+ {
|
|
|
+ name: '选项A',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项B',
|
|
|
+ value: 1,
|
|
|
+ disable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '选项C',
|
|
|
+ value: 1
|
|
|
}
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openSwitch(param) {
|
|
|
+ this[`${param}`] = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ closeSwitch(param) {
|
|
|
+ this[`${param}`] = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ choose(itemParams) {
|
|
|
+ this.option = itemParams.name;
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
```
|
|
|
|
|
|
+
|
|
|
+
|
|
|
## Prop
|
|
|
|
|
|
| 字段 | 说明 | 类型 | 默认值
|
|
|
|----- | ----- | ----- | -----
|
|
|
-| is-animation | 是否开启动画 | Boolean | true
|
|
|
-| is-lock-bg-scroll | 是否锁定背景滚动 | Boolean | false
|
|
|
| is-visible | 是否可见 | Boolean | false
|
|
|
-| is-show-mask | 是否显示背景遮罩 | Boolean | true
|
|
|
| is-click-choose-close | 是否点击列表项后立即关闭 | Boolean | true
|
|
|
| is-click-close-mask | 是否点击mask蒙层关闭 | Boolean | true
|
|
|
-| cancel-txt | 取消文案 | String | '取消'
|
|
|
+| isCancelBtn | 是否有确认按钮 | Boolean | false
|
|
|
+| isConfirmBtn | 是否有确认按钮 | Boolean | false
|
|
|
| choose-tag-value | 已选值，如果填写，高亮显示 | String | -
|
|
|
-| menu-items | 列表项 | Array | [ ]
|
|
|
+| option-list | 列表项 | Array | [ ]
|
|
|
| option-tag | 设置列表项展示使用参数 | String | 'name'
|
|
|
|
|
|
## Slot
|
|
|
|
|
|
| 名称 | 说明
|
|
|
|----- | -----
|
|
|
-| custom | 自定义内容
|
|
|
| title | 自定义标题
|
|
|
-| subTitle | 自定义副标题
|
|
|
+| desc | 自定义描述
|
|
|
|
|
|
## Event
|
|
|
|
songchenglin3