So verwenden Sie Vue zum Zuschneiden einer Vorschaukomponente

Dieses Mal zeige ich Ihnen, wie Sie Vue zum Ausschneiden der Vorschaukomponente verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue zum Ausschneiden der Vorschaukomponente?

Schritt 1: Verwenden Sie vue-cli, um das Gerüst zu installieren (wenn Sie nicht wissen, wie man es installiert, sehen Sie sich die offizielle Website von vue-cli an)

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

Schritt 2: Erstellen Sie eine Datei

Neue src/views/validSlideDemo.vue,

Neue VueCrop/index.js, VueCrop.vue in src/components erstellen,

Zugriffsrouten in Routen/Index konfigurieren .js (siehe Github-Quellcode für Details)

Die endgültig generierte Dateistruktur ist wie folgt:

Schritt 3: Komponenten registrieren

1. Verweisen Sie auf alle 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. Rufen Sie das Plug-in global auf: src/main.js (offizielle Dokumentation der Vue-Plugins erklärt die Installation)

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. Die VueCrop-Eintragsdatei ruft VueCrop.vue auf: 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

Zusammenfassung: Ich hatte am Anfang immer ein Missverständnis, weil ich dachte, myPlugin.install sei eine Methode von vue Tatsächlich ist es für uns nur eine öffentliche Methode zum Erstellen einer Plugin-ID. Die Methode des -Konstruktors lautet:

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

Die tatsächliche Registrierung der Komponente erfolgt wie folgt: Vue.component()

Der Prozess der Vue-Plugin-Registrierung lautet also:

1. Rufen Sie main.js auf:

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

2 Führen Sie die Installationsmethode zu index.js und rufen Sie Vue.component auf, um die Komponente zu registrieren

3. Die index.js in der Komponente ist mit dem Index aller Komponenten identisch. Gleich wie .js

Schritt 4: Entwerfen und entwickeln Sie Ihre eigenen Komponenten und erstellen Sie die Komponentenstruktur

Zuvor können Sie zunächst die Namenskonvention der Komponenten usw. verstehen. Sie können sich auf den Artikel Nuggets: Vue-Frontend Entwicklungsspezifikationen, von denen Punkt 2 ausführlich erläutert wird

Bestimmen Sie zunächst Ihre Aufrufmethode und die Parameter, die verfügbar gemacht werden müssen

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

Dazu gehört auch @afterCrop= „afterCrop“ ist die

Rückruffunktion , nachdem das Zuschneiden abgeschlossen ist, und die anderen sind Attributkonfigurationen

in der Komponente

. Sie können src/components/VueCrop/VueCrop.vue verwenden, um das AfterCrop-Ereignis in der auszulösen Demo this.$emit('afterCrop')

Komponentenstruktur, hauptsächlich unterteilt in: Hauptteil des Zuschneidens, Auswahlrahmenkomponente (VueCropTool.vue), Berechnung der Zuschneiderahmenbreite, Positionskoordinaten usw. (VueCropMove.js), öffentliche JS zur Registrierung von Drag-Events (components/utils/draggable.js)

draggable.js basiert auf dem in Element, mit einigen Modifikationen. Der Quellcode ist wie folgt

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

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie Vue in Kombination mit Video.js, um m3u8-Videos abzuspielen

So verwenden Sie Vue Schlüsselmodifikator-Verarbeitungsereignis

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue zum Zuschneiden einer Vorschaukomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!