Vue 자르기 미리보기 구성요소 사용에 대한 자세한 설명

이번에는 Vue Crop Preview 컴포넌트 사용에 대한 자세한 설명을 가져오겠습니다. Vue Crop Preview 컴포넌트의 주의사항은 무엇인가요?

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

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

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

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

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

2단계: 파일 생성

새 src/views/validSlideDemo.vue,

새 VueCrop/index.js 생성, src/comComponents.vue의 VueCrop,

routes/index.js에서 액세스 경로를 구성합니다(자세한 내용은 github 소스 코드 참조)

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

3단계: 구성 요소 등록

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 플러그인 공식 문서에서 설치에 대해 설명합니다)

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.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이 vue의 메소드인 줄 알고 오해를 많이 했습니다. 플러그인 ID를 구성하는 메소드는 네이티브 js의 constructor 메소드로 이해될 수 있습니다.

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와 동일합니다

4단계: 자신만의 컴포넌트를 설계 및 개발하고 컴포넌트 구조를 구축합니다

이전에 먼저 컴포넌트의 명명 규칙 등을 이해할 수 있습니다. Nuggets: Vue 프론트엔드 개발 사양 기사에서 포인트 2에 대해 설명합니다. Detail

먼저 호출 방식과 노출해야 할 매개변수를 결정하세요rrreee그 중 @afterCrop="afterCrop"이 완성된 자르기입니다콜백 함수
, 나머지는 src/comComponents/VueCrop/VueCrop.vue 구성 요소의 속성 구성

입니다. this.$를 사용할 수 있습니다. Emit('afterCrop')데모에서 afterCrop 이벤트를 트리거합니다컴포넌트 구조를 보면 크게 자르기 주요 부분, 선택 프레임 컴포넌트(VueCropTool.vue), 자르기 프레임 너비, 위치 좌표 및 기타 계산(VueCropMove.js), 드래그 이벤트 등록 public js(comComponents/utils/draggable.js)

draggable.js는 요소에 있는 것을 기반으로 하며 일부 소스 코드는 다음과 같습니다. 🎜rrreee🎜이 기사에서 사례를 읽었다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜Vue+modifier 트리거 이벤트🎜🎜🎜🎜vue 영역 선택 구성 요소 사용 단계에 대한 자세한 설명🎜🎜🎜🎜🎜JS Baidu 검색창 효과 기능 구현 사례에 대한 자세한 설명🎜🎜🎜

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