vue 简单知识

"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>

vue 简单知识

属性解析

方法解析

属性解析 (`el-upload`)

属性解析 (`ImgCropper`)

方法解析

总结:

属性解析 (`el-dialog`)

组件解析 (`vue-cropper`)

Script 部分解析

总结

悦读

vue 简单知识

属性解析

方法解析

属性解析 (el-upload)

属性解析 (ImgCropper)

方法解析

总结:

属性解析 (el-dialog)

组件解析 (vue-cropper)

Script 部分解析

总结

悦读

属性解析 (`el-upload`)

属性解析 (`ImgCropper`)

属性解析 (`el-dialog`)

组件解析 (`vue-cropper`)