vue实现弹窗组件

实现弹窗组件的基本结构

在Vue中创建一个弹窗组件通常需要三个核心部分：组件模板、样式和逻辑控制。弹窗组件应具备打开、关闭功能，并支持内容插槽或属性传入。

<template>
  <div class="modal-mask" v-show="visible" @click.self="close">
    <div class="modal-container">
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <button class="close-btn" @click="close">&times;</button>
      </div>
      <div class="modal-body">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <button @click="close">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-container {
  background: white;
  width: 80%;
  max-width: 500px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 15px;
}

.modal-footer {
  padding: 15px;
  border-top: 1px solid #eee;
  text-align: right;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
</style>

使用v-model控制弹窗显示

通过v-model可以更方便地控制弹窗显示状态，需要修改组件以支持v-model语法糖：

props: {
  value: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '提示'
  }
},
methods: {
  close() {
    this.$emit('input', false)
  }
}

父组件中使用方式：

<modal v-model="showModal" title="自定义标题">
  <p>这里是弹窗内容</p>
</modal>

添加动画效果

使用Vue的transition组件为弹窗添加淡入淡出效果：

<template>
  <transition name="modal-fade">
    <div class="modal-mask" v-show="value" @click.self="close">
      <!-- 其余内容不变 -->
    </div>
  </transition>
</template>

<style scoped>
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-container {
  /* 添加容器动画 */
  transition: all 0.3s ease;
  transform: scale(1);
}

.modal-fade-enter .modal-container,
.modal-fade-leave-to .modal-container {
  transform: scale(1.1);
}
</style>

全局弹窗服务模式

对于需要全局调用的弹窗，可以创建服务模式的弹窗组件：

// ModalService.js
import Vue from 'vue'

const ModalConstructor = Vue.extend(require('./Modal.vue').default)

const Modal = (options) => {
  const instance = new ModalConstructor({
    propsData: options
  }).$mount()

  document.body.appendChild(instance.$el)

  return {
    show() {
      instance.value = true
    },
    hide() {
      instance.value = false
    }
  }
}

export default Modal

使用方式：

import Modal from './ModalService'

const modal = Modal({
  title: '服务模式弹窗',
  content: '这是通过服务调用的弹窗'
})

modal.show()

高级功能扩展

为弹窗组件添加更多实用功能：

props: {
  // 添加新属性
  showClose: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  width: {
    type: String,
    default: '500px'
  },
  customClass: {
    type: String,
    default: ''
  }
},
computed: {
  modalStyle() {
    return {
      width: this.width
    }
  }
}

模板调整：

<div class="modal-container" :style="modalStyle" :class="customClass">
  <div class="modal-header" v-if="title || showClose">
    <h3>{{ title }}</h3>
    <button class="close-btn" @click="close" v-if="showClose">&times;</button>
  </div>
  <div class="modal-body">
    <slot></slot>
  </div>
  <div class="modal-footer" v-if="showFooter">
    <slot name="footer">
      <button @click="close">关闭</button>
    </slot>
  </div>
</div>

注意事项

弹窗组件需要考虑无障碍访问，添加适当的ARIA属性：

<div class="modal-mask" 
     role="dialog"
     aria-modal="true"
     :aria-labelledby="title ? 'modal-title' : null">
  <div class="modal-container">
    <div class="modal-header" v-if="title || showClose">
      <h3 id="modal-title">{{ title }}</h3>
      <!-- 其余内容不变 -->
    </div>
  </div>
</div>

对于频繁使用的弹窗，建议将其注册为全局组件：

// main.js
import Modal from './components/Modal.vue'

Vue.component('Modal', Modal)