当前位置：首页 > VUE

vue实现Android 弹窗

2026-01-15 06:23:18VUE

Vue 实现 Android 风格弹窗

在 Vue 中实现 Android 风格的弹窗可以通过自定义组件或结合第三方库完成。以下是几种实现方式：

使用 Vue 自定义组件

创建自定义弹窗组件，模拟 Android 的 Material Design 风格：

<template>
  <div class="modal-overlay" v-if="show" @click.self="close">
    <div class="android-modal">
      <div class="modal-header">
        <h3>{{ title }}</h3>
      </div>
      <div class="modal-content">
        <slot></slot>
      </div>
      <div class="modal-actions">
        <button @click="close">取消</button>
        <button @click="confirm">确定</button>
      </div>
    </div>
  </div>
</template>

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

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.android-modal {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 280px;
  max-width: 90%;
}

.modal-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.modal-content {
  padding: 16px;
}

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

button {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #1976d2;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
}
</style>

使用 Vuetify 库

Vuetify 提供了现成的 Material Design 组件，包括对话框：

<template>
  <v-dialog v-model="dialog" width="auto">
    <v-card>
      <v-card-title>标题</v-card-title>
      <v-card-text>
        弹窗内容
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" @click="dialog = false">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

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

使用 Quasar Framework

Quasar 也提供了 Material Design 风格的对话框组件：

<template>
  <q-dialog v-model="dialog">
    <q-card>
      <q-card-section>
        <div class="text-h6">标题</div>
      </q-card-section>

      <q-card-section>
        弹窗内容
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="取消" color="primary" v-close-popup />
        <q-btn flat label="确定" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

实现底部弹窗（Bottom Sheet）

Android 风格的底部弹窗实现：

<template>
  <div class="bottom-sheet-overlay" v-if="show" @click.self="close">
    <div class="bottom-sheet">
      <div class="sheet-header">
        <div class="drag-handle"></div>
      </div>
      <div class="sheet-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style>
.bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  max-height: 80vh;
}

.sheet-header {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

.drag-handle {
  width: 40px;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
}
</style>

这些方法可以根据项目需求选择使用，自定义组件方式灵活性最高，而使用 UI 框架可以快速实现标准化设计。

vue实现Android 弹窗