vue实现签约合作弹窗

Vue 实现签约合作弹窗

组件结构设计

创建一个独立的 Vue 组件（如 SignContractDialog.vue），包含以下核心结构：

<template>
  <div class="dialog-mask" v-show="visible" @click.self="closeDialog">
    <div class="dialog-container">
      <h3>{{ title }}</h3>
      <div class="dialog-content">
        <!-- 表单内容区域 -->
      </div>
      <div class="dialog-footer">
        <button @click="handleCancel">取消</button>
        <button @click="handleConfirm">确认签约</button>
      </div>
    </div>
  </div>
</template>

状态管理

通过 props 控制弹窗显示/隐藏，并发射事件处理用户操作：

props: {
  visible: Boolean,
  title: {
    type: String,
    default: '合作签约'
  }
},
emits: ['confirm', 'cancel'],
methods: {
  handleConfirm() {
    this.$emit('confirm', formData)
  },
  handleCancel() {
    this.$emit('cancel')
  },
  closeDialog() {
    this.$emit('update:visible', false)
  }
}

表单数据绑定

使用 v-model 绑定表单数据：

<input v-model="formData.companyName" placeholder="公司名称">
<textarea v-model="formData.contractTerms" placeholder="合同条款"></textarea>
<select v-model="formData.contractType">
  <option value="1">年度合作</option>
  <option value="2">项目合作</option>
</select>

动画效果

添加过渡动画增强用户体验：

.dialog-mask {
  position: fixed;
  background: rgba(0,0,0,0.5);
  transition: opacity 0.3s;
}
.dialog-container {
  transform: scale(1);
  transition: transform 0.3s;
}

全局注册与调用

在 main.js 中全局注册组件：

import SignContractDialog from '@/components/SignContractDialog.vue'
app.component('SignContractDialog', SignContractDialog)

父组件调用方式：

<sign-contract-dialog 
  v-model:visible="showDialog"
  @confirm="onConfirm"
  @cancel="onCancel"
/>

移动端适配

添加响应式样式确保移动端显示正常：

@media (max-width: 768px) {
  .dialog-container {
    width: 90%;
    margin: 10vh auto;
  }
}

表单验证

使用 VeeValidate 或自定义验证规则：

const rules = {
  companyName: [{ required: true, message: '请输入公司名称' }],
  contractType: [{ required: true, message: '请选择合同类型' }]
}