vue3+ElementUI 图片素材管理组件
<template>
<div class="image-gallery">
<el-upload
action="#"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="handleChange"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import { ref } from 'vue';
import { ElUpload, ElDialog } from 'element-ui';
export default {
components: {
ElUpload,
ElDialog
},
setup() {
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const handleRemove = (file, fileList) => {
console.log(file, fileList);
};
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.url;
dialogVisible.value = true;
};
const handleChange = (file, fileList) => {
console.log(file, fileList);
};
return {
fileList,
dialogImageUrl,
dialogVisible,
handleRemove,
handlePictureCardPreview,
handleChange
};
}
};
</script>
<style>
.image-gallery {
/* 样式按需定制 */
}
</style>
这个代码实例提供了一个简单的图片库管理组件,使用了Element UI的<el-upload>
组件来上传图片,并使用<el-dialog>
组件来预览图片。组件的交互通过Vue 3的Composition API进行了封装,使得逻辑更加集中和清晰。
评论已关闭