好的，以下是一个简单的van-popup组件的封装示例：
```html
<template>
<van-popup v-model="showPopup">
<div class="popup-content">
<h2>{{ title }}</h2>
<p>{{ message }}</p>
<van-button @click="closePopup">确定</van-button>
</div>
</van-popup>
</template>
<script>
import { Popup, Button } from 'vant';
export default {
components: {
[Popup.name]: Popup,
[Button.name]: Button,
},
props: {
title: String,
message: String,
},
data() {
return {
showPopup: false,
};
},
methods: {
closePopup() {
this.showPopup = false;
},
},
};
</script>
```
在这个示例中，我们使用Vanilla UI框架中的Popup和Button组件，以及props和data来控制组件的显示和隐藏。
接下来，我们可以使用这个组件来填写不同的内容：
```html
<template>
<div>
<van-button @click="showPopup('提示', '请填写您的姓名')">填写姓名</van-button>
<van-button @click="showPopup('提示', '请填写您的地址')">填写地址</van-button>
</div>
<MyPopup ref="popup"></MyPopup>
</template>
<script>
import MyPopup from './MyPopup.vue';
export default {
components: {
MyPopup,
},
methods: {
showPopup(title, message) {
this.$refs.popup.$emit('show', { title, message });
},
},
};
</script>
```
在这个示例中，我们使用了一个包含两个van-button按钮的div，每个按钮都会调用showPopup方法，并传入不同的标题和消息。我们还通过使用`ref`引用MyPopup组件，并通过`$refs`访问它。
最后，我们需要在MyPopup组件中添加一个监听器，以便在父组件中显示它：
```html
<template>
<van-popup v-model="showPopup">
<div class="popup-content">
<h2>{{ title }}</h2>
<p>{{ message }}</p>
<van-button @click="closePopup">确定</van-button>
</div>
</van-popup>
</template>
<script>
import { Popup, Button } from 'vant';
export default {
components: {
[Popup.name]: Popup,
[Button.name]: Button,
},
data() {
return {
showPopup: false,
title: '',
message: '',
};
},
created() {
this.$on('show', ({ title, message }) => {
this.title = title;
this.message = message;
this.showPopup = true;
});
},
methods: {
closePopup() {
this.showPopup = false;
},
},
};
</script>
```
在这个示例中，我们使用了一个`created`钩子来监听`show`事件，并在事件发生时更新标题、消息和显示状态。
现在，我们就可以使用这个组件来填写不同的内容了！
https://mp.weixin.qq.com/s/aZh6wXKBlK_12TmEBn92PA
1038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
