基本用法：
<template>
<van-popup v-model="showPopup">
<!-- 弹出层内容 -->
<div>这是弹出层的内容</div>
</van-popup>
</template>
<script>
export default {
data() {
return {
showPopup: false
};
}
};
</script>
在上述代码中，v-model 用于控制弹出层的显示与隐藏，你可以通过修改 showPopup 数据来打开或关闭弹出层。
弹出位置：
<template>
<van-popup v-model="showPopup" position="top">
<!-- 弹出层内容 -->
<div>这是弹出层的内容</div>
</van-popup>
</template>
<script>
export default {
data() {
return {
showPopup: false
};
}
};
</script>
通过设置 position 属性，你可以指定弹出层的位置，支持的值有 "top"、"bottom"、"left"、"right" 等。
自定义弹出层：
<template>
<van-popup v-model="showPopup" position="bottom">
<!-- 自定义弹出层内容 -->
<div>
<p>这是自定义的内容</p>
<van-button @click="closePopup">关闭弹出层</van-button>
</div>
</van-popup>
</template>
<script>
export default {
data() {
return {
showPopup: false
};
},
methods: {
closePopup() {
this.showPopup = false;
}
}
};
</script>
通过在弹出层内部自定义内容，你可以实现更灵活的弹出层布局和交互。
以上是一些 Vant3 Popup 弹出层组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 Popup 弹出层文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/popup)。
转载请注明出处：http://www.zyzy.cn/article/detail/5713/Vant