基于Vue 的文本类弹框代码Demo

<template><div class="text-popup" v-if="showPopup"><h2>{{ title }}</h2><p>{{ content }}</p><button @click="closePopup">关闭</button></div><div class="main-content"><button @click="showPopup = true">显示文本弹框</button></div>
</template><script>
export default {data() {return {showPopup: false,title: '文本弹框',content: '这是一段文本内容，可以根据实际需求进行修改。'};},methods: {closePopup() {this.showPopup = false;}}
};
</script><style scoped>
.text-popup {background: #fff;padding: 20px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;
}.main-content {display: flex;justify-content: center;align-items: center;height: 100vh;
}
</style>

在上述代码中，我们创建了一个名为 TextPopup 的组件。点击 “显示文本弹框” 按钮时，会触发 showPopup 的变化，显示文本弹框。文本弹框的内容包括一个标题和一段文本内容。点击 “关闭” 按钮时，会关闭文本弹框。

你可以根据实际需求修改标题、内容以及样式，将该组件嵌入到你的 Vue 应用中。