mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-06-05 01:48:10 +08:00
68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useTranslate } from '@demo/use-translate';
|
|
|
|
const i18n = {
|
|
'zh-CN': {
|
|
offsetTop: '吸顶距离',
|
|
offsetBottom: '吸底距离',
|
|
setContainer: '指定容器',
|
|
},
|
|
'en-US': {
|
|
offsetTop: 'Offset Top',
|
|
offsetBottom: 'Offset Bottom',
|
|
setContainer: 'Set Container',
|
|
},
|
|
};
|
|
|
|
const t = useTranslate(i18n);
|
|
const container = ref(null);
|
|
</script>
|
|
|
|
<template>
|
|
<demo-block :title="t('basicUsage')">
|
|
<van-sticky>
|
|
<van-button type="primary" style="margin-left: 15px">
|
|
{{ t('basicUsage') }}
|
|
</van-button>
|
|
</van-sticky>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('offsetTop')">
|
|
<van-sticky :offset-top="50">
|
|
<van-button type="primary" style="margin-left: 115px">
|
|
{{ t('offsetTop') }}
|
|
</van-button>
|
|
</van-sticky>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('setContainer')">
|
|
<div ref="container" style="height: 150px; background-color: #fff">
|
|
<van-sticky :container="container">
|
|
<van-button type="warning" style="margin-left: 215px">
|
|
{{ t('setContainer') }}
|
|
</van-button>
|
|
</van-sticky>
|
|
</div>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('offsetBottom')">
|
|
<div style="height: 200px"></div>
|
|
<van-sticky :offset-bottom="50" position="bottom">
|
|
<van-button type="primary" style="margin-left: 15px">
|
|
{{ t('offsetBottom') }}
|
|
</van-button>
|
|
</van-sticky>
|
|
</demo-block>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
.demo-sticky {
|
|
height: 200vh;
|
|
|
|
.van-button {
|
|
margin-left: var(--van-padding-md);
|
|
}
|
|
}
|
|
</style>
|