vue实现签约合作弹窗
实现思路
使用Vue的组件化特性封装签约合作弹窗，通过v-model或props控制显示/隐藏，结合<transition>实现动画效果。弹窗内容可包含表单、协议条款等交互元素。
基础组件结构
<template>
<transition name="fade">
<div class="contract-modal" v-show="visible">
<div class="modal-content">
<h3>签约合作</h3>
<div class="contract-text">这里是协议内容...</div>
<form @submit.prevent="handleSubmit">
<input v-model="formData.name" placeholder="企业名称">
<button type="submit">确认签约</button>
</form>
<button @click="close">关闭</button>
</div>
</div>
</transition>
</template>核心功能实现
<script>
export default {
props: {
value: Boolean // 通过v-model控制显示
},
data() {
return {
formData: {
name: ''
}
}
},
computed: {
visible: {
get() { return this.value },
set(val) { this.$emit('input', val) }
}
},
methods: {
close() {
this.visible = false
},
handleSubmit() {
// 提交逻辑
console.log('签约数据:', this.formData)
this.close()
}
}
}
</script>样式设计
<style scoped>
.contract-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
width: 80%;
max-width: 500px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>使用示例
<template>
<div>
<button @click="showModal = true">打开签约弹窗</button>
<contract-modal v-model="showModal"/>
</div>
</template>
<script>
import ContractModal from './ContractModal.vue'
export default {
components: { ContractModal },
data() {
return {
showModal: false
}
}
}
</script>进阶功能建议
-
协议内容滚动确认：添加滚动监听，确保用户阅读完协议才允许签约
data() { return { isScrolledToBottom: false } }, methods: { handleScroll(e) { const el = e.target this.isScrolledToBottom = el.scrollHeight - el.scrollTop === el.clientHeight } } -
多步骤签约流程：使用动态组件切换不同签约阶段
<component :is="currentStepComponent"/> -
电子签名支持：集成签名板组件
<signature-pad @save="saveSignature"/> -
移动端适配：通过媒体查询调整弹窗样式
@media (max-width: 768px) { .modal-content { width: 95%; } }
