Skip to content

Commit

Permalink
chore(tour): split demo (#2893)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Jan 29, 2024
1 parent c43c096 commit e8fe16b
Show file tree
Hide file tree
Showing 16 changed files with 453 additions and 1,258 deletions.
19 changes: 19 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/tour/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<nut-cell title="点击试试">
<template #link>
<nut-switch id="tour1" v-model="val" @click="show = true" />
</template>
</nut-cell>
<nut-tour v-model="show" :steps="steps" type="tile" location="bottom-end"></nut-tour>
</template>
<script setup>
import { ref } from 'vue';
const val = ref(false);
const show = ref(false);
const steps = ref([
{
content: '京东风格的轻量级移动端组件库',
target: 'tour1'
}
]);
</script>
43 changes: 43 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/tour/content.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<template>
<nut-cell title="点击试试">
<template #link>
<nut-switch id="tour4" v-model="val" @click="show = true" />
</template>
</nut-cell>

<nut-tour
v-model="show"
:steps="steps"
type="tile"
theme="dark"
location="bottom-end"
:offset="[8, 8]"
:close-on-click-overlay="false"
>
<div class="tour-demo-custom-content">
<div>NutUI 4.x 已发布，欢迎体验</div>
<nut-divider direction="vertical" />
<div @click="show = false">知道了</div>
</div>
</nut-tour>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(false);
const val = ref(false);
const steps = ref([
{
target: 'tour4'
}
]);
</script>

<style>
.tour-demo-custom-content {
padding: 8px;
display: flex;
width: max-content;
align-items: center;
}
</style>
31 changes: 31 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/tour/custom.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<template>
<nut-cell title="点击试试">
<template #link>
<nut-switch id="tour2" v-model="val" @click="show = true" />
</template>
</nut-cell>

<nut-tour
v-model="show"
:steps="steps"
location="bottom-end"
type="tile"
bg-color="#f00"
theme="dark"
:offset="[0, 0]"
:mask-width="50"
:mask-height="50"
></nut-tour>
</template>

<script setup>
import { ref } from 'vue';
const val = ref(false);
const show = ref(false);
const steps = ref([
{
content: '京东风格的轻量级移动端组件库',
target: 'tour2'
}
]);
</script>
266 changes: 32 additions & 234 deletions packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,245 +1,43 @@
<template>
<Demo>
<h2>基础用法</h2>
<nut-cell title="点击试试">
<template #link>
<nut-switch id="target7" v-model="state.switchValue" @click="state.showTour3 = true" />
</template>
</nut-cell>
<h2>{{ t('basic') }}</h2>
<Basic />

<nut-tour
v-model="state.showTour3"
class="nut-custom-tour nut-customword-tour"
:steps="state.steps3"
type="tile"
location="bottom-end"
></nut-tour>
<h2>{{ t('custom') }}</h2>
<Custom />

<h2>自定义样式</h2>
<h2>{{ t('position') }}</h2>
<Position />

<nut-cell title="点击试试">
<template #link>
<nut-switch id="target5" v-model="state.switchValue" @click="showTourHandle" />
</template>
</nut-cell>
<h2>{{ t('content') }}</h2>
<Content />

<nut-tour
v-model="state.showTour1"
class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
:steps="state.steps1"
location="bottom-end"
type="tile"
bg-color="#f00"
theme="dark"
:offset="[0, 0]"
mask-width="50"
mask-height="50"
></nut-tour>

<h2>设置偏移量</h2>

<nut-cell title="点击试试" @click="state.showTour2 = true">
<template #link>
<div class="tour-demo-img">
<img
id="target6"
src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
alt=""
/>
<img
src="https://img10.360buyimg.com/imagetools/jfs/t1/31842/40/20385/1762/63998e3eE594254bb/98ff51da635ead4a.png"
alt=""
/>
<img src="https://storage.jd.com/oss-dev/test/3.2.6/Jdweapp.png" alt="" />
</div>
</template>
</nut-cell>

<nut-tour
v-model="state.showTour2"
class="nut-custom-tour nut-customword-tour"
:steps="state.steps2"
type="tile"
bg-color="#f00"
theme="dark"
location="bottom-end"
:offset="[8, 8]"
></nut-tour>

<h2>自定义内容</h2>

<nut-cell title="点击试试">
<template #link>
<nut-switch id="target8" v-model="state.switchValue" @click="state.showTour4 = true" />
</template>
</nut-cell>

<nut-tour
v-model="state.showTour4"
class="nut-custom-tour nut-customword-tour"
:steps="state.steps4"
type="tile"
theme="dark"
location="bottom-end"
:offset="[8, 8]"
>
<view class="tour-demo-custom-content">
<view>nutui 4.x 即将发布，敬请期待</view>
<nut-divider direction="vertical" />
<view @click="state.showTour4 = false">知道了</view>
</view>
</nut-tour>

<h2>步骤引导</h2>

<nut-cell title="点击试试" @click="state.showTour = true"></nut-cell>

<nut-tabbar>
<nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
<nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
<nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
<nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
</nut-tabbar>

<nut-tour
v-model="state.showTour"
class="nut-customword-tour"
:steps="state.steps"
location="top-start"
:offset="[0, 0]"
mask-width="60"
mask-height="50"
></nut-tour>
<h2>{{ t('step') }}</h2>
<Step />
</Demo>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({
switchValue: false,
showTour: false,
showTour1: false,
showTour2: false,
showTour3: false,
showTour4: false,
offset: [-3, -8],
steps: [
{
content: '70+ 高质量组件，覆盖移动端主流场景',
target: 'target1'
},
{
content: '支持一套代码同时开发多端小程序',
target: 'target2'
},
{
content: '基于京东APP 10.0 视觉规范',
target: 'target3',
location: 'top-end'
},
{
content: '支持定制主题，内置 700+ 个主题变量',
target: 'target4',
location: 'top-end'
}
],
steps1: [
{
content: '70+ 高质量组件，覆盖移动端主流场景',
target: 'target5'
}
],
steps2: [
{
content: '支持一套代码同时开发多端小程序+H5',
target: 'target6',
popoverOffset: [40, 12],
arrowOffset: -36
}
],
steps3: [
{
content: '70+ 高质量组件，覆盖移动端主流场景',
target: 'target7'
}
],
steps4: [
{
target: 'target8'
}
],
type: 'normal'
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Custom from './custom.vue';
import Position from './position.vue';
import Content from './content.vue';
import Step from './step.vue';
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
custom: '自定义样式',
position: '设置偏移量',
content: '自定义内容',
step: '步骤引导'
},
'en-US': {
basic: 'Basic Usage',
custom: 'Custom Style',
position: 'Custom Offset',
content: 'Custom Content',
step: 'Steps'
}
});
const showTourHandle = () => {
state.showTour1 = true;
};
</script>
<style lang="scss">
.nut-custom-tour {
.nut-popover-content {
width: auto !important;
}
}
.nut-customword-tour {
.nut-tour-content-inner {
width: max-content;
}
}
.index-header {
display: flex;
align-items: center;
height: 117px;
> img {
width: 67px;
height: 67px;
margin-right: 18px;
flex-shrink: 0;
}
.info {
display: flex;
flex-direction: column;
h1 {
margin: 0;
height: 48px;
font-size: 34px;
color: rgba(51, 51, 51, 1);
}
p {
height: 18px;
font-size: 12px;
color: rgba(154, 155, 157, 1);
}
}
}
.nut-customstyle-tour {
.nut-tour-mask {
border-radius: 50%;
}
}
.tour-demo-img {
img {
width: 20px;
height: 20px;
margin-right: 10px;
}
}
.tour-demo-custom-content {
padding: 8px;
display: flex;
width: max-content;
align-items: center;
.nut-divider {
border-color: #fff;
}
}
</style>
Loading

0 comments on commit e8fe16b

Please sign in to comment.