Implementation steps of vue crop preview component function

This article mainly introduces the implementation code of the vue cutting preview component function. This article introduces it to you in great detail through a combination of example codes. It has certain reference value. Interested friends can follow the script home small Let’s learn together

vue version cutting tool, including preview function

Final effect: qiuyaofan.github.io/vue-crop-de…

Source code address: github .com/qiuyaofan/v…

The first step: first use vue-cli to install the scaffolding (see the vue-cli official website if you don’t know how to install it)

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

Step 2: Create files

Create new src/views/validSlideDemo.vue,

Create new VueCrop/index.js,VueCrop.vue in src/components,

Configure access routes in routes/index.js (see github source code for details)

The final generated file structure is as shown below:

The third step: Register components

1. Reference all plug-ins: 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. Call plug-ins globally: src/main. js (vue plugins official document explanation 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: &#39;<App/>&#39;
})

3.VueCrop entry file calls 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

Summary: I always had a misunderstanding at the beginning, thinking that myPlugin.install is a method of vue. In fact, it is not. It is just a public method for us to construct plugin knowledge. The method that can be understood as the constructor in native js:

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

And what actually registers the component is: Vue.component()

So, the process of vue plug-in registration is:

1. Call main.js:

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

2.index .js adds the install method and calls Vue.component to register the component

3. The index.js in the component is the same as the index.js of all components

Step 4: Design and develop your own components. Build the component structure

Before this, you can first understand the naming convention of the component, etc. You can refer to the article Nuggets: Vue front-end development specifications, of which point 2 is explained in detail

First, determine Your own calling method and parameters that need to be exposed

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

Among them, @afterCrop="afterCrop" is the callback function after cropping is completed, and the others are attribute configurations

In the componentsrc/components/VueCrop/VueCrop.vue, you can use this.$emit('afterCrop') to trigger the afterCrop event in the demo

In terms of component structure, it is mainly divided into: main part of cropping, selection frame component (VueCropTool.vue), calculation of cropping frame width, position coordinates, etc. (VueCropMove.js), drag event registration public js (components/utils/ draggable.js)

draggable.js is based on the one in element, with some modifications. The source code is as follows

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)
 })
}

Related recommendations:

Vue implements a system menu that can be suspended/hidden in the upper right corner of the page

The above is the detailed content of Implementation steps of vue crop preview component function. For more information, please follow other related articles on the PHP Chinese website!