Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(action-sheet): 优化文档与演示代码 #2497

Merged
merged 2 commits into from
Aug 24, 2023
Merged

chore(action-sheet): 优化文档与演示代码 #2497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3de3b73
chore: action-sheet
eiinu Aug 23, 2023
0db341e
fix: update
eiinu Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 94 additions & 130 deletions packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue
View file
Open in desktop
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
Loading