基本用法
1. 安装 Vant4 和 Popup 组件：
确保你已经安装了 Vant4 和相关的样式：
npm install vant@next
2. 引入 Popup 组件：
在需要使用 Popup 的组件中，引入 Popup 组件：
<template>
<van-popup v-model:show="popupShow" position="bottom">
<div>弹出层内容</div>
</van-popup>
</template>
<script>
import { ref } from 'vue';
export default {
data() {
return {
popupShow: false
};
}
};
</script>
常见配置选项
以下是一些常见的 Popup 配置选项：
- v-model:show： 控制弹出层的显示与隐藏，通过改变 show 的值来控制。
<template>
<van-popup v-model:show="popupShow">
<div>弹出层内容</div>
</van-popup>
</template>
<script>
import { ref } from 'vue';
export default {
data() {
return {
popupShow: false
};
}
};
</script>
- position： 弹出层位置，可选值为 'top'、'bottom'、'right'、'left'、'center'。
<template>
<van-popup v-model:show="popupShow" position="top">
<div>弹出层内容</div>
</van-popup>
</template>
- overlay： 是否显示遮罩层，默认为 true。
<template>
<van-popup v-model:show="popupShow" :overlay="false">
<div>无遮罩层的弹出层</div>
</van-popup>
</template>
- close-on-click-overlay： 是否在点击遮罩层时关闭弹出层，默认为 true。
<template>
<van-popup v-model:show="popupShow" :close-on-click-overlay="false">
<div>点击遮罩层不关闭的弹出层</div>
</van-popup>
</template>
- lock-scroll： 是否锁定背景滚动，默认为 true。
<template>
<van-popup v-model:show="popupShow" :lock-scroll="false">
<div>不锁定背景滚动的弹出层</div>
</van-popup>
</template>
- transition： 弹出层动画，可选值为 'fade'、'popup'、'dropdown' 等。
<template>
<van-popup v-model:show="popupShow" transition="popup">
<div>自定义动画的弹出层</div>
</van-popup>
</template>
这只是 Vant4 中 Popup 弹出层组件的一些基本用法和配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.zyzy.cn/article/detail/5795/Vant