使用vue3 的新特性“teleport”创建一个modal

创建modal一个组件

我们可以在components目录下面创建一个名为：SampleModal.vue的组件。

<script setup lang="ts">
const props = defineProps({
    isVisible:{
        required:true,
        type:Boolean,
        default:false
    },
    with:{
        type:String,
        default:'450px'
    },
    bgColor:{
        type:String,
        default:'#ffffff'
    },
    borderRadius:{
        type:String,
        default:'4px'
    },
    title:{
        type:String,
        default:'Sample Modal'
    },
    closable:{
        type:Boolean,
        default:true
    },
    footer:{
        type:Boolean,
        default:true
    }
})

const emit = defineEmits(['close','ok'])

function close()  {
  emit('close')
}

function ok()  {
    emit('ok')
}

</script>

<template>
  <teleport to="body">
      <div class="modal" id="sample-modal" v-show="isVisible" @click="close"></div>
      <div
          :style="{
            width:props.with,
            backgroundColor:bgColor,
            borderRadius:borderRadius
          }"
          class="modal-content"
          v-show="isVisible"
      >
          <div class="header">
              <p>{{props.title}}</p>
              <v-icon v-if="closable" @click="close" class="active" color="#8C8C8C">mdi-close</v-icon>
          </div>
          <div class="content">
              <slot>自定义好看的modal</slot>
          </div>
          <div v-if="footer" class="footer">
              <v-btn @click="close" class="com-btn">取 消</v-btn>
              <v-btn @click="ok" class="com-btn confirm" color="#1677FF">确 定</v-btn>
          </div>
      </div>
  </teleport>
</template>

<style scoped lang="scss">
.modal{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}
.modal-content{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding-bottom: 14px;
    .header{
        display: flex;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px solid #eeeeee;
        padding: 14px;
        .active:hover{
            color: #1a1a1a !important;
            cursor: pointer;
        }
    }
    .content{
        padding: 20px;
    }
    .footer{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        padding-right: 20px;
        .com-btn{
            margin-left: 20px;
        }
        .confirm{
            color: #ffffff;
        }
    }
}

</style>

可以添加自己的自定义事件，使Modal更加完美！

使用SampleModal组件

<template>
  <v-btn @click="openSampleModal">打开modal</v-btn>
  <sample-modal
      :is-visible="sampleModalVisible"
      @close="closeSampleModal"
      @ok="confirmSampleModal"
      :footer="false"
  ></sample-modal>
</template>

<script lang="ts" setup>
import SampleModal from "../components/SampleModal.vue";
import {ref} from "vue";
const sampleModalVisible = ref(false)
const closeSampleModal = () => {
    sampleModalVisible.value = false
}

const openSampleModal = () => {
    sampleModalVisible.value = true
}
const confirmSampleModal = () => {
  console.log('222')
  sampleModalVisible.value = false
}
</script>