制作一个html活动界面代码,运用vant实现表单,按钮和弹窗
时间: 2023-05-11 12:02:54 浏览: 322
好的,以下是一个简单的 HTML 活动界面代码,使用 Vant 实现表单、按钮和弹窗:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>活动界面</title>
<!-- 引入 Vant 样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/vant/2.12.19/index.css">
</head>
<body>
<div id="app">
<!-- 表单 -->
<van-form @submit="onSubmit">
<van-field v-model="name" label="姓名" placeholder="请输入姓名"></van-field>
<van-field v-model="phone" label="手机号" placeholder="请输入手机号"></van-field>
<van-field v-model="email" label="邮箱" placeholder="请输入邮箱"></van-field>
<van-button type="primary" native-type="submit">提交</van-button>
</van-form>
<!-- 弹窗 -->
<van-dialog v-model="showDialog" title="提示" message="提交成功!"></van-dialog>
</div>
<!-- 引入 Vue.js 和 Vant.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.19/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: '',
phone: '',
email: '',
showDialog: false
},
methods: {
onSubmit() {
// 提交表单的逻辑
// ...
// 弹出提交成功的弹窗
this.showDialog = true;
}
}
});
</script>
</body>
</html>
```
这个界面包含一个表单和一个弹窗,用户可以在表单中输入姓名、手机号和邮箱,点击提交按钮后,表单会被提交,同时弹出一个提示框告诉用户提交成功。这个界面使用了 Vant 的组件,包括 `van-form`、`van-field`、`van-button` 和 `van-dialog`。