介绍
本篇文章给大家分享的是有关怎么在vue中实现裁切预览组件功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
第一步:先用vue-cli安装脚手架(不会安装的看vue-cli官网)
//,初始化vue-cli
vue init webpack my-plugin 第二步:创建文件
新建src/视图/validSlideDemo.vue,
src/组件里新建VueCrop/index.js VueCrop.vue,
在路线/索引。js配置访问路由(具体看github源码)
最终生成的文件结构如下图:
//,导入插件入口文件
import VueCrop 得到& # 39;。/VueCrop index.js& # 39;
const install =, function (Vue, opts =, {}), {
,/*如果已安装就跳过,*/,if (install.installed),返回
,//注册插件
,Vue.component (VueCrop.name, VueCrop)
}//,全局情况下注册插件
if (typeof window !==, & # 39;未定义的,,,,,window.Vue), {
,安装(window.Vue)
}
export {
,安装,
,//此处是为了兼容在vue内单独引入这个插件,如果是main.js全局引入就可以去掉
,VueCrop
}
2。全局调用插件:src/主要。js (vue插件官方文档解说安装)
import Vue 得到& # 39;vue # 39;
import App 得到& # 39;。/应用# 39;
import router 得到& # 39;。/路由器# 39;//,新加的:导入入口文件
{},install import 得到& # 39;src/组件/index.js& # 39;//,全局调用,相当于调用,“MyPlugin.install (Vue) '
Vue.use(安装)
Vue.config.productionTip =false/*,eslint-disable no-new */Vue ({new
,el: & # 39; #应用# 39;
,路由器,
,组件:{,App },
,模板:& # 39;& lt; App/祝辞& # 39;
}) 3. VueCrop入口文件调用VueCrop.vue: src/组件/VueCrop/索引。js
//,导入vue
import VueCrop 得到& # 39;。/VueCrop.vue& # 39;//,Vue.js 的插件应当有一个公开方法,install 这。个方法的第一个参数是,Vue 构造器
时间=VueCrop.install function (Vue), {
,//注册组件
,Vue.component (VueCrop.name, VueCrop)
}
export default VueCrop 小结:我一开始一直有个误解,以为并且。vue的安装是一个方法,其实不是,他只是我们构造插件识的一个公开方法,可以理解为原生js中的构造函数的方法:
function 并且(){
,console.info(& # 39;构造函数& # 39;)
}
MyPlugin.prototype.install=函数(vue、期权){
,console.info(& # 39;构造器vue: & # 39; + vue);
} 而真正注册组件的是:<代码> Vue.component()
所以,vue插件注册的过程是:
1。调用main.js中:
import {, install },得到& # 39;src/组件/index.js& # 39;
vue.use(安装) 2. index.js添加安装方法,调用Vue.component注册组件
3。组件内的index.js同所有组件的index.js一样
第四步:设计开发自己的组件,构建组件结构
在此之前,可以先了解下组件的命名规范等,可参考文章掘金:Vue前端开发规范,其中第2点有详细讲解
首先,确定自己的调用方式和需要暴露的参数
& lt; vue-crop
:crop-url=癱ropUrl1"
:比=皉atio"
:身高=?60”;
:宽度=?60”;
:previewJson=皃reviewJson1"
类=癱-crop——preview_right"
@afterCrop=癮fterCrop"
比;
在 其中,@afterCrop=癮fterCrop"是裁切完成的回调函数,其他是属性配置
在组件<代码> src/组件/VueCrop/VueCrop.vue> 。美元发出(& # 39;afterCrop& # 39;) 触发演示里的afterCrop事件
组件结构上,主要分为:裁切主要部分,选框组件(VueCropTool.vue),裁切框宽度,位置坐标等计算(VueCropMove.js),拖拽事件注册公共js(组件/跑龙套/draggable.js)
可拖动的。js是参照元素里的,修改了一部分,源码如下
export default function (元素,,选项),{
,const moveFn =, function (事件),{
if 才能;(options.drag), {
,,options.drag(事件)
,,}
,}
,//mousedown fn
,const downFn =, function (事件),{
if 才能;(options.start), {//,,,调用参数中开始函数
,,options.start(事件)
,,}
,}
,//mouseup fn
,const upFn =, function (事件),{
document.removeEventListener才能(& # 39;mousemove& # 39;,, moveFn)
document.removeEventListener才能(& # 39;mouseup # 39;,, upFn)
document.onselectstart 才能=零
document.ondragstart 才能=零
if 才能;(options.end), {//,,,调用参数中结束函数
,,options.end(事件)
,,}
,}
,//绑定事件
,element.addEventListener (& # 39; mousedown& # 39;,, event =祝辞,{
if 才能;(options.stop ,,, options.stop(事件,,元素),===,false), {
,,return 错误的
,,}
时间=document.onselectstart 才能;function (), {
,,return 错误的
,,}
时间=document.ondragstart 才能;function (), {
,,return 错误的
,,}
document.addEventListener才能(& # 39;mousedown& # 39;,, downFn)
null
null
null
null
