阅读量:0
"vue-cropperjs": "4", "v-viewer": "^1.6.4", "viewerjs": "^1.10.4"
(一)案例一
ImgCropper.vue
<template> <el-dialog title="编辑图片" :visible="show" @close="$emit('update:show', false)" :close-on-click-modal="false" :append-to-body="true" destroy-on-close v-on="$listeners" > <!-- 对话框内容 --> </el-dialog> </template> <script> export default { props: { show: { type: Boolean, default: false } } } </script> <style lang="scss" scoped> </style>
这个
<el-dialog>
是 Element UI 框架中用于创建对话框组件的标签。以下是各个属性和事件的说明:
title="编辑图片"
:设置对话框的标题为“编辑图片”。:visible="show"
:绑定对话框的可见性到show
变量,show
是一个布尔值,控制对话框的显示和隐藏。@close="$emit('update:show', false)"
:监听close
事件,当对话框关闭时,触发update:show
事件并将show
设置为false
。:close-on-click-modal="false"
:设置为false
禁止点击对话框外部区域关闭对话框。:append-to-body="true"
:将对话框的 DOM 节点插入到body
元素中,而不是插入到当前组件的父级元素中。destroy-on-close
:对话框关闭时销毁对话框内的子元素。v-on="$listeners"
:将父组件传递给当前组件的所有事件监听器绑定到<el-dialog>
上
(二)案例二
ImgView.vue
<template> <div> <el-upload ref="element-upload" action="#" :auto-upload="false" list-type="picture-card" :file-list="files" :on-change="onChange" :on-preview="onActivatefile" :on-remove="onRemove" :http-request="httpRequest" > <i class="el-icon-plus"></i> </el-upload> </div> </template> <script> export default { data () { return { files: [] // 上传文件列表 }; }, methods: { // 选择图片触发 onChange(file, fileList) { // 文件变更时执行的操作 }, // 点击预览 onActivatefile(file) { // 点击图片预览时执行的操作 }, // 删除图片 onRemove(file, fileList) { // 删除图片时执行的操作 }, // 自定义上传请求 async httpRequest() { // 自定义上传逻辑 } } }; </script>
属性解析
ref="element-upload"
:给上传组件设置引用名称,方便在代码中通过this.$refs
获取组件实例。action="#"
:设置上传的 URL,由于值为#
表示没有实际上传路径。:auto-upload="false"
:设置为false
表示选择文件后不会立即上传,需要手动触发上传。list-type="picture-card"
:使用图片卡片样式来展示上传的文件。:file-list="files"
:绑定组件显示的文件列表到files
数据,files
是一个数组,包含上传文件的信息对象。:on-change="onChange"
:绑定文件改变时的回调方法。:on-preview="onActivatefile"
:绑定文件预览时的回调方法。:on-remove="onRemove"
:绑定文件移除时的回调方法。:http-request="httpRequest"
:绑定自定义上传请求方法。方法解析
onChange(file, fileList)
: 文件改变时触发,可以在此方法中处理文件选择逻辑。onActivatefile(file)
: 点击文件预览图标时触发,可以在此方法中实现预览逻辑。onRemove(file, fileList)
: 文件删除时触发,可以在此方法中处理删除逻辑。httpRequest
: 自定义上传请求逻辑,可以在此方法中实现文件上传到服务器的逻辑。
(三)案例三
ImgView.vue
<template> <div> <!-- 上传组件 --> <el-upload ref="element-upload" action="#" :auto-upload="false" list-type="picture-card" :file-list="files" :on-change="onChange" :on-preview="onActivatefile" :on-remove="onRemove" :http-request="httpRequest" > <i class="el-icon-plus"></i> </el-upload> <!-- 裁剪组件 --> <ImgCropper :show.sync="cropper.show" :file="cropper.file" @open="onCropperOpen" @close="onCropperClose" @closed="onCropperClosed" @confirm="onCropperConfirm" @cancel="onCropperCancel" /> </div> </template> <script> import ImgCropper from './ImgCropper.vue'; export default { name: "ImgView", components: { ImgCropper, }, data () { return { files: [], // 上传文件列表 cropper: { show: false, file: null, submitted: false, }, }; }, methods: { /* eslint-disable */ // 选择图片触发 onChange(file, fileList) { // 可以在这里处理文件改变的逻辑 }, // 点击预览 onActivatefile(file) { // 处理文件预览的逻辑 }, // 删除图片 onRemove(file, fileList) { // 处理文件删除的逻辑 }, // 自定义上传请求 async httpRequest() { // 自定义上传逻辑 }, // 确定裁剪 onCropperConfirm() { // 处理裁剪确认的逻辑 }, // 取消裁剪 onCropperCancel() { // 处理裁剪取消的逻辑 }, // 弹框打开 onCropperOpen() { // 弹框打开时的逻辑 }, // 弹框关闭 onCropperClose() { // 弹框关闭时的逻辑 }, // 弹框已经关闭 onCropperClosed() { // 弹框已经关闭后的逻辑 }, }, }; </script>
属性解析 (
el-upload
)
ref="element-upload"
:用于在代码中通过this.$refs
访问组件实例。action="#"
:上传的 URL,#
表示无实际路径。:auto-upload="false"
:不自动上传文件,需要手动触发上传。list-type="picture-card"
:使用图片卡片样式展示文件。:file-list="files"
:绑定显示的文件列表。:on-change="onChange"
:绑定文件改变时的回调方法。:on-preview="onActivatefile"
:绑定文件预览时的回调方法。:on-remove="onRemove"
:绑定文件删除时的回调方法。:http-request="httpRequest"
:绑定自定义上传请求的方法。属性解析 (
ImgCropper
)
:show.sync="cropper.show"
:双向绑定裁剪弹框的显示状态。:file="cropper.file"
:绑定当前需要裁剪的文件对象。@open="onCropperOpen"
:绑定弹框打开时的回调方法。@close="onCropperClose"
:绑定弹框关闭时的回调方法。@closed="onCropperClosed"
:绑定弹框关闭后的回调方法。@confirm="onCropperConfirm"
:绑定裁剪确认后的回调方法。@cancel="onCropperCancel"
:绑定裁剪取消操作的回调方法。方法解析
onChange(file, fileList)
:处理文件变更时的逻辑。onActivatefile(file)
:处理文件预览时的逻辑。onRemove(file, fileList)
:处理文件删除时的逻辑。httpRequest
:自定义上传逻辑。onCropperConfirm
:处理裁剪确认时的逻辑。onCropperCancel
:处理裁剪取消时的逻辑。onCropperOpen
:处理弹框打开时的逻辑。onCropperClose
:处理弹框关闭时的逻辑。onCropperClosed
:处理弹框已经关闭后的逻辑
ImgCropper.vue
<template> <el-dialog title="编辑图片" :visible="show" @close="$emit('update:show', false)" :close-on-click-modal="false" :append-to-body="true" destroy-on-close v-on="$listeners" > </el-dialog> </template> <script> export default { props: { show: { type: Boolean, default: false }, file:File } } </script> <style lang="scss" scoped> </style>
props
:定义了接收的两个属性:
show
:一个布尔类型,控制对话框的显示和隐藏,默认值为false
。file
:一个File
对象,表示需要编辑的文件。总结:
这个组件是一个带有标题“编辑图片”的对话框组件,接收一个控制显隐的布尔值
show
和一个文件对象file
作为属性。组件支持在关闭对话框时触发事件通知父组件更新状态,使用 SCSS 对组件样式进行限定,使其只作用于当前组件。
(四)案例四
这个模板展示了一个使用 Element UI 的 el-dialog
组件和 vue-cropper
组件创建的图片编辑和裁剪对话框。以下是各个部分的详细解释:
<template> <el-dialog title="编辑图片" :visible="show" @close="$emit('update:show', false)" :close-on-click-modal="false" :append-to-body="true" destroy-on-close v-on="$listeners" > <vue-cropper overflow-hidden v-loading="loading" ref="cropper" :src="src" :containerStyle="containerStyle" preview=".preview" :minContainerHeight="500" background :ready="onReady" :cropmove="touch" :zoom="touch" /> </el-dialog> </template> <script> import VueCropper from "vue-cropperjs"; import "cropperjs/dist/cropper.css"; export default { props: { show: { type: Boolean, default: false }, file: File // 传递需要编辑的文件对象 }, components: { VueCropper, }, data() { return { loading: true, src: "", // 图片的源地址 containerStyle: { height: "500px", }, }; }, methods: { // 设置裁剪比例为1:1 onReady() { this.loading = false; // 裁剪区域准备完毕后,隐藏加载动画 }, // 改变了图片,需要裁剪图片时触发 touch() { // 在这里处理图片裁剪移动和缩放 }, }, }; </script>
属性解析 (
el-dialog
)
title="编辑图片"
:设置对话框的标题为“编辑图片”。:visible="show"
:绑定对话框的可见性到show
变量,show
是一个布尔值,控制对话框的显示和隐藏。@close="$emit('update:show', false)"
:监听close
事件,当对话框关闭时,触发update:show
事件并将show
设置为false
,通知父组件更新show
属性。:close-on-click-modal="false"
:设置为false
表示点击对话框外部区域不会关闭对话框。:append-to-body="true"
:将对话框的 DOM 节点插入到body
元素中,而不是插入到当前组件的父级元素中。destroy-on-close
:对话框关闭时销毁对话框内的子元素。v-on="$listeners"
:将父组件传递给当前组件的所有事件监听器绑定到<el-dialog>
上。组件解析 (
vue-cropper
)
overflow-hidden
:裁剪容器溢出部分隐藏。v-loading="loading"
:绑定加载状态到loading
变量,用于显示加载动画。ref="cropper"
:给组件设置引用名称,方便在代码中通过this.$refs
获取组件实例。:src="src"
:绑定裁剪区域显示的图片源地址。:containerStyle="containerStyle"
:绑定裁剪容器的样式。preview=".preview"
:设置预览区域的选择器。:minContainerHeight="500"
:设置裁剪容器的最小高度为500像素。background
:显示裁剪区域背景。:ready="onReady"
:绑定裁剪区域准备完毕时的回调方法。:cropmove="touch"
:绑定裁剪区域移动时的回调方法。:zoom="touch"
:绑定裁剪区域缩放时的回调方法。Script 部分解析
props
:定义了接收的两个属性:
show
:一个布尔类型,控制对话框的显示和隐藏,默认值为false
。file
:一个File
对象,表示需要编辑的文件。components
:注册VueCropper
裁剪组件。data
:定义组件内部的响应式数据:
loading
:一个布尔值,用于控制加载状态。src
:存储图片的源地址。containerStyle
:定义裁剪容器的样式,高度为500像素。methods
:定义组件内部的方法:
onReady
:裁剪区域准备完毕后隐藏加载动画。touch
:用于处理裁剪区域的移动和缩放。总结
这个组件是一个带有标题“编辑图片”的对话框组件,结合
vue-cropper
实现了图片裁剪功能。接收两个属性:show
用于控制对话框的显示和隐藏,file
表示需要编辑和裁剪的图片文件。
(五)案例五
ImgView.vue
<template> <div> <el-upload ref="element-upload" action="#" :auto-upload="false" list-type="picture-card" :file-list="files" :on-change="onChange" :on-preview="onActivatefile" :on-remove="onRemove" :http-request="httpRequest" > <i class="el-icon-plus"></i> </el-upload> <!-- 裁剪组件 --> <ImgCropper :show.sync="cropper.show" :file="cropper.file" aspectRatio="1/1" :aspectRatioDeviation="0.1" @open="onCropperOpen" @close="onCropperClose" @closed="onCropperClosed" @confirm="onCropperConfirm" @cancel="onCropperCancel" /> </div> </template> <script> import ImgCropper from './ImgCropper.vue'; export default { name: "ImgView", components: { ImgCropper, }, data () { return { files: [], // 上传文件列表 cropper: { show: false, file: null, submitted: false, } } }, methods: { // 添加图片之前进入裁减环节 beforeAddFile(item) { if (item.file instanceof File) { if (this.cropper.show) { return; } this.cropper.file = item.file; this.cropper.show = true; } }, // 选择图片触发 onChange(file, fileList) { if (file.status === "ready") { console.log(fileList, "fileList"); this.beforeAddFile({ ...file, file: file.raw, fileList, }); } }, // 点击预览 onActivatefile(file) { // 处理文件预览的逻辑 }, // 删除图片 onRemove(file, fileList) { // 处理文件删除的逻辑 }, // 自定义上传请求 async httpRequest() { // 自定义上传逻辑 }, // 确定裁剪 onCropperConfirm() { // 处理裁剪确认时的逻辑 }, // 取消裁剪 onCropperCancel() { // 处理裁剪取消时的逻辑 }, // 弹框打开 onCropperOpen() { // 弹框打开时的逻辑 }, // 弹框关闭 onCropperClose() { // 弹框关闭时的逻辑 }, onCropperClosed() { // 弹框关闭后的逻辑 } } } </script>