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 相关文章推荐
javascript一点特殊用法
May 28 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
详解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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
prototype 的说明 js类
2006/09/07 Javascript
取选中的radio的值
2010/01/11 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
终止劳动合同协议书
2014/10/05 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
公司开除员工通知
2015/04/22 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android