vue中的slot封装组件弹窗怎么实现

这篇文章主要介绍了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封装组件弹窗怎么实现”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。