Comment utiliser vue pour recadrer le composant d'aperçu

Cette fois, je vais vous montrer comment utiliser vue pour couper le composant d'aperçu. Quelles sont les précautions pour utiliser vue pour couper le composant d'aperçu. Voici un cas pratique, jetons un œil.

Étape 1 : Installez d'abord l'échafaudage avec vue-cli (voir le site officiel de vue-cli si vous ne savez pas comment l'installer)

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

Étape 2 : Créez un file

Nouveau src/views/validSlideDemo.vue,

Créer un nouveau VueCrop/index.js, VueCrop.vue dans src/components,

configurer les routes d'accès dans routes/ index.js (voir le code source de github pour plus de détails)

La structure finale du fichier généré est la suivante :

Étape 3 : Enregistrez les composants

1. Référencez tous les 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 Appelez globalement le plug-in : src/main.js (la documentation officielle des plugins vue explique l'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. Le fichier d'entrée VueCrop appelle 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

Résumé : J'ai toujours eu un malentendu au début, pensant que myPlugin .install est une méthode de vue. En fait, ce n'est pas le cas. C'est juste une façon pour nous de construire le plugin. La méthode publique peut être comprise comme la méthode du

constructeur en js natif :

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

et ce qui enregistre réellement le composant est :

Vue.component()

Donc, le plug-in vue Le processus d'enregistrement est :

1 Appelez main.js :

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

2. Ajoutez la méthode d'installation à index.js et appelez Vue.component pour enregistrer le composant

3. L'index.js dans le composant est le même que l'index. js de tous les composants

Étape 4 : Concevez et développez vos propres composants et construisez la structure des composants

Avant cela, vous pouvez d'abord comprendre les composants. Pour les conventions de dénomination, etc., veuillez vous référer au article Nuggets : Vue front-end

Spécifications de développement , dont le point 2 est expliqué en détail

Tout d'abord, déterminez votre propre méthode d'appel et les paramètres qui doivent être exposés

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

Parmi eux, @afterCrop="afterCrop" est la

fonction de rappel après le recadrage, et les autres sont des configurations d'attributs

dans le composant

, qui peuvent être déclenchées avec src/components/VueCrop/VueCrop.vue L'événement afterCrop dans la démo this.$emit('afterCrop')

la structure des composants est principalement divisée en : partie principale du recadrage, composant du cadre de sélection (VueCropTool.vue), calcul de la largeur du cadre de recadrage, coordonnées de position, etc. js), glisser-déposer Inscription à l'événement public js (components/utils/draggable.js)

draggable.js est basé sur celui de l'élément, avec quelques modifications. Le code source est le suivant

<.>

Je pense que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez faire attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

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

Lecture recommandée :

Comment utiliser Vue combinée avec Video.js pour lire des vidéos m3u8

Comment utiliser Vue Événement de traitement du modificateur de clé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!