Vue中一个新闻类型的弹框Demo

1.设计弹框组件
首先,创建一个名为NewsPopup的弹框组件,用于显示新闻内容。组件的模板包括一个标题和新闻列表。





 当然,这里的模板只是一个小Demo,比较粗糙,实际中具体的需求还得根据各位的需要去调整。比如,你想将这里的关闭按钮功能换成通过点击图标去关闭也是可以的。例如:

 这里用到了elment-ui组件库中的图标。

2.在父组件中引用弹窗组件 



在上述代码中,通过showPopup变量控制弹框的显示与隐藏,通过@close事件监听关闭按钮的点击事件,并将showPopup设置为false来关闭弹框。loadNews()方法用于加载新闻数据,在示例中直接在方法内给popupTitlepopupNewsList赋值,实际应用中可以根据实际情况发送异步请求获取数据。

你可能感兴趣的:(vue.js,前端,javascript)