Vue中一个新闻类型的弹框Demo-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中一个新闻类型的弹框Demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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赋值，实际应用中可以根据实际情况发送异步请求获取数据。文章来源地址https://www.toymoban.com/news/detail-623169.html

到了这里，关于Vue中一个新闻类型的弹框Demo的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！