Skip to content

Commit

Permalink
chore(exhibition): move to setup sugar (#2633)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Nov 3, 2023
1 parent 19f5248 commit 085022b
Show file tree
Hide file tree
Showing 75 changed files with 7,278 additions and 8,795 deletions.
24 changes: 8 additions & 16 deletions packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,27 +106,19 @@
</nut-cell>
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { My } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
import { ref } from 'vue';
export default {
components: { My, Header },
props: {},
setup() {
const env = Taro.getEnv();
const handleClick = () => {
console.log('触发点击头像');
};
const avatarCount = ref(4);
const addAvatar = () => {
avatarCount.value += 1;
};
const env = Taro.getEnv();
const handleClick = () => {
console.log('触发点击头像');
};
return { handleClick, env, avatarCount, addAvatar };
}
const avatarCount = ref(4);
const addAvatar = () => {
avatarCount.value += 1;
};
</script>
<style lang="scss">
Expand Down
79 changes: 33 additions & 46 deletions packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,64 @@
<div class="demo full" :class="{ web: env === 'WEB' }">
<Header v-if="env === 'WEB'" />
<h2>基础用法</h2>
<nut-collapse v-model="active1" @change="change">
<nut-collapse-item :title="title1" :name="1">
<nut-collapse v-model="data.active1" @change="change">
<nut-collapse-item :title="data.title1" :name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
<nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
<nut-collapse-item :title="data.title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
<nut-collapse-item :title="data.title3" :name="3" disabled> </nut-collapse-item>
</nut-collapse>
<h2>手风琴</h2>
<nut-collapse v-model="active2" :accordion="true">
<nut-collapse-item :title="title1" :name="1">
<nut-collapse v-model="data.active2" :accordion="true">
<nut-collapse-item :title="data.title1" :name="1">
<template #value> 文本测试 </template>
华为终端操作系统EMUI 11发布，9月11日正式开启
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2" :value="subTitle">
<nut-collapse-item :title="data.title2" :name="2" :value="data.subTitle">
中国服务机器人市场已占全球市场超1/4
</nut-collapse-item>
<nut-collapse-item :title="title3" :name="3"> QuestMobile：90后互联网用户规模超越80后达3.62亿 </nut-collapse-item>
<nut-collapse-item :title="data.title3" :name="3">
QuestMobile：90后互联网用户规模超越80后达3.62亿
</nut-collapse-item>
</nut-collapse>
<h2>自定义折叠图标</h2>
<nut-collapse v-model="active3" :accordion="true">
<nut-collapse-item :title="title1" :name="1" :icon="Notice"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
<nut-collapse-item :title="title2" :name="2" value="文本内容" :icon="Follow">
<nut-collapse v-model="data.active3" :accordion="true">
<nut-collapse-item :title="data.title1" :name="1" :icon="Notice"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
<nut-collapse-item :title="data.title2" :name="2" value="文本内容" :icon="Follow">
世界制造业大会开幕，阿里巴巴与安徽合作再升级
</nut-collapse-item>
</nut-collapse>
<h2>设置固定内容（不折叠部分）</h2>
<nut-collapse v-model="active6" :accordion="true">
<nut-collapse-item :title="title1" :name="1">
<nut-collapse v-model="data.active6" :accordion="true">
<nut-collapse-item :title="data.title1" :name="1">
<template #extra>固定内容</template>
NutUI是一套拥有京东风格的轻量级的 Vue 组件库
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2">
<nut-collapse-item :title="data.title2" :name="2">
在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
</nut-collapse-item>
</nut-collapse>
</div>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
<script setup lang="ts">
import { reactive } from 'vue';
import { Notice, Follow } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
export default {
components: {
Header
},
setup(props, context) {
const env = Taro.getEnv();
const data = reactive({
active1: [1, '2'],
active2: 1,
active3: 1,
active4: 1,
active5: 1,
active6: 1,
title1: '标题1',
title2: '标题2',
title3: '标题3',
subTitle: '副标题'
});
const change = (name: string) => {
console.log(`点击了name是${name}的面板`);
};
return {
change,
...toRefs(data),
Notice,
Follow,
env
};
}
const env = Taro.getEnv();
const data = reactive({
active1: [1, '2'],
active2: 1,
active3: 1,
active4: 1,
active5: 1,
active6: 1,
title1: '标题1',
title2: '标题2',
title3: '标题3',
subTitle: '副标题'
});
const change = (name: string) => {
console.log(`点击了name是${name}的面板`);
};
</script>
135 changes: 58 additions & 77 deletions packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,52 +3,52 @@
<Header v-if="env === 'WEB'" />
<h2>基础用法</h2>
<nut-cell>
<nut-countdown :endTime="end" @end="onend"></nut-countdown>
<nut-countdown :endTime="state.end" @end="onend"></nut-countdown>
</nut-cell>
<h2>自定义格式</h2>
<nut-cell>
<nut-countdown :endTime="end" format="DD 天 HH 时 mm 分 ss 秒" />
<nut-countdown :endTime="state.end" format="DD 天 HH 时 mm 分 ss 秒" />
</nut-cell>

<h2>毫秒级渲染</h2>

<nut-cell>
<nut-countdown :endTime="end" millisecond format="HH:mm:ss:SS" />
<nut-countdown :endTime="state.end" millisecond format="HH:mm:ss:SS" />
</nut-cell>

<h2>以服务端的时间为准</h2>

<nut-cell>
<nut-countdown :startTime="serverTime" :endTime="end" />
<nut-countdown :startTime="state.serverTime" :endTime="state.end" />
</nut-cell>

<h2>异步更新结束时间</h2>

<nut-cell>
<nut-countdown :endTime="asyncEnd" />
<nut-countdown :endTime="state.asyncEnd" />
</nut-cell>

<h2>控制开始和暂停的倒计时</h2>

<nut-cell>
<nut-countdown :endTime="end" :paused="paused" @paused="onpaused" @restart="onrestart" />
<nut-countdown :endTime="state.end" :paused="state.paused" @paused="onpaused" @restart="onrestart" />
<div style="position: absolute; right: 10px; top: 9px">
<nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
<nut-button type="primary" size="small" @click="toggle">{{ state.paused ? 'start' : 'stop' }}</nut-button>
</div>
</nut-cell>

<h2>自定义展示样式</h2>

<nut-cell>
<span>
<nut-countdown v-model="resetTime" :endTime="end">
<nut-countdown v-model="state.resetTime" :endTime="state.end">
<div class="countdown-part-box">
<div class="part-item-symbol">{{ resetTime.d }}天</div>
<div class="part-item h">{{ resetTime.h }}</div>
<div class="part-item-symbol">{{ state.resetTime.d }}天</div>
<div class="part-item h">{{ state.resetTime.h }}</div>
<span class="part-item-symbol">:</span>
<div class="part-item m">{{ resetTime.m }}</div>
<div class="part-item m">{{ state.resetTime.m }}</div>
<span class="part-item-symbol">:</span>
<div class="part-item s">{{ resetTime.s }}</div>
<div class="part-item s">{{ state.resetTime.s }}</div>
</div>
</nut-countdown>
</span>
Expand All @@ -67,75 +67,56 @@
</div>
</template>

<script lang="ts">
import { toRefs, onMounted, ref, reactive } from 'vue';
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
export default {
components: { Header },
setup() {
const env = Taro.getEnv();
const Countdown = ref(null);
const state = reactive({
serverTime: Date.now() - 20 * 1000,
end: Date.now() + 60 * 1000,
starttime: Date.now(),
asyncEnd: 0,
paused: false,
resetTime: {
d: '1',
h: '00',
m: '00',
s: '00'
}
});
const toggle = () => {
state.paused = !state.paused;
};
const onend = () => {
console.log('countdown: ended.');
};
const onpaused = (v) => {
console.log('paused: ', v);
};
const onrestart = (v) => {
console.log('restart: ', v);
};
const start = () => {
Countdown.value.start();
};
const pause = () => {
Countdown.value.pause();
};
const reset = () => {
Countdown.value.reset();
};
onMounted(() => {
console.log(Countdown.value);
});
setTimeout(() => {
state.asyncEnd = Date.now() + 30 * 1000;
}, 3000);
return {
...toRefs(state),
toggle,
onend,
onpaused,
onrestart,
Countdown,
start,
pause,
reset,
env
};
const env = Taro.getEnv();
const Countdown = ref<any>(null);
const state = reactive({
serverTime: Date.now() - 20 * 1000,
end: Date.now() + 60 * 1000,
starttime: Date.now(),
asyncEnd: 0,
paused: false,
resetTime: {
d: '1',
h: '00',
m: '00',
s: '00'
}
});
const toggle = () => {
state.paused = !state.paused;
};
const onend = () => {
console.log('countdown: ended.');
};
const onpaused = (v) => {
console.log('paused: ', v);
};
const onrestart = (v) => {
console.log('restart: ', v);
};
const start = () => {
Countdown.value.start();
};
const pause = () => {
Countdown.value.pause();
};
const reset = () => {
Countdown.value.reset();
};
onMounted(() => {
console.log(Countdown.value);
});
setTimeout(() => {
state.asyncEnd = Date.now() + 30 * 1000;
}, 3000);
</script>

<style lang="scss">
Expand Down
Loading

0 comments on commit 085022b

Please sign in to comment.