Vue 자르기 미리보기 구성요소 기능의 구현 단계

이 글은 주로 Vue 컷팅 프리뷰 컴포넌트 기능의 구현 코드를 소개하고 있으며, 예제 코드의 조합을 통해 아주 자세하게 소개하고 있으며, 관심 있는 친구들은 Script House의 에디터를 따라가보면 됩니다.

vue 버전 자르기 도구, 미리보기 기능 포함

최종 효과: qiuyaofan.github.io/vue-crop-de…

소스 코드 주소: github.com/qiuyaofan/v…

1단계: vue-cli 처음 사용 스캐폴딩 설치(설치 방법을 모르는 경우 vue-cli 공식 웹사이트 참조)

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

2단계: 파일 생성

New src/views/validSlideDemo.vue,

New VueCrop / in src/comComponents index.js, VueCrop.vue,

routes/index.js에서 접근 경로를 설정합니다. (자세한 내용은 github 소스코드 참고)

최종 생성된 파일 구조는 다음과 같습니다.

3단계: 구성 요소 등록

1. 모든 플러그인 인용: src/comComponents/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 플러그인 공식 문서에서 설치에 대해 설명) )

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 항목 파일 호출 VueCrop.vue: src/comComponents/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이라고 생각하고 항상 오해를 했습니다. 사실은 아닙니다. 이는 단지 플러그인을 구성하는 방법일 뿐이며, 네이티브 js의 생성자 메서드로 이해될 수 있습니다.

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

구성 요소는 Vue.comComponent()

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')따라서 vue 플러그인이 등록됩니다. 프로세스는 다음과 같습니다.

1 main.js 호출:

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

2. index.js에 설치 방법을 적용하고 Vue.comComponent를 호출하여 구성 요소를 등록합니다.

3 구성 요소의 index.js는 모든 구성 요소의 인덱스와 동일합니다. .js는 동일합니다

4단계: 디자인 및 개발 자체 컴포넌트 및 컴포넌트 구조 구축그 전에 먼저 컴포넌트의 명명 규칙 등을 이해할 수 있습니다. Nuggets: Vue 프론트엔드 개발 사양 문서를 참조할 수 있으며, 두 번째 요점은 자세한 설명입니다

먼저 호출 방식과 노출해야 할 파라미터를 결정합니다

rrreee

🎜그 중 @afterCrop="afterCrop"은 크롭이 완료된 후의 콜백 함수이고, 나머지는 속성 구성입니다🎜🎜컴포넌트 내 src/comComponents/VueCrop/VueCrop.vue에서 this.$emit('afterCrop')를 사용하여 데모에서 afterCrop 이벤트를 트리거할 수 있습니다🎜🎜 구성 요소 구조는 주로 다음과 같이 나뉩니다. 자르기 주요 부분 자르기, 선택 상자 구성 요소(VueCropTool.vue), 자르기 상자 너비, 위치 좌표 등 계산(VueCropMove.js), 드래그 이벤트 등록 공개 js (comComponents/utils/draggable.js) 🎜🎜draggable.js는 요소에서 일부 수정되었습니다. 소스 코드는 다음과 같습니다🎜🎜🎜rrreee🎜🎜🎜Vue는 시스템을 구현합니다. 페이지 오른쪽 상단에 숨기거나 숨길 수 있는 메뉴🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 Vue 자르기 미리보기 구성요소 기능의 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!