如何将Vue弹窗组件改写为支持长尾词的智能问答系统？

本文共计737个文字，预计阅读时间需要3分钟。

原文：本文字例为大家庭分享了Vue弹窗组件的实现具体代码，供大家参考，具体内容如下：

+ 弹窗组件包含内容：+ 弹窗遮罩层 + 内容层的实现（包括slot、props、$on、$emit）

实现步骤：

1.搭建组件结构

结果：搭建组件结构

本文实例为大家分享了Vue弹窗组件的实现具体代码，供大家参考，具体内容如下

弹窗组件包含内容：

• 弹窗遮罩层
• 内容层的实现（涉及slot、props、$on、$emit）

实现步骤：

1、搭建组件UI样式，HTML、css实现遮罩层、内容区
2、编写弹窗内容：通过组件slot插槽接收父组件传递过来的弹窗内容
3、组件开关的实现：通过父组件传递进来的props控制组件的显示与隐藏，子组件关闭时通过事件 $emit 触发父组件改变状态值。

组件代码实现

<template>     <div class="modal-bg" v-show="show">         <div class="modal-container">             <div class="modal-header">                 {{title}}             </div>             <div class="modal-main">                 <!--                      如果有多个插槽时，可以采用具名插槽的方式实现                     <slot name="main"></slot>                  -->                 <slot></slot>             </div>             <div class="modal-footer">                 <button @click="close">关 闭</button>                 <button @click="submit">确 定</button>             </div>         </div>     </div> </template> <script> export default{     name: 'modal',     data() {         return {}         },     props: {         show: {    // 控制弹窗展示             type: Boolean,             default: false,                 required: true,   // 必传递         },         title: {             type: String,             default: 'title',         }     },     methods: {         // 通过事件绑定及$emit来执行父组件的方法，改变弹窗展示状态         close() {             this.$emit("hideModal");             },         submit() {             this.$emit("submit");             }     } } </script> <style> .modal-bg{     position: fixed;     top: 0;     right: 0;     bottom: 0;     left: 0;     display: flex;     justify-content: center;     align-items: center;     background: rgba(0, 0, 0, .4);     z-index:999; } .modal-container{     border-radius: 8px;     background: #fff; } .model-header{     heigth: 60px;     background: blue;     color:#fff; } .modal-main {     padding: 20px 40px; } .modal-footer{     height: 60px;     display: flex;     justify-content: center;     align-item: center;     border-top: 1px solid #000; } .modal-footer button{     width:100px; } </style>

父组件中调用：

<template>     <div>         <Modal :show="show" :title="title" @hideModal="hideModal" @submit="submit">             <!--                  向 slot 插槽中展示的内容                  具名传递： <div slot="main">我是具名插槽传递内容的</div>             -->             <div>我是slot中的内容</div>         </Modal>     </div> </template> <script> import Modal from "./modal.vue"; export default {     name: "parentVue",     data() {         return {             show: false,             title: "我是弹窗标题",         }         },     components: {         Modal,     },     methods: {         // 关闭弹窗         hideModal() {             this.show = false;         }         // 显示弹窗         submit() {             this.show = true;             }     } } </script> <style> </style>

温馨提示：

目前的市面上，有很多现有的 UI 组件库，如Element-UI等，很少会直接编写UI样式代码之类的操作，可以直接使用第三方库完成项目需求。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。