vue裁切预览组件功能的实现步骤


Posted in Javascript onMay 04, 2018

vue版本裁切工具,包含预览功能

最终效果: qiuyaofan.github.io/vue-crop-de…

源码地址: github.com/qiuyaofan/v…

第一步:先用vue-cli安装脚手架(不会安装的看 vue-cli官网)

// 初始化vue-cli
vue init webpack my-plugin

第二步:创建文件

新建src/views/validSlideDemo.vue,

src/components里新建VueCrop/index.js,VueCrop.vue,

在routes/index.js配置访问路由(具体看github源码)

最终生成的文件结构如下图:

vue裁切预览组件功能的实现步骤 

第三步:注册组件

1.引用所有插件:src/components/index.js

// 导入插件入口文件
import VueCrop from './VueCrop/index.js'
const install = function (Vue, opts = {}) {
 /* 如果已安装就跳过 */
 if (install.installed) return
 // 注册插件
 Vue.component(VueCrop.name, VueCrop)
}
// 全局情况下注册插件
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}
export {
 install,
 // 此处是为了兼容在vue内单独引入这个插件,如果是main.js全局引入就可以去掉
 VueCrop
}

2.全局调用插件:src/main.js ( vue plugins官方文档解说install )

import Vue from 'vue'
import App from './App'
import router from './router'
// 新加的:导入入口文件
import { install } from 'src/components/index.js'
// 全局调用,相当于调用 `MyPlugin.install(Vue)`
Vue.use(install)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

3.VueCrop入口文件调用VueCrop.vue:src/components/VueCrop/index.js

// 导入vue
import VueCrop from './VueCrop.vue'
// Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器
VueCrop.install = function (Vue) {
 // 注册组件
 Vue.component(VueCrop.name, VueCrop)
}
export default VueCrop

小结:我一开始一直有个误解,以为myPlugin.install是vue的一个方法,其实不是,他只是我们构造plugin识的一个公开方法,可以理解为原生js中的构造函数的方法:

function MyPlugin(){
 console.info('构造函数')
}
MyPlugin.prototype.install=function(vue,options){
 console.info('构造器vue:'+vue);
}

而真正注册组件的是:Vue.component()

所以,vue插件注册的过程是:

1.调用main.js中:

import { install } from 'src/components/index.js'
vue.use(install)

2.index.js添加install方法,调用Vue.component注册组件

3.组件内的index.js同所有组件的index.js一样

第四步:设计开发自己的组件,构建组件结构

在此之前,可以先了解下组件的命名规范等,可参考文章 掘金:Vue前端开发规范 ,其中第2点有详细讲解

首先,确定自己的调用方式和需要暴露的参数

<vue-crop
:crop-url="cropUrl1"
:ratio="ratio"
:height="460"
:width="460"
:previewJson="previewJson1"
class="c-crop--preview_right"
@afterCrop="afterCrop"
>
>

其中,@afterCrop="afterCrop"是裁切完成的回调函数,其他是属性配置

在组件src/components/VueCrop/VueCrop.vue内,可以用this.$emit('afterCrop')触发demo里的afterCrop事件

组件结构上,主要分为:裁切主要部分,选框组件(VueCropTool.vue),裁切框宽度、位置坐标等计算(VueCropMove.js),拖拽事件注册公共js(components/utils/draggable.js)

draggable.js是参照element里的,修改了一部分,源码如下

export default function (element, options) {
 const moveFn = function (event) {
  if (options.drag) {
   options.drag(event)
  }
 }
 // mousedown fn
 const downFn = function (event) {
  if (options.start) {
   // 调用参数中start函数
   options.start(event)
  }
 }
 // mouseup fn
 const upFn = function (event) {
  document.removeEventListener('mousemove', moveFn)
  document.removeEventListener('mouseup', upFn)
  document.onselectstart = null
  document.ondragstart = null
  if (options.end) {
   // 调用参数中end函数
   options.end(event)
  }
 }
 // 绑定事件
 element.addEventListener('mousedown', event => {
  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裁切预览组件功能的实现步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
js实现导航跟随效果
Nov 17 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
详解vue组件基础
May 04 #Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 #Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
Vue.js 踩坑记之双向绑定
May 03 #Javascript
Vue利用canvas实现移动端手写板的方法
May 03 #Javascript
Node.Js中实现端口重用原理详解
May 03 #Javascript
原生JS实现的雪花飘落动画效果
May 03 #Javascript
You might like
PHP-redis中文文档介绍
2013/02/07 PHP
测试php函数的方法
2013/11/13 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
javascript 写类方式之二
2009/07/05 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
setTimeout学习小结
2017/02/08 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python操作mysql代码总结
2018/06/01 Python
对Django中内置的User模型实例详解
2019/08/16 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
教师群众路线剖析材料
2014/09/29 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python