Skip to content

Commit

Permalink
chore(action-sheet): 优化文档与演示代码 (#2497)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Aug 24, 2023
1 parent 37a7b50 commit 4226dfb
Show file tree
Hide file tree
Showing 5 changed files with 548 additions and 820 deletions.
224 changes: 94 additions & 130 deletions packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,62 @@
<template>
<div class="demo actionsheet" :class="{ web: env === 'WEB' }">
<Header v-if="env === 'WEB'" />
<h2>基础用法</h2>
<nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible1')">
<span><label>基础用法</label></span>
<div v-html="state.val1"></div>
</nut-cell>
<nut-cell :showIcon="true" :isLink="true" @click="switchActionSheet('isVisible2')">
<span><label>展示取消按钮</label></span>
<div v-html="state.val2"></div>
</nut-cell>
<nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
<span><label>展示描述信息</label></span>
<div v-html="state.val3"></div>
</nut-cell>
<h2>选项状态</h2>

<nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
<span><label>选项状态</label></span>
<div v-html="state.val4"></div>
<h2>基础用法</h2>
<nut-cell is-link @click="switchActionSheet('isVisible1')">
<div>基础用法</div>
<div>{{ state.val1 }}</div>
</nut-cell>
<nut-action-sheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem" />

<h2>自定义</h2>

<nut-cell :isLink="true" @click="switchActionSheet('isVisible5')">
<span><label>自定义内容</label></span>
<div></div>
<nut-cell is-link @click="switchActionSheet('isVisible2')">
<div>展示取消按钮</div>
<div>{{ state.val2 }}</div>
</nut-cell>

<!-- demo 基础用法 -->
<nut-action-sheet
:safe-area-inset-bottom="true"
v-model:visible="state.isVisible1"
:menu-items="menuItemsOne"
@choose="chooseItem"
>
</nut-action-sheet>
<!-- demo(带取消按钮） -->
<nut-action-sheet
v-model:visible="state.isVisible2"
cancel-txt="取消"
:menu-items="menuItemsOne"
@choose="chooseItemTwo"
>
</nut-action-sheet>
<!-- 展示描述信息 -->
/>

<nut-cell is-link @click="switchActionSheet('isVisible3')">
<div>展示描述信息</div>
<div>{{ state.val3 }}</div>
</nut-cell>
<nut-action-sheet
v-model:visible="state.isVisible3"
title="标题"
:description="state.desc"
description="这是一段描述信息"
:menu-items="menuItemsTwo"
@choose="chooseItemThree"
cancel-txt="取消"
>
</nut-action-sheet>
<!-- demo 选项状态-->
/>

<h2>选项状态</h2>
<nut-cell is-link @click="switchActionSheet('isVisible4')">
<div>选项状态</div>
<div>{{ state.val4 }}</div>
</nut-cell>
<nut-action-sheet
v-model:visible="state.isVisible4"
cancel-txt="取消"
:menu-items="menuItemsThree"
@choose="chooseItemFour"
:choose-tag-value="state.chooseTagValue"
></nut-action-sheet>
<!-- 自定义面板-->
choose-tag-value="选中选项"
/>

<h2>自定义内容</h2>
<nut-cell is-link @click="switchActionSheet('isVisible5')">
<div>自定义内容</div>
</nut-cell>
<nut-action-sheet v-model:visible="state.isVisible5" title="标题">
<div class="custom-content">自定义内容</div>
</nut-action-sheet>
</div>
</template>

<script lang="ts">
<script setup lang="ts">
import { reactive } from 'vue';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
Expand All @@ -80,96 +67,73 @@ interface Item {
disable?: boolean;
loading?: boolean;
}
export default {
props: {},
components: {
Header
const env = Taro.getEnv();
const state = reactive({
isVisible1: false,
isVisible2: false,
isVisible3: false,
isVisible4: false,
isVisible5: false,
val1: '',
val2: '',
val3: '',
val4: ''
});
const menuItemsOne: Item[] = [
{
name: '选项一'
},
setup() {
const env = Taro.getEnv();
const state = reactive({
isVisible1: false,
isVisible2: false,
isVisible3: false,
isVisible4: false,
isVisible5: false,
val1: '',
val2: '',
val3: '',
val4: '',
desc: '这是一段描述信息',
chooseTagValue: '选中选项'
});
const menuItemsOne: Item[] = [
{
name: '选项一'
},
{
name: '选项二'
},
{
name: '选项三'
}
];
const menuItemsTwo: Item[] = [
{
name: '选项一'
},
{
name: '选项二'
},
{
name: '选项三',
color: 'red',
subname: '描述信息'
}
];
const menuItemsThree: Item[] = [
{
name: '选中选项'
},
{
name: '禁用选项',
disable: true
},
{
name: '加载选项',
loading: true
}
];
const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4') => {
state[param] = !state[param];
};
const chooseItem = (itemParams: any) => {
console.log(itemParams, 'itemParams');
state.val1 = itemParams.name;
};
function chooseItemTwo(itemParams: Item) {
state.val2 = itemParams.name;
}
function chooseItemThree(itemParams: Item) {
state.val3 = itemParams.name;
}
function chooseItemFour(itemParams: Item) {
state.val4 = itemParams.name;
}
return {
state,
menuItemsOne,
menuItemsTwo,
menuItemsThree,
chooseItem,
chooseItemTwo,
chooseItemThree,
chooseItemFour,
switchActionSheet,
env
};
{
name: '选项二'
},
{
name: '选项三'
}
];
const menuItemsTwo: Item[] = [
{
name: '选项一'
},
{
name: '选项二'
},
{
name: '选项三',
color: 'red',
subname: '描述信息'
}
];
const menuItemsThree: Item[] = [
{
name: '选中选项'
},
{
name: '禁用选项',
disable: true
},
{
name: '加载选项',
loading: true
}
];
const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4' | 'isVisible5') => {
state[param] = !state[param];
};
const chooseItem = (itemParams: any) => {
console.log(itemParams, 'itemParams');
state.val1 = itemParams.name;
};
function chooseItemTwo(itemParams: Item) {
state.val2 = itemParams.name;
}
function chooseItemThree(itemParams: Item) {
state.val3 = itemParams.name;
}
function chooseItemFour(itemParams: Item) {
state.val4 = itemParams.name;
}
</script>

<style lang="scss">
Expand Down
Loading

0 comments on commit 4226dfb

Please sign in to comment.