这篇文章主要介绍了vue中的slot封装组件弹窗怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中的slot封装组件弹窗怎么实现文章都会有所收获，下面我们一起来看看吧。
slot封装组件弹窗
<template> <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" center> <slot name="content"></slot> </el-dialog></template><script>export default { props: ["title", "width", "dialogVisible"], data() { return {}; }};</script><style lang="less">.el-dialog__header { padding: 20px 20px 10px; display: none;}.el-dialog__body { padding: 0px !important;}</style> <!-- 弹窗 --> <DialogModal :width="'552px'" :title="'加入黑名单'" :dialogVisible="centerDialogVisible"> <div slot="content" class="popup"> <div class="head"> 加入黑名单 <i class="el-icon-close" @click="handelCloseModal()"></i> </div> <p class="isAdd">确定要讲客户王佳琛加入甄别黑名单？</p> <div class="confirm"> <el-button type="primary">确定</el-button> <el-button plain>取消</el-button> </div> </div> </DialogModal> <!-- 弹窗 -->vue组件slot入门---弹窗组件
slot 即插槽，相当于在子组件的 DOM 中留一个位置，父组件如果有需要，就可以在插槽里添加内容。
插槽的基础使用
这里是一个插槽的简单用法。
1.在子组件 Modal.vue 中用 slot 标签预留一个位置，slot 标签中的内容是后备内容，也可以为空：
<div class="modal-content"> <slot>这是个弹框</slot> <div class="footer"> <button @click="close">close</button> <button @click="confirm">confirm</button> </div></div>后备内容：当父组件不在插槽里添加内容时，插槽显示的内容。
2.在父组件中使用子组件
在父组件中使用子组件，但不向自定义组件的插槽 slot 中添加内容：
<Modal :visible.sync="visible"></Modal>此时如果打开弹框，弹框中显示的是后备内容“这是个弹框”：
在父组件中使用子组件，并给插槽加入个性化内容：
<Modal :visible.sync="visible">个性化内容</Modal>此时如果打开弹框，弹框中显示的是“个性化内容”：
弹窗组件
父App.vue
<template> <div id="app"> <button @click="visible = true" class="btn">打开“留言”弹框</button> <button @click="visibleApply = true" class="btn">打开“成为大牛”弹框</button> <!-- “留言”弹框 --> <Modal customClassName="textarea-modal" title="留言" :visible.sync="visible" @confirm="confirm" > <template> <div class="txt">留下你想告诉我们的话...</div> <textarea name="" id="" cols="30" rows="10" placeholder="请写下您的宝贵意见" ></textarea> </template> </Modal> <!-- “成为大牛”弹框 --> <Modal customClassName="apply-modal" title="成为大牛" :visible.sync="visibleApply" @confirm="confirm" > <template> <div class="txt">留下联系方式，立即成为大牛</div> <div class="mobile"> <input type="text" placeholder="请输入您的手机号码" /> </div> <div class="code"> <input type="text" placeholder="请输入验证码" /> <button class="btn-code">获取验证码</button> </div> </template> </Modal> </div></template><script>// 引入组件import Modal from './components/Modal.vue';export default { name: 'app', // 注册组件 components: { Modal }, data: function() { return { // 控制“留言”弹框 visible: false, // 控制“成为大牛”弹框 visibleApply: false }; }, methods: { // 自定义函数 confirm confirm() { // todo } }};</script><style lang="scss">#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}.btn { width: fit-content; height: 40px; font-size: 15px; line-height: 40px; box-sizing: border-box; cursor: pointer; border: none; background: #ffffff; border: 1px solid #ebebeb; color: #1b1b1b; padding: 0 20px; margin-right: 20px; &:focus { outline: none; }}.textarea-modal { .txt { text-align: left; padding-top: 20px; font-size: 16px; line-height: 22px; color: #000000; } textarea { width: 355px; height: 110px; border: 1px solid #e6e6e6; font-size: 16px; line-height: 22px; color: #000000; padding: 14px 20px; box-sizing: border-box; margin-top: 18px; &::placeholder { color: rgba(0, 0, 0, 0.2); } &:focus { outline: none; } }}.apply-modal { .txt { text-align: left; padding-top: 20px; font-size: 16px; line-height: 22px; color: #000000; margin-bottom: 18px; } .mobile input, .code input { width: 355px; height: 50px; background: #ffffff; border: 1px solid #eeeeee; font-size: 16px; color: #000000; padding: 14px 20px; box-sizing: border-box; &::placeholder { color: rgba(0, 0, 0, 0.2); } &:focus { outline: none; } } .code { margin-top: 20px; position: relative; input { padding-right: 120px; } .btn-code { height: 50px; padding: 0 20px; font-size: 14px; line-height: 50px; color: #2c3744; background: none; border: none; position: absolute; top: 0; right: 0; &:focus { outline: none; } &::before { content: ''; display: block; width: 1px; height: 20px; background: #e5e5e5; position: absolute; left: 0; top: 15px; } } }}</style>子Modal.vue
<template> <div :class="['modal', customClassName]" v-if="visible"> <div class="modal-content"> <div class="modal-header"> <div class="title">{{title}}</div> <button class="btn-close" @click="close"></button> </div> <div class="modal-body"> <slot></slot> </div> <div class="modal-footer"> <button class="btn-close" @click="close">取消</button> <button class="btn-confirm" @click="confirm">提交</button> </div> </div> </div></template><script>export default { name: 'Modal', // customClassName 为自定义类名 // title 为弹框 props: ['visible', 'title', 'customClassName'], methods: { close() { this.$emit('update:visible', false); }, confirm() { console.log('confirm'); this.close(); } }};</script><style lang="scss" scoped>.modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(#000, 0.5); display: flex; align-items: center; justify-content: center; .modal-content { width: 415px; background: #fff; border-radius: 12px; text-align: center; .modal-header { height: 65px; position: relative; font-weight: 500; font-size: 18px; line-height: 65px; color: #000000; border-bottom: 1px solid #f2f2f2; .btn-close { width: 16px; height: 16px; background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-5-Vue/5/5-1-1.png) no-repeat center / contain; position: absolute; top: 23px; right: 30px; border: none; cursor: pointer; &:focus { outline: none; } } } .modal-body { padding: 0 30px; font-size: 0; } .modal-footer { padding: 30px; display: flex; justify-content: space-between; .btn-close, .btn-confirm { width: 125px; height: 40px; font-size: 15px; line-height: 40px; box-sizing: border-box; cursor: pointer; border: none; &:focus { outline: none; } } .btn-close { background: #ffffff; border: 1px solid #ebebeb; color: #1b1b1b; } .btn-confirm { background: #3ab599; color: #fff; } } }}</style>关于“vue中的slot封装组件弹窗怎么实现”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue中的slot封装组件弹窗怎么实现”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
