首页 / VUE / Vue+element-ui 图片上传剪裁组件

Vue+element-ui 图片上传剪裁组件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue+element-ui 图片上传剪裁组件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13352字，纯文字阅读大概需要20分钟。

内容图文

1，安装插件

npm install vue-cropper

yarn add vue-cropper

2，引入

　　使用注意：需要关掉本地的mock服务，不然图片转化会报错

组件内使用

import { VueCropper } from ‘vue-cropper‘ components: { VueCropper, },

main.js里面使用

import VueCropper from ‘vue-cropper‘ Vue.use(VueCropper)

cdn方式使用

nuxt 使用方式

if (process.browser) { vueCropper = require(‘vue-cropper‘) Vue.use(vueCropper.default) }

3，使用

创建index.vue文件

<template>
  <div>
    <!-- 多图片上传 -->
    <el-upload v-if="multiple" action=‘string‘ list-type="picture-card" accept="image/*" :on-preview="handlePreview" :auto-upload="false" :on-remove="handleRemove" :http-request="upload" :on-change="consoleFL" :file-list="uploadList">
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 单图片上传 -->
    <el-upload v-else class="avatar-uploader" action="‘string‘" :auto-upload="false" :show-file-list="false" :on-change="handleCrop" :http-request="upload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" ref="singleImg" @mouseenter="mouseEnter" @mouseleave="mouseLeave" :style="{width:width+‘px‘,height:height+‘px‘}">
      <i v-else class="el-icon-plus avatar-uploader-icon" :style="{width:width+‘px‘,height:height+‘px‘,‘line-height‘:height+‘px‘,‘font-size‘:height/6+‘px‘}"></i>
      <!-- 单图片上传状态显示 -->
      <!-- <div v-if="imageUrl" class="reupload" ref="reupload" @click.stop="handlePreviewSingle" @mouseenter="mouseEnter" @mouseleave="mouseLeave" :style="{width:reuploadWidth+‘px‘,height:reuploadWidth+‘px‘,‘line-height‘:reuploadWidth+‘px‘,‘font-size‘:reuploadWidth/5+‘px‘}">重新上传</div> -->
      <div id="uploadIcon" v-if="imageUrl" ref="reupload" @mouseenter="mouseEnter" @mouseleave="mouseLeave" :style="{width:‘100%‘}">
        <i class="el-icon-zoom-in" @click.stop="handlePreviewSingle" :style="{color:‘#2E2E2E‘,fontSize:‘25px‘,display:‘inline-block‘,paddingRight:‘15px‘}"></i>
        <i class="el-icon-upload" :style="{color:‘#2E2E2E‘,fontSize:‘25px‘,display:‘inline-block‘}"></i>
      </div>
      <div class="reupload" ref="uploading" :style="{width:reuploadWidth+‘px‘,height:reuploadWidth+‘px‘,‘line-height‘:reuploadWidth+‘px‘,‘font-size‘:reuploadWidth/5+‘px‘}">上传中..</div>
      <div class="reupload" ref="failUpload" :style="{width:reuploadWidth+‘px‘,height:reuploadWidth+‘px‘,‘line-height‘:reuploadWidth+‘px‘,‘font-size‘:reuploadWidth/5+‘px‘}">上传失败</div>
    </el-upload>
    <!-- 多图片预览弹窗 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" >
    </el-dialog>
    <!-- 剪裁组件弹窗 -->
    <el-dialog :visible.sync="cropperModel" width="1100px" :before-close="beforeClose">
      <Cropper :img-file="file" ref="vueCropper" :fixedNumber="fixedNumber" @upload="upload">
      </Cropper>
    </el-dialog>
  </div>
</template>
<script>
import Cropper from ‘./cropper‘;
// import axios from ‘@/assets/js/axios‘
export default {
  name: ‘uploader‘,
  props: {
    targetUrl: {
      // 上传地址      type: String,
      // default: ‘/storage/upload‘default: `${process.env.API_ROOT}/sys/oss/upload`
    },
    multiple: {
      // 多图开关      type: Boolean,
      default: false
    },
    initUrl: {
      // 初始图片链接default: ‘‘
    },
    fixedNumber: {
      // 剪裁框比例设置default: function () {
        return [1.5, 1];
      }
    },
    width: {
      // 单图剪裁框宽度      type: Number,
      default: 178
    },
    height: {
      // 单图剪裁框高度      type: Number,
      default: 178
    }
  },
  data () {
    return {
      file: ‘‘, // 当前被选择的图片文件
      imageUrl: ‘‘, // 单图情况框内图片链接
      dialogImageUrl: ‘‘, // 多图情况弹窗内图片链接
      uploadList: [], // 上传图片列表
      reupload: true, // 控制"重新上传"开关
      dialogVisible: false, // 展示弹窗开关
      cropperModel: false, // 剪裁组件弹窗开关
      reuploadWidth: this.height * 0.7, // 动态改变”重新上传“大小    };
  },
  updated () {
    if (this.$refs.vueCropper) {
      this.$refs.vueCropper.Update();
    }
  },
  watch: {
    initUrl: function (val) {
      // 监听传入初始化图片// console.info(‘watch‘);if (val) {
        if (typeofthis.initUrl === ‘string‘) {
          this.imageUrl = val;
        } else {
          this.uploadList = this.formatImgArr(val);
         // this.$emit(‘imgupload‘, this.uploadList);        }
      }
    }
  },
  mounted () {
    if (typeofthis.initUrl === ‘string‘) {
      this.imageUrl = this.initUrl;
    } else {
      this.uploadList = this.formatImgArr(this.initUrl);
    }
  },
  methods: {
    /** **************************** multiple多图情况 **************************************/
    handlePreview (file) {
      // 点击进行图片展示this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }, 
    handleRemove (file, fileList) {
      // 删除图片后更新图片文件列表并通知父级变化this.uploadList = fileList;
      this.$emit(‘imgupload‘, this.uploadList);
      // this.$emit(‘imgupload‘, this.formatImgArr(this.uploadList));    },
    consoleFL (file, fileList) {
      // 弹出剪裁框，将当前文件设置为文件this.cropperModel = true;
      this.file = file;
      // this.uploadList = fileList;    },
    /************************************************************************************//** **************************** single单图情况 **************************************/
    handlePreviewSingle (file) { // 点击进行图片展示this.dialogImageUrl = this.file.url;
      this.dialogVisible = true;
    },
    mouseEnter () { // 鼠标划入显示“重新上传”this.$refs.reupload.style.display = ‘block‘;
      if (this.$refs.failUpload.style.display === ‘block‘) {
        this.$refs.failUpload.style.display = ‘none‘;
      }
      this.$refs.singleImg.style.opacity = ‘0.6‘;
    },
    mouseLeave () {
      // 鼠标划出隐藏“重新上传”this.$refs.reupload.style.display = ‘none‘;
      this.$refs.singleImg.style.opacity = ‘1‘;
    },
    handleCrop (file, files) {
      // console.log(file);// 点击弹出剪裁框this.cropperModel = true;
      this.file = file;
      // this.imageUrl = file.url    },
    /************************************************************************************/

    async upload (data) {
      // 自定义upload事件if (!this.multiple) {
        // 如果单图，则显示正在上传this.$refs.uploading.style.display = ‘block‘;
      }
      let img = new Image();
      img.src = data;
      img.onload = async () => {
        // let _data = this.compress(img);
        let blob = this.dataURItoBlob(data);
        let formData = new FormData(); 
        formData.append(‘file‘, blob, this.file.name); // 有的后台需要传文件名，不然会报错this.imgUpload(formData);
      };
    },
    async imgUpload(formData) {
      const res = await this.$http({
        url: ‘sys/oss/upload‘,
        method: ‘post‘,
        data: formData,
        headers: {
          ‘Content-Type‘: ‘multipart/form-data‘
        }
      });
      if (!this.multiple) {
        // 上传完成后隐藏正在上传this.$refs.uploading.style.display = ‘none‘;
      }
      if (res.data.code === 0) {
        // 上传成功将照片传回父组件
        const currentPic = res.data.url;
        if (this.multiple) {
          this.uploadList.push({
            url: currentPic,
            uid: ‘111‘
          });
          this.$emit(‘imgupload‘, this.uploadList);// 根据自己实际项目需要将照片返回给父组件// this.uploadList.pop();// this.$emit(‘imgupload‘, this.formatImgArr(this.uploadList));
        } else {
          this.$emit(‘imgupload‘, currentPic);
        }
        this.$refs.vueCropper.isDisabled = false;
      } else {
        // 上传失败则显示上传失败，如多图则从图片列表删除图片if (!this.multiple) {
          this.$refs.failUpload.style.display = ‘block‘;
        } else {
          this.uploadList.pop();
        }
        this.$refs.vueCropper.isDisabled = false;
      }
      this.cropperModel = false;
    },
    formatImgArr (arr) {
      const result = arr.map((item, index) => {
        if (typeof item === ‘string‘) {
          return {
            url: item,
            uid: `index${index}`
          };
        } else {
          return item.url;
        }
      });
      return result;
    },
    beforeClose () {
      // this.uploadList.pop();
      console.log(this.uploadList);
      this.cropperModel = false;
    },
    // 压缩图片    compress(img) {
      let canvas = document.createElement(‘canvas‘);
      let ctx = canvas.getContext(‘2d‘);
      // let initSize = img.src.length;
      let width = img.width;
      let height = img.height;
      canvas.width = width;
      canvas.height = height;
      // 铺底色
      ctx.fillStyle = ‘#fff‘;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, width, height);
      // 进行压缩
      let ndata = canvas.toDataURL(‘image/jpeg‘, 0.8);
      return ndata;
    },
    // base64转成bolb对象    dataURItoBlob(base64Data) {
      let byteString;
      if (base64Data.split(‘,‘)[0].indexOf(‘base64‘) >= 0) { byteString = atob(base64Data.split(‘,‘)[1]); } else { byteString = unescape(base64Data.split(‘,‘)[1]); }
      let mimeString = base64Data.split(‘,‘)[0].split(‘:‘)[1].split(‘;‘)[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      returnnew Blob([ia], { type: mimeString });
    }
  },
  components: {
    Cropper
  }
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }
  .reupload {
    border-radius: 50%;
    position: absolute;
    color: #fff;
    background-color: #000000;
    opacity: 0.6;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
  }
  #uploadIcon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
  }
