Heim > Web-Frontend > js-Tutorial > vue-cli schreibt Beispiele für Vue-Plug-Ins

vue-cli schreibt Beispiele für Vue-Plug-Ins

小云云
Freigeben: 2018-05-14 16:43:54
Original
1971 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode vorgestellt, mit vue-cli Vue-Plug-Ins zu schreiben, Vue-Komponenten zum Erstellen von Vorlagen zu verwenden und Webpack zum Packen und Generieren von Plug-Ins für die globale Verwendung zu verwenden.

1. vue init webpack-simple generiert das Projektverzeichnis

2. Passen Sie die Verzeichnisstruktur an

3. Ändern Sie webpack.config .js

var path = require('path')
var webpack = require('webpack')

module.exports = {
 entry: './src/index.js',
 output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'vue-toast.js',
  // 打包后的格式(三种规范amd,cmd,common.js)通过umd规范可以适应各种规范,以及全局window属性
  libraryTarget:'umd',
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
   },
   
  ]
 },
 plugins:[]
}
Nach dem Login kopieren

Entwickeln Sie ein Toast-Plug-in, das über die npm-Plattform veröffentlicht werden kann. Ich werde hier nicht zu sehr auf Erklärungen eingehen

toast.vue

<template>
 <transition name="toast-fade">
  <p class="toast"
   :class="objClass" 
   v-show="isActive"
   @mouseenter="onMouseenter"
   @mouseleave="onMouseleave"
   >
   <button class="toast-close-button" @click="hide">×</button>
   <p class="toast-container">
    <p class="toast-title">{{title}}</p>
    <p class="toast-content">{{content}}</p>
   </p>
  </p>
 </transition>
</template>

<script>
export default {
 data: () => ({
  list: [],
  title: null,
  content: null,
  type: null,
  isActive: false,
  timer: null,
  onShow: () => {},
  onHide: () => {}
 }),
 computed: {
  objClass () {
   // 样式&#39;success, error, warning, default&#39;
   return this.type ? &#39;toast-&#39; + this.type : null
  }
 },
 methods: {
  // 显示
  show (params) {
   let {content, title, onShow, onHide, type} = params
   this.type = type
   this.content = content
   this.title = title
   this.onShow = onShow
   this.onHide = onHide

   this.isActive = true
   this.setTimer()
  },

  // 隐藏
  hide () {
   this.isActive = false
  },

  // 计时器
  setTimer () {
   clearTimeout(this.timer)
   this.timer = setTimeout(() => {
    this.isActive = false
   }, 4000)
  },

  // 鼠标移至组件时保持显示状态
  onMouseenter () {
   clearTimeout(this.timer)
  },

  // 鼠标移开组件时重新定时
  onMouseleave () {
   if (this.isActive) this.setTimer()
  }
 },
 watch: {
  isActive (val) {
   if (val && typeof this.onShow === &#39;function&#39;) {
    this.onShow()
   } else if (!val && typeof this.onHide === &#39;function&#39;) {
    this.onHide()
   }
  }
 }
}
</script>

<style>
.toast {
 position: fixed;
 top: 10px;
 right: 10px ;
 display: block;
 width: 300px;
 overflow: hidden;
 box-shadow: 0 0 6px #999;
 opacity: .8;
 border-radius: 3px 3px;
 padding: 15px 15px 15px 15px;
 background-position: 15px center;
 background-repeat: no-repeat;
 color: #333;
 background-color: #f0f3f4;
}

.toast-success {
 color: #fff;
 background-color: #51a351;
 padding: 15px 15px 15px 50px;
 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
.toast-error {
 color: #fff;
 background-color: #bd362f;
 padding: 15px 15px 15px 50px;
 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
.toast-warning {
 color: #fff;
 background-color: #f89406;
 padding: 15px 15px 15px 50px;
 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
.toast:hover {
 opacity: 1;
 box-shadow: 0 0 18px #888;
 transition: all 200ms ease;
}
.toast-container {
 vertical-align: middle;
}

.toast-fade-enter, .toast-fade-leave-active {
 opacity: 0;
 transform: translateX(100%);
}
.toast-fade-leave-active,
.toast-fade-enter-active {
 transition: all 400ms cubic-bezier(.36,.66,.04,1);
}
.toast-title {
 font-size: 14px;
 font-weight: bold;
}
.toast-close-button {
  padding: 2px 2px;
  border: none;
  background: transparent;
  position: relative;
  right: -10px;
  top: -15px;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
</style>
Nach dem Login kopieren

index.js

import ToastComponent from &#39;./toast.vue&#39;
let Toast = {};
Toast.install = function(Vue, options = {}) {
  // extend组件构造器
  const VueToast = Vue.extend(ToastComponent)
  let toast = null
  function $toast(params) {
    return new Promise( resolve => {
      if(!toast) {
        toast = new VueToast()
        toast.$mount()
        document.querySelector(options.container || &#39;body&#39;).appendChild(toast.$el)
      }
      toast.show(params)
      resolve()
    })
  }
  Vue.prototype.$toast = $toast
}
if(window.Vue){
  Vue.use(Toast)
}
export default Toast
Nach dem Login kopieren

npm run build generiert die dist-Datei im Stammverzeichnis

Dann können Sie sie verwenden

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 <!--引入-->
 <script src="node_modules/vue/dist/vue.js"></script>
 <script src="dist/vue-toast.js"></script>
</head>

<body>
 <p id="app">
  <h1>vue-toast,{{msg}}</h1>
  <p class="demo-box">
   <button @click="test">默认效果</button>
  </p>
 </p>
 <script>
  var vm = new Vue({
   el: "#app",
   data: {
    msg: &#39;你好&#39;
   },
   methods: {
    test() {
      this.$toast({
       title:&#39;消息提示&#39;,
       content: &#39;您有一条新消息&#39;,
       type: &#39;warning&#39;,
       onShow: ()=>{
         console.log(&#39;on toast show&#39;)
       },
       onHide: ()=>{
         console.log(&#39;on toast hide&#39;)
       }
     })
    }
   }
  })

 </script>
</body>
</html>
Nach dem Login kopieren

Zusammenfassung:

1. Verwenden Sie den Vue-Konstruktor, um eine Unterklasse über die Vue-Komponente zu erstellen: Vue.extend( Komponente)

2. Der Pfad der Webpack-Konfigurationsausgabe muss ein absoluter Pfad sein

3. Webpack-Grundkonfiguration: Eintrag, Ausgabe, Modul, Plugins

Verwandte Empfehlungen:

Detaillierte Erläuterung eines Vue-Plug-Ins von der Verpackung bis zur Veröffentlichung

So schreiben Sie eine Vue-Plug-In-Instanzfreigabe

So schreiben Sie ein Vue-Plug-in vue.js Beispielunterricht

Das obige ist der detaillierte Inhalt vonvue-cli schreibt Beispiele für Vue-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage