公司网站数据分析公司,有什么网站开发软件,杭州下沙开发区建设局网站,中文域名值得注册吗1.设计弹框组件 首先#xff0c;创建一个名为NewsPopup的弹框组件#xff0c;用于显示新闻内容。组件的模板包括一个标题和新闻列表。
templatediv classnews-popuph2{{ title }}/h2ulli v-fornews in newsL…1.设计弹框组件 首先创建一个名为NewsPopup的弹框组件用于显示新闻内容。组件的模板包括一个标题和新闻列表。
templatediv classnews-popuph2{{ title }}/h2ulli v-fornews in newsList :keynews.idh3{{ news.title }}/h3p{{ news.description }}/p/li/ulbutton clickclosePopup关闭/button/div
/templatescript
export default {props: {title: String, // 弹框标题newsList: Array // 新闻列表},methods: {closePopup() {this.$emit(close); // 触发关闭事件}}
}
/scriptstyle scoped
.news-popup {background: #fff;padding: 20px;
}
/style 当然这里的模板只是一个小Demo比较粗糙实际中具体的需求还得根据各位的需要去调整。比如你想将这里的关闭按钮功能换成通过点击图标去关闭也是可以的。例如
i classel-icon-circle-close click具体的方法/i 这里用到了elment-ui组件库中的图标。
2.在父组件中引用弹窗组件
templatedivbutton clickshowPopup true显示新闻弹框/buttonnews-popup v-ifshowPopup :titlepopupTitle :newsListpopupNewsList closeshowPopup false/news-popup/div
/templatescript
import NewsPopup from ./NewsPopupexport 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赋值实际应用中可以根据实际情况发送异步请求获取数据。
