利用element组件做一个联系我们的界面
时间: 2023-10-08 09:11:12 浏览: 25
以下是一个示例代码,使用element组件实现联系我们的界面:
```html
<template>
<div class="contact-us">
<h2>联系我们</h2>
<el-form :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="留言">
<el-input type="textarea" v-model="form.message"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
email: '',
phone: '',
message: ''
}
}
},
methods: {
submitForm() {
// 提交表单的代码
}
}
}
</script>
```
在上面的示例中,我们使用了`el-form`、`el-form-item`、`el-input`和`el-button`等element组件来实现联系我们的界面。`el-form`是一个表单组件,用于包含表单元素,同时提供了表单验证和提交的功能。每个表单元素都需要包含在`el-form-item`中,并且需要指定一个`label`属性用于显示表单元素的标签。`el-input`是一个输入框组件,用于接收用户的输入。最后,我们使用了`el-button`来提供一个提交按钮,点击按钮后会触发`submitForm`方法,我们可以在该方法中编写提交表单的代码。