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: '请选择合同类型' }]
}
