Skip to content

Commit

Permalink
chore(backtop): split demo (#2889)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yi-boide
yi-boide authored Feb 3, 2024
1 parent ea2d1d9 commit 060c2d6
Show file tree
Hide file tree
Showing 10 changed files with 136 additions and 249 deletions.
25 changes: 25 additions & 0 deletions packages/nutui-taro-demo/src/feedback/pages/backtop/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<template>
<view class="backtop-demo">
<nut-backtop height="calc(100vh - 100px)" @click="click">
<template #content>
<view v-for="index in 24" :key="index" class="item">{{ index }}</view>
</template>
</nut-backtop>
</view>
</template>

<script setup lang="ts">
const click = () => {
console.log('click');
};
</script>

<style>
.backtop-demo .item {
height: 46px;
background: #efefef;
line-height: 46px;
padding: 0px 20px;
margin-bottom: 20px;
}
</style>
59 changes: 5 additions & 54 deletions packages/nutui-taro-demo/src/feedback/pages/backtop/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,10 @@
<template>
<Demo>
<nut-backtop @click="click">
<template #content>
<div class="text-data">我是测试数据1</div>
<div class="text-data">我是测试数据2</div>
<div class="text-data">我是测试数据3</div>
<div class="text-data">我是测试数据4</div>
<div class="text-data">我是测试数据5</div>
<div class="text-data">我是测试数据6</div>
<div class="text-data">我是测试数据7</div>
<div class="text-data">我是测试数据8</div>
<div class="text-data">我是测试数据9</div>
<div class="text-data">我是测试数据10</div>
<div class="text-data">我是测试数据11</div>
<div class="text-data">我是测试数据12</div>
<div class="text-data">我是测试数据13</div>
<div class="text-data">我是测试数据14</div>
<div class="text-data">我是测试数据15</div>
<div class="text-data">我是测试数据16</div>
<div class="text-data">我是测试数据17</div>
<div class="text-data">我是测试数据18</div>
<div class="text-data">我是测试数据19</div>
<div class="text-data">我是测试数据20</div>
<div class="text-data">我是测试数据21</div>
<div class="text-data">我是测试数据22</div>
<div class="text-data">我是测试数据23</div>
<div class="text-data">我是测试数据24</div>
</template>
</nut-backtop>
<Demo class="bg-w">
<view style="height: 20px"></view>
<Basic />
</Demo>
</template>

<script setup lang="ts">
const click = () => {
console.log('click');
};
<script lang="ts" setup>
import Basic from './basic.vue';
</script>

<style lang="scss">
.demo {
.text-data {
margin: 0 auto;
margin-top: 15px;
margin-bottom: 20px;
padding-left: 16px;
display: flex;
align-items: center;
width: 100%;
height: 46px;
background: rgba(255, 255, 255, 1);
border-radius: 7px;
box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
line-height: 19px;
font-size: 13px;
color: rgba(102, 102, 102, 1);
}
}
</style>
55 changes: 0 additions & 55 deletions src/packages/__VUE/backtop/demo.vue
View file

This file was deleted.

21 changes: 21 additions & 0 deletions src/packages/__VUE/backtop/demo/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template>
<div id="elId1" class="backtop-demo" style="height: 100%; overflow: auto">
<div v-for="index in 24" :key="index" class="item">{{ index }}</div>
<nut-backtop el-id="elId1" @click="handleClick"></nut-backtop>
</div>
</template>
<script setup>
const handleClick = () => {
console.log('back to top');
};
</script>

<style>
.backtop-demo .item {
height: 46px;
background: #efefef;
line-height: 46px;
padding: 0px 20px;
margin-bottom: 20px;
}
</style>
16 changes: 16 additions & 0 deletions src/packages/__VUE/backtop/demo/custom.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div id="elId3" class="backtop-demo" style="height: 100%; overflow: auto">
<div v-for="index in 24" :key="index" class="item">{{ index }}</div>
<nut-backtop el-id="elId3" :distance="200" :bottom="90"><div>Top</div></nut-backtop>
</div>
</template>

<style>
.backtop-demo .item {
height: 46px;
background: #efefef;
line-height: 46px;
padding: 0px 20px;
margin-bottom: 20px;
}
</style>
16 changes: 16 additions & 0 deletions src/packages/__VUE/backtop/demo/distance.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div id="elId2" class="backtop-demo" style="height: 100%; overflow: auto">
<div v-for="index in 24" :key="index" class="item">{{ index }}</div>
<nut-backtop el-id="elId2" :distance="100" :bottom="90"></nut-backtop>
</div>
</template>

<style>
.backtop-demo .item {
height: 46px;
background: #efefef;
line-height: 46px;
padding: 0px 20px;
margin-bottom: 20px;
}
</style>
46 changes: 46 additions & 0 deletions src/packages/__VUE/backtop/demo/index.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<template>
<Demo class="full custom-demo">
<nut-tabs v-model="value" :animated-time="0">
<nut-tab-pane :title="t('basic')" pane-key="1">
<Basic />
</nut-tab-pane>
<nut-tab-pane :title="t('distance')" pane-key="2">
<Distance />
</nut-tab-pane>
<nut-tab-pane :title="t('custom')" pane-key="3">
<Custom />
</nut-tab-pane>
</nut-tabs>
</Demo>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useTranslate } from '@/sites/utils';
import Basic from './basic.vue';
import Distance from './distance.vue';
import Custom from './custom.vue';
const value = ref('1');
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
distance: '设置出现位置',
custom: '自定义样式'
},
'en-US': {
basic: 'Basic Usage',
distance: 'Distance',
custom: 'Custom Style'
}
});
</script>

<style lang="scss" scoped>
.custom-demo {
:deep(.nut-tabs) {
.nut-tabs__content {
height: calc(100vh - 57px - 46px);
}
}
}
</style>
64 changes: 3 additions & 61 deletions src/packages/__VUE/backtop/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,73 +16,15 @@ app.use(Backtop);

### Basic Usage

:::demo

```vue
<template>
<div class="demo" id="elId">
<div v-for="(item, index) in 24" class="test">{{ index }}</div>
<nut-backtop @click="handleClick"></nut-backtop>
</div>
</template>
<script setup>
const handleClick = () => {
console.log('back to top');
};
</script>
<style>
.test {
padding: 12px 0 12px 20px;
border-top: 1px solid #eee;
}
</style>
```

:::
> demo: backtop basic
### Distance

:::demo

```vue
<template>
<div class="demo" id="elId">
<div v-for="(item, index) in 24" class="test">{{ index }}</div>
<nut-backtop :distance="200"></nut-backtop>
</div>
</template>
<style>
.test {
padding: 12px 0 12px 20px;
border-top: 1px solid #eee;
}
</style>
```

:::
> demo: backtop distance
### Custom Style

:::demo

```vue
<template>
<div class="demo" id="elId">
<div v-for="(item, index) in 24" class="test">{{ index }}</div>
<nut-backtop :distance="100" :bottom="90"><div>无</div></nut-backtop>
</div>
</template>
<style>
.test {
padding: 12px 0 12px 20px;
border-top: 1px solid #eee;
}
</style>
```

:::
> demo: backtop custom
### API

Expand Down
Loading

0 comments on commit 060c2d6

Please sign in to comment.