当前位置：首页 > VUE

vue实现联系我们

2026-02-17 13:25:52VUE

Vue 实现联系我们页面

在 Vue 中实现“联系我们”页面，通常需要包含表单提交、地图展示、联系方式展示等功能。以下是具体实现方法：

表单组件设计

创建一个表单组件，包含姓名、邮箱、电话、留言等字段，并添加表单验证功能：

<template>
  <form @submit.prevent="handleSubmit">
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" id="name" v-model="form.name" required>
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input type="email" id="email" v-model="form.email" required>
    </div>
    <div class="form-group">
      <label for="phone">电话</label>
      <input type="tel" id="phone" v-model="form.phone">
    </div>
    <div class="form-group">
      <label for="message">留言</label>
      <textarea id="message" v-model="form.message" required></textarea>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        phone: '',
        message: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      // 表单验证逻辑
      if (!this.form.name || !this.form.email || !this.form.message) {
        alert('请填写必填字段');
        return;
      }

      // 提交表单数据
      console.log('提交数据:', this.form);
      // 这里可以调用API发送数据到后端
    }
  }
}
</script>

集成地图功能

使用第三方地图API（如百度地图、高德地图或Google Maps）展示公司位置：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    // 初始化地图
    this.initMap();
  },
  methods: {
    initMap() {
      // 这里以百度地图为例
      const map = new BMap.Map("map-container");
      const point = new BMap.Point(116.404, 39.915); // 公司坐标
      map.centerAndZoom(point, 15);

      // 添加标记
      const marker = new BMap.Marker(point);
      map.addOverlay(marker);

      // 添加信息窗口
      const infoWindow = new BMap.InfoWindow("公司地址");
      marker.addEventListener("click", () => {
        marker.openInfoWindow(infoWindow);
      });
    }
  }
}
</script>

联系方式展示

添加公司联系方式区块，包括地址、电话、邮箱等信息：

<template>
  <div class="contact-info">
    <h3>联系方式</h3>
    <ul>
      <li><i class="icon-address"></i> 公司地址：北京市朝阳区某某大厦</li>
      <li><i class="icon-phone"></i> 联系电话：010-12345678</li>
      <li><i class="icon-email"></i> 电子邮箱：contact@example.com</li>
      <li><i class="icon-time"></i> 工作时间：周一至周五 9:00-18:00</li>
    </ul>
  </div>
</template>

样式美化

为表单和联系方式添加CSS样式：

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.contact-info {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.contact-info ul {
  list-style: none;
  padding: 0;
}

.contact-info li {
  margin-bottom: 10px;
}

#map-container {
  height: 400px;
  margin-top: 20px;
}

表单提交处理

实际项目中，需要将表单数据发送到后端API：

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/contact', this.form);
      alert('提交成功！');
      this.form = { name: '', email: '', phone: '', message: '' };
    } catch (error) {
      alert('提交失败，请重试');
      console.error(error);
    }
  }
}

完整页面集成

将所有组件集成到一个完整的联系我们页面：

<template>
  <div class="contact-page">
    <h2>联系我们</h2>
    <div class="contact-content">
      <ContactForm />
      <ContactMap />
      <ContactInfo />
    </div>
  </div>
</template>

<script>
import ContactForm from './ContactForm.vue';
import ContactMap from './ContactMap.vue';
import ContactInfo from './ContactInfo.vue';

export default {
  components: {
    ContactForm,
    ContactMap,
    ContactInfo
  }
}
</script>

<style>
.contact-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
  }
}
</style>