vue实现Android 弹窗

Vue 实现 Android 风格弹窗的方法

使用 Vant 组件库

Vant 是一个轻量、可靠的移动端 Vue 组件库，内置了 Android 风格的弹窗组件。安装 Vant 后可以直接使用 Dialog 组件：

npm install vant

在 Vue 文件中引入并使用：

<template>
  <van-button type="primary" @click="showDialog">显示弹窗</van-button>
  <van-dialog v-model="show" title="提示" message="这是一个Android风格弹窗">
    <template #footer>
      <van-button @click="show = false">取消</van-button>
      <van-button @click="confirmAction">确认</van-button>
    </template>
  </van-dialog>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    showDialog() {
      this.show = true;
    },
    confirmAction() {
      // 确认操作逻辑
      this.show = false;
    }
  }
}
</script>

自定义实现弹窗组件

如果需要完全自定义 Android 风格的弹窗，可以创建一个独立的 Vue 组件：

<!-- AndroidDialog.vue -->
<template>
  <div class="android-dialog-mask" v-if="visible">
    <div class="android-dialog">
      <div class="dialog-title">{{ title }}</div>
      <div class="dialog-content">{{ content }}</div>
      <div class="dialog-buttons">
        <button class="dialog-button" @click="cancel">{{ cancelText }}</button>
        <button class="dialog-button primary" @click="confirm">{{ confirmText }}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String,
    content: String,
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
    confirm() {
      this.$emit('confirm');
    }
  }
}
</script>

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

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

.dialog-title {
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #212121;
}

.dialog-content {
  padding: 0 16px 16px;
  font-size: 14px;
  color: #757575;
}

.dialog-buttons {
  display: flex;
  border-top: 1px solid #eee;
}

.dialog-button {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  font-size: 14px;
  color: #757575;
}

.dialog-button.primary {
  color: #1976D2;
  font-weight: bold;
}
</style>

使用 Quasar Framework

Quasar 是另一个支持 Material Design (Android) 风格的 Vue 框架，提供了丰富的对话框组件：

npm install quasar

使用示例：

<template>
  <q-btn label="显示弹窗" color="primary" @click="showDialog" />
</template>

<script>
import { useQuasar } from 'quasar'
export default {
  setup() {
    const $q = useQuasar()

    function showDialog() {
      $q.dialog({
        title: '提示',
        message: '这是一个Android风格弹窗',
        cancel: true,
        persistent: true
      }).onOk(() => {
        // 确认逻辑
      }).onCancel(() => {
        // 取消逻辑
      })
    }

    return { showDialog }
  }
}
</script>

动画效果增强

为弹窗添加符合 Android 设计规范的动画效果：

/* 在自定义组件样式中添加 */
.android-dialog {
  animation: dialog-enter 0.3s ease-out;
}

@keyframes dialog-enter {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.android-dialog-mask {
  animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

以上方法提供了从使用现成组件库到完全自定义实现 Android 风格弹窗的不同方案，可以根据项目需求选择适合的方式。