利用element-plus写一个漂亮的带图片的添加页面
时间: 2024-02-01 07:14:55 浏览: 27
好的,下面是一个利用Element Plus写的带图片的添加页面示例:
```vue
<template>
<div class="add-page">
<el-form :model="form" label-width="120px">
<el-form-item label="商品名称">
<el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
</el-form-item>
<el-form-item label="商品价格">
<el-input-number v-model="form.price" :min="0" :max="9999" :step="0.01"></el-input-number>
</el-form-item>
<el-form-item label="商品图片">
<el-upload
action=""
:file-list="form.imageList"
:show-file-list="false"
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:limit="1"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="商品描述">
<el-input v-model="form.description" type="textarea" rows="4"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
price: '',
imageList: [],
description: ''
}
}
},
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
handleUploadSuccess(response, file, fileList) {
this.form.imageList.push({
url: URL.createObjectURL(file.raw),
name: file.name
})
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 张图片,本次选择了 ${files.length} 张图片,已自动筛选前一张!`)
fileList.splice(1)
},
handleSubmit() {
// 提交表单逻辑
},
handleReset() {
this.form.name = ''
this.form.price = ''
this.form.imageList = []
this.form.description = ''
}
}
}
</script>
<style lang="scss" scoped>
.add-page {
.el-form-item__label {
font-weight: bold;
}
.el-upload {
width: 120px;
height: 120px;
border: 1px dashed #d9d9d9;
border-radius: 4px;
background-color: #f7f7f7;
margin-top: 10px;
.el-icon-plus {
font-size: 28px;
color: #999;
line-height: 120px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
</style>
```
在这个示例中,我们使用了`el-upload`组件来实现图片上传功能,并对上传的图片进行格式、大小的限制,同时在上传成功后将图片预览到页面上。你可以根据需求对页面进行样式和逻辑的修改。