1.设计弹框组件
首先,创建一个名为NewsPopup
的弹框组件,用于显示新闻内容。组件的模板包括一个标题和新闻列表。
<template>
<div class="news-popup">
<h2>{{ title }}</h2>
<ul>
<li v-for="news in newsList" :key="news.id">
<h3>{{ news.title }}</h3>
<p>{{ news.description }}</p>
</li>
</ul>
<button @click="closePopup">关闭</button>
</div>
</template>
<script>
export default {
props: {
title: String, // 弹框标题
newsList: Array // 新闻列表
},
methods: {
closePopup() {
this.$emit('close'); // 触发关闭事件
}
}
}
</script>
<style scoped>
.news-popup {
background: #fff;
padding: 20px;
}
</style>
当然,这里的模板只是一个小Demo,比较粗糙,实际中具体的需求还得根据各位的需要去调整。比如,你想将这里的关闭按钮功能换成通过点击图标去关闭也是可以的。例如:
<i class="el-icon-circle-close" @click="具体的方法"></i>
这里用到了elment-ui组件库中的图标。
2.在父组件中引用弹窗组件
<template>
<div>
<button @click="showPopup = true">显示新闻弹框</button>
<news-popup v-if="showPopup" :title="popupTitle" :newsList="popupNewsList" @close="showPopup = false"></news-popup>
</div>
</template>
<script>
import NewsPopup from './NewsPopup'
export default {
components: {
NewsPopup
},
data() {
return {
showPopup: false,
popupTitle: '',
popupNewsList: []
}
},
methods: {
loadNews() {
// 发送请求获取新闻数据
// 以下为示例数据
this.popupTitle = '最新新闻';
this.popupNewsList = [
{ id: 1, title: '新闻标题1', description: '新闻内容1' },
{ id: 2, title: '新闻标题2', description: '新闻内容2' },
{ id: 3, title: '新闻标题3', description: '新闻内容3' }
];
}
}
}
</script>
在上述代码中,通过showPopup
变量控制弹框的显示与隐藏,通过@close
事件监听关闭按钮的点击事件,并将showPopup
设置为false
来关闭弹框。loadNews()
方法用于加载新闻数据,在示例中直接在方法内给popupTitle
和popupNewsList
赋值,实际应用中可以根据实际情况发送异步请求获取数据。