vue中的slot封裝組件彈窗

更新時(shí)間：2022年05月27日 16:49:04 作者：景塵

這篇文章主要介紹了vue中的slot封裝組件彈窗，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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">確定要講客戶(hù)王佳琛加入甄別黑名單？</p>
            <div class="confirm">
              <el-button type="primary">確定</el-button>
              <el-button plain>取消</el-button>
            </div>
          </div>
        </DialogModal>
 
        <!-- 彈窗 -->

vue組件slot入門(mén)---彈窗組件

slot 即插槽，相當(dāng)于在子組件的 DOM 中留一個(gè)位置，父組件如果有需要，就可以在插槽里添加內(nèi)容。

插槽的基礎(chǔ)使用

這里是一個(gè)插槽的簡(jiǎn)單用法。

1.在子組件 Modal.vue 中用 slot 標(biāo)簽預(yù)留一個(gè)位置，slot 標(biāo)簽中的內(nèi)容是后備內(nèi)容，也可以為空：

<div class="modal-content">
  <slot>這是個(gè)彈框</slot>
  <div class="footer">
    <button @click="close">close</button>
    <button @click="confirm">confirm</button>
  </div>
</div>

后備內(nèi)容：當(dāng)父組件不在插槽里添加內(nèi)容時(shí)，插槽顯示的內(nèi)容。

2.在父組件中使用子組件

在父組件中使用子組件，但不向自定義組件的插槽 slot 中添加內(nèi)容：

<Modal :visible.sync="visible"></Modal>

此時(shí)如果打開(kāi)彈框，彈框中顯示的是后備內(nèi)容“這是個(gè)彈框”：

在這里插入圖片描述

在父組件中使用子組件，并給插槽加入個(gè)性化內(nèi)容：

<Modal :visible.sync="visible">個(gè)性化內(nèi)容</Modal>

此時(shí)如果打開(kāi)彈框，彈框中顯示的是“個(gè)性化內(nèi)容”：

在這里插入圖片描述

彈窗組件

父App.vue

<template>
  <div id="app">
    <button @click="visible = true" class="btn">打開(kāi)“留言”彈框</button>
    <button @click="visibleApply = true" class="btn">打開(kāi)“成為大?！睆椏?lt;/button>
    <!-- “留言”彈框 -->
    <Modal
      customClassName="textarea-modal"
      title="留言"
      :visible.sync="visible"
      @confirm="confirm"
    >
      <template>
        <div class="txt">留下你想告訴我們的話...</div>
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="請(qǐng)寫(xiě)下您的寶貴意見(jiàn)"
        ></textarea>
      </template>
    </Modal>
    <!-- “成為大牛”彈框 -->
    <Modal
      customClassName="apply-modal"
      title="成為大牛"
      :visible.sync="visibleApply"
      @confirm="confirm"
    >
      <template>
        <div class="txt">留下聯(lián)系方式，立即成為大牛</div>
        <div class="mobile">
          <input type="text" placeholder="請(qǐng)輸入您的手機(jī)號(hào)碼" />
        </div>
        <div class="code">
          <input type="text" placeholder="請(qǐng)輸入驗(yàn)證碼" />
          <button class="btn-code">獲取驗(yàn)證碼</button>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script>
// 引入組件
import Modal from './components/Modal.vue';
export default {
  name: 'app',
  // 注冊(cè)組件
  components: {
    Modal
  },
  data: function() {
    return {
      // 控制“留言”彈框
      visible: false,
      // 控制“成為大?！睆椏?
      visibleApply: false
    };
  },
  methods: {
    // 自定義函數(shù) 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 為自定義類(lèi)名
? // title 為彈框標(biāo)題
? 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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: