本文目录一览：
vue-cropper的使用的属性
1． 首先安装vue-cropper
npm install vue-cropper
yarn add vue-cropper
2． vue-cropper的属性
3． 方法：
内置方法 通过this.$refs.cropper 调用
this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度
图片加载的回调 imgLoad 返回结果success, error
获取截图信息
this.$refs.cropper.cropW 截图框宽度
this.$refs.cropper.cropH 截图框高度
原文链接：
怎样在Vue.js中使用jquery插件
安装 jQuery 和 cropper.js
# install jQuery cropper
$ npm install jquery cropper –save
为jquery和Vue自定义指令配置webpack
为webpack配置添加jquery和Vue自定义指令的映射。
通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。
您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。
这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。
把下面高亮部分添加到build/webpack.base.conf文件中。
resolve: {
extensions: [”, ‘.js’, ‘.vue’],
fallback: [path.join(__dirname, ‘../node_modules’)],
alias: {
‘src’: path.resolve(__dirname, ‘../src’),
‘assets’: path.resolve(__dirname, ‘../src/assets’),
‘components’: path.resolve(__dirname, ‘../src/components’),
‘jquery’: path.resolve(__dirname, ‘../node_modules/jquery/src/jquery’),
‘directives’: path.resolve(__dirname, ‘../src/directives’)
}
},
基于Vue的图片剪切插件vue-cropper的使用
剪裁效果图如下
安装
在main.js中引入
这里用到了 a-upload 组件，因为是上传到本地，且不需要展示列表，所以需要将 show-upload-list 设为 false ， before-upload 也需要返回 false ，阻止直接上传至服务器。
主要用于右侧的图片裁剪预览展示。
vue裁剪插件cropperjs详解
1.引入cropperjs
2.使用插件
详细参数如下（部分）
仓库地址
注意：如果方法没有被设置返回任何值，那么它会返回一个cropper的实例 因此多个方法可以使用链式写法
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/200728.html
微信扫一扫 
支付宝扫一扫 