当前位置：首页 > VUE

vue实现Android 弹窗

2026-03-28 19:53:00VUE

Vue 实现 Android 风格弹窗

在 Vue 中实现类似 Android 的弹窗效果，可以通过自定义组件或结合第三方库完成。以下是两种常见实现方式：

使用 Vue 自定义组件

创建一个基础的弹窗组件，通过 v-model 控制显示/隐藏，并添加动画效果模拟 Android 原生弹窗行为。

<!-- AndroidDialog.vue -->
<template>
  <transition name="fade">
    <div class="android-dialog-mask" v-if="visible" @click.self="close">
      <div class="android-dialog">
        <h3 class="title">{{ title }}</h3>
        <div class="content">
          <slot></slot>
        </div>
        <div class="actions">
          <button @click="close">取消</button>
          <button @click="confirm">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

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

<style scoped>
.android-dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.android-dialog {
  width: 80%;
  max-width: 300px;
  background: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

.title {
  padding: 16px;
  margin: 0;
  font-size: 1.2em;
  color: #212121;
}

.content {
  padding: 0 16px 16px;
  color: #757575;
}

.actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px;
}

button {
  margin-left: 8px;
  min-width: 64px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #1976d2;
  text-transform: uppercase;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用 Vuetify 组件库

如果项目中使用 Vuetify，可以直接调用其内置的 v-dialog 组件，默认设计符合 Material Design 规范（Android 原生风格）。

<template>
  <v-dialog v-model="dialog" max-width="290">
    <v-card>
      <v-card-title class="headline">标题</v-card-title>
      <v-card-text>这里是弹窗内容</v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" text @click="dialog = false">取消</v-btn>
        <v-btn color="primary" text @click="dialog = false">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialog: false
    }
  }
}
</script>