</style>

4，创建cropper.vue文件

<template>
  <div>
    <div class="cropper-content">
      <!-- 剪裁框 -->
      <div class="cropper">
        <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime" :fixed="option.fixed" :fixedNumber="fixedNumber"></vueCropper>
        <!-- <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"></vueCropper> -->
      </div>
      <!-- 预览框 -->
      <div class="show-preview" :style="{‘width‘: ‘500px‘, ‘height‘: ‘400px‘,  ‘overflow‘: ‘hidden‘, ‘margin‘: ‘0 25px‘, ‘display‘:‘flex‘, ‘align-items‘ : ‘center‘}">
        <div :style="previews.div" class="preview">
          <img :src="previews.url" :style="previews.img">
        </div>
      </div>
    </div>
    <div class="footer-btn">
      <!-- 缩放旋转按钮 -->
      <div class="scope-btn">
        <el-button type="primary" icon="el-icon-zoom-in" @click="changeScale(1)"></el-button>
        <el-button type="primary" icon="el-icon-zoom-out" @click="changeScale(-1)"></el-button>
        <el-button type="primary" @click="rotateLeft">逆时针旋转</el-button>
        <el-button type="primary" @click="rotateRight">顺时针旋转</el-button>
      </div>
      <!-- 确认上传按钮 -->
      <div class="upload-btn">
        <!-- <el-button type="primary" @click="uploadImg(‘blob‘)">上传</el-button> -->
        <el-button type="primary" :disabled="isDisabled" @click="uploadImg(‘base64‘)">上传</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from ‘vue-cropper‘;
// console.log(VueCropper);
export default {
  data () {
    return {
      previews: {}, // 预览数据      option: {
        img: ‘‘, // 裁剪图片的地址  (默认：空)
        outputSize: 1, // 裁剪生成图片的质量  (默认:1)
        full: false, // 是否输出原图比例的截图 选true生成的图片会非常大  (默认:false)
        outputType: ‘png‘, // 裁剪生成图片的格式  (默认:jpg)
        canMove: true, // 上传图片是否可以移动  (默认:true)
        original: false, // 上传图片按照原始比例渲染  (默认:false)
        canMoveBox: true, // 截图框能否拖动  (默认:true)
        autoCrop: true, // 是否默认生成截图框  (默认:false)
        autoCropWidth: 480, // 默认生成截图框宽度  (默认:80%)
        autoCropHeight: 320, // 默认生成截图框高度  (默认:80%)
        fixedBox: false, // 固定截图框大小 不允许改变  (默认:false)
        fixed: true, // 是否开启截图框宽高固定比例  (默认:true)
        fixedNumber: [1.5, 1], // 截图框比例  (默认:[1:1])
        enlarge: 1
      },
      isDisabled: false,
      downImg: ‘#‘
    };
  },
  props: [‘imgFile‘, ‘fixedNumber‘],
  methods: {
    changeScale (num) {
      // 图片缩放
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    rotateLeft () {
      // 向左旋转this.$refs.cropper.rotateLeft();
    },
    rotateRight () {
      // 向右旋转this.$refs.cropper.rotateRight();
    },
    Update () {
      // this.file = this.imgFilethis.option.img = this.imgFile.url;
    },
    realTime (data) {
      // 实时预览this.previews = data;
    },
    uploadImg (type) {
      // 将剪裁好的图片回传给父组件      event.preventDefault();
      this.isDisabled = true;
      let that = this;
      if (type === ‘blob‘) {
        this.$refs.cropper.getCropBlob(data => {
          that.$emit(‘upload‘, data);
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          that.$emit(‘upload‘, data);
        });
      }
    }
  },
  components: { VueCropper }
};
</script>
<style>
.cropper-content {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.cropper-content .cropper {
  width: 500px;
  height: 400px;
}
.cropper-content .show-preview {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  overflow: hidden;
  border: 1px solid #cccccc;
  background: #cccccc;
  margin-left: 40px;
}
.preview {
  overflow: hidden;
  border: 1px solid #cccccc;
  background: #cccccc;
}
.footer-btn {
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.footer-btn .scope-btn {
  width: 250px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.footer-btn .upload-btn {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}
.footer-btn .btn {
  outline: none;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 8px 15px;
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
</style>

参考：https://www.jianshu.com/p/9b4de1c5b9c0

原文：https://www.cnblogs.com/hu-yang/p/13686034.html

内容总结

以上是互联网集市为您收集整理的Vue+element-ui 图片上传剪裁组件全部内容，希望文章能够帮你解决Vue+element-ui 图片上传剪裁组件所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1183951.html

来源：【匿名】

【上一篇】Vue10-实战快速上手【下一篇】php怎么返回数据给vue

更多 ►

【Vue+element-ui 图片上传剪裁组件】教程文章相关的互联网学习教程文章

Vue --- element-ui el-table 的合计在第一行显示并可点击【代码】【图】

使用element-ui el-table 中有这样一个需求，需要将合计放在表格内容的第一行，并且点击合计可跳转到其它页面！框架中提供了合计的属性方法，这样可以进行数值求和及自定义求和，但是，合计那一栏不能添加点击跳转功能，结构默认排到最底行，不满足需求解决思路：1. 调节样式； 2. 将合计的数据单独计算出来/接口返回，添加到数组第一个位置，这样就可以很好的控制合计这一行了。summaryFun(){var obj = [“合计”，......]；this....

vue、element-ui开发技巧【代码】

1、vue下input文本框获得光标html：<el-input size="mini" clearable v-model.trim="addOrEditData.gridCode" ref="inputGridCode"></el-input>js（在需要触发获取input光标方法加入下面js，如果需要再进入页面获得就获得光标则在vue钩子函数mounted加上下面代码：）:this.$refs.inputGridCode.focus();2、vue中input文本框内容选中方法一：html：<el-input size="mini" clearable v-model.trim="addOrEditData.gridCode" ref="inp...

在vue项目中引用element-ui时让el-input 获取焦点的方法【代码】

// 注册一个全局自定义指令 `v-focus`Vue.directive(‘focus‘, function (el) {el.focus()})这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点但是这里要注意的是组件<el-input>本身在页面中渲染成了一个div元素所以我们要在<el-input>被绑定为v-focus的同时在自定义指令中获取组件下通过querySelector()方法获取input元素<el-input v-model.trim="searchFor" @blur="blurSearchFor"v-fo...

基于vue-cli-和element-ui的开发admin（1）【图】

//首先以下仅是记录个人本次vue后台管理系统的登录界面部分操作的流程以及踩坑的注意点一、首先是搭建vue-cli工作环境　　这里有两种方式：1.用npm；（在安装了vue，vue-cli以及webpack情况下，cd到要工作的区域，使用命令行vue init webpack（项目名称）然后开始搭建）；　　　　　　　　　　2.用命令行使用vue ui进行操作，个人感觉对新手比较友好，因为相对于npm方式来说，用vue ui更可视化的搭建项目，下面是vue ui进去的界面；...

vue基于element-ui制作的成绩管理系统（二）登录页【代码】【图】

1.在src下面创建一个components文件夹里面创建HelloWorld.vue,像这样：创建后的页面： <template><el-row :span="24" class="login-bg"> <el-form label-position="left" label-width="0px" class="demo-ruleForm login-container"> <h3 class="title">学生成绩在线管理系统</h3> <el-form-item> <el-input type="text" v-model="username" placeholder="请输入登录账号"></el-input> //vue 的双向绑定 </el-form...

VueJS电商管理系统（Element-UI）B站学习笔记【代码】

B站地址https://www.bilibili.com/video/av74592164?p=9 感谢老师精彩的讲解，让我受益匪浅。这个视频的系列缺少划分插槽的案例，所以略显繁琐登录页面后端传递一个token 传递给前端。前端保持登录状态。cookie session 不存在跨域token 跨域token 原理客户端获得token之后存储，后续请求都携带token 。然后后端去校验就可以实现登录校验了git 创建分支git checkout -b login //login分支 git branch //查看所有分支login页面的搭...

在vue中使用element-ui框架【代码】【图】

1 、安装依赖包 npm i element-ui -S 2、在main.js中导入element-ui相关资源 // 手动配置element-ui import ElementUI from‘element-ui‘ import ‘element-ui/lib/theme-chalk/index.css‘ Vue.use(ElementUI) 3、可以在vue页面使用element-ui组件了// 手动配置element-uiimport ElementUI from ‘element-ui‘import ‘element-ui/lib/theme-chalk/index.css‘Vue.use(ElementUI)原文：https://ww...

Vue 中封装全局组件（以element-ui的button为例子）【图】

在 main.js 中引入在页面中使用：文件下载地址：https://files.cnblogs.com/files/lyt520/Button.7z原文：https://www.cnblogs.com/lyt520/p/14981065.html

vue-cli和element-ui快速搭建项目的方法【图】

element-ui是基于vue2.0的ui框架是目前最受欢迎的一个框架，本篇文章就来给大家介绍一下vue-cli和element-ui快速搭建项目的方法。一、前言vue2.0的到来，凭借这其简单易学、完善的API中文文档、丰富的生态系统，成为国内目前十分受欢迎的前端MVVM框架， element-ui是基于 vue2.0的 ui框架，由饿了么团队开发维护的，目前是vue的ui库中最受欢迎的一个框架二、代码操作使用vue-cli + element-ui有两种方式方案一： ①先使用vue-cli 搭...

vue中如何使用element-ui的Upload上传组件

本篇文章主要介绍了在vue项目中使用element-ui的Upload上传组件的示例，现在分享给大家，也给大家做个参考。本文介绍了vue项目中使用element-ui的Upload上传组件的示例，分享给大家，具体如下：<el-uploadv-elseclass=ensure ensureButt:action="importFileUrl":data="upLoadData"name="importfile":onError="uploadError":onSuccess="uploadSuccess":beforeUpload="beforeAvatarUpload"><el-button size="small" type="primary">确...

怎样使用vue.js与element-ui实现菜单树形结构【图】

这次给大家带来怎样使用vue.js与element-ui实现菜单树形结构，使用vue.js与element-ui实现菜单树形结构的注意事项有哪些，下面就是实战案例，一起来看一下。场景：根据业务要求，需要实现活动的树形菜单，菜单数据由后台返回，最后的效果图如下：后台返回的数据格式是这个样子的：data=[{pID:1,//父IDname:目录一, menuID:m1,//本身IDisContent:false//判断是否是目录 },{ pID:1,name:目录二, menuID:m2,isContent:false},{pID:m1,...

使用vue-cli结合Element-ui在cropper.js基础上封装vue来实现图片裁剪组件功能【图】

这篇文章主要介绍了vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下前端工作中，经常需要图片裁剪的场景，cropper.js是一款优秀的前端插件，api十分丰富。本文是在vue-cli项目下封装图片裁剪插件，效果图如下：话不多说，看步骤吧。第一步：准备开发环境cropper.js是基于jquery的，所以要先安装jquery执行命令： npm install --save-dev jquery croppe...

如何实现vue项目中vue-i18n和element-ui国际化开发【图】

这次给大家带来如何实现vue项目中vue-i18n和element-ui国际化开发，实现vue项目中vue-i18n和element-ui国际化开发的注意事项有哪些，下面就是实战案例，一起来看一下。默认你已构建好了一个vue项目，在vue项目中安装vue-i18n以及element-ui插件cnpm i vue-i18n --save-dev cnpm i element-ui --save-dev在项目文件中如下图，创建语言包文件夹i18n文件夹在main.js用引入i18n.js，以及引入element-ui插件import Vue from vue impor...

有关在vue中element-ui如何实现在table表格滚动加载方法

下面我就为大家分享一篇vue element-ui table表格滚动加载方法，具有很好的参考价值，希望对大家有所帮助。添加全局注册事件，用来监听滚动事件window.Vue.directive(loadmore, {bind(el, binding) {const selectWrap = el.querySelector(.el-table__body-wrapper)selectWrap.addEventListener(scroll, function() {let sign = 100const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeightif (scrollDistan...

利用vue和element-ui如何实现表格内容分页

下面我就为大家分享一篇利用vue和element-ui设置表格内容分页的实例，具有很好的参考价值，希望对大家有所帮助。html代码因为我写在template中，也就是新建了组建中，贴出代码。<el-pagination smalllayout="prev, pager, next":total="total" @current-change="current_change"> </el-pagination>代码中，small代表是否使用小型分页样式layout代表组件布局，子组件名用逗号分隔属性： total代表总条目数事件： current-change用于...

首页 / VUE / Vue+element-ui 图片上传剪裁组件

Vue+element-ui 图片上传剪裁组件

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue+element-ui 图片上传剪裁组件】教程文章相关的互联网学习教程文章

上传 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程