使用vue-cli编写vue插件的方法


Posted in Javascript onFebruary 26, 2018

利用vue组件创建模板,使用webpack打包生成插件再全局使用

1、vue init webpack-simple 生成项目目录

2、调整目录结构

使用vue-cli编写vue插件的方法

3、修改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:[]
}

开发一个toast插件,可以借助npm平台发布,在这里就不做过多的说明了

toast.vue

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

<script>
export default {
 data: () => ({
  list: [],
  title: null,
  content: null,
  type: null,
  isActive: false,
  timer: null,
  onShow: () => {},
  onHide: () => {}
 }),
 computed: {
  objClass () {
   // 样式'success, error, warning, default'
   return this.type ? 'toast-' + 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 === 'function') {
    this.onShow()
   } else if (!val && typeof this.onHide === 'function') {
    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>

index.js

import ToastComponent from './toast.vue'
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 || 'body').appendChild(toast.$el)
      }
      toast.show(params)
      resolve()
    })
  }
  Vue.prototype.$toast = $toast
}
if(window.Vue){
  Vue.use(Toast)
}
export default Toast

npm run build 之后就会在根目录下生成dist文件

使用vue-cli编写vue插件的方法

接下来就可以使用了

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

 </script>
</body>
</html>

总结:

1、使用Vue构造器,通过vue组件来创建一个子类:Vue.extend(component)

2、webpack配置output的path必须为绝对路径

3、webpack基础配置:entry,output,module,plugins

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 #Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 #Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 #Javascript
Vue 中的compile操作方法
Feb 26 #Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 #Javascript
vue中简单弹框dialog的实现方法
Feb 26 #Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 #Javascript
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
javascript instanceof 内部机制探析
2010/10/15 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
javascript如何实现create方法
2019/11/04 Javascript
Python编程之Re模块下的函数介绍
2017/10/28 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
24式加速你的Python(小结)
2019/06/13 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
电脑饰品店的创业计划书
2014/01/21 职场文书
年终总结会议主持词
2014/03/17 职场文书
秋菊打官司观后感
2015/06/03 职场文书
公司食堂管理制度
2015/08/05 职场文书
《法国号》教学反思
2016/02/22 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python