vue裁切预览组件功能的实现步骤
|
vue版本裁切工具，包含预览功能 最终效果： 源码地址： 第一步：先用vue-cli安装脚手架（不会安装的看 vue-cli官网） 第二步：创建文件 新建src/views/validSlideDemo.vue, src/components里新建VueCrop/index.js,VueCrop.vue， 在routes/index.js配置访问路由（具体看github源码） 最终生成的文件结构如下图:
第三步：注册组件 1.引用所有插件：src/components/index.js 2.全局调用插件：src/main.js （ vue plugins官方文档解说install ） 3.VueCrop入口文件调用VueCrop.vue：src/components/VueCrop/index.js 小结：我一开始一直有个误解，以为myPlugin.install是vue的一个方法，其实不是，他只是我们构造plugin识的一个公开方法，可以理解为原生js中的构造函数的方法： 而真正注册组件的是： 所以，vue插件注册的过程是： 1.调用main.js中： 2.index.js添加install方法，调用Vue.component注册组件 3.组件内的index.js同所有组件的index.js一样 第四步：设计开发自己的组件，构建组件结构 在此之前，可以先了解下组件的命名规范等，可参考文章 掘金：Vue前端开发规范 ，其中第2点有详细讲解 首先，确定自己的调用方式和需要暴露的参数
>
其中，@afterCrop="afterCrop"是裁切完成的回调函数，其他是属性配置 在组件 组件结构上，主要分为：裁切主要部分，选框组件（VueCropTool.vue）,裁切框宽度、位置坐标等计算（VueCropMove.js）,拖拽事件注册公共js（components/utils/draggable.js） draggable.js是参照element里的，修改了一部分，源码如下 {
if (options.stop && options.stop(event,element) === false) {
return false
}
document.onselectstart = function () {
return false
}
document.ondragstart = function () {
return false
}
document.addEventListener('mousedown',downFn)
document.addEventListener('mousemove',moveFn)
document.addEventListener('mouseup',upFn)
})
}
总结以上所述是小编给大家介绍的vue裁切预览组件功能的实现步骤。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
