vue-cli 写php,vue-cli编写vue插件实例

本文主要介绍了使用vue-cli编写vue插件的方法，利用vue组件创建模板，使用webpack打包生成插件再全局使用。

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

2、调整目录结构

3、修改webpack.config.jsvar 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

:class="objClass"

v-show="isActive"

@mouseenter="onMouseenter"

@mouseleave="onMouseleave"

>

×

{{title}}

{{content}}

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

}

}

}

}

.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);

}

index.jsimport 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文件

接下来就可以使用了

demo.html

Title

vue-toast，{{msg}}

默认效果

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

}

})

}

}

})

总结：

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

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

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

相关推荐：