vue 封装一个插件

1、创建一个vue组件button/button.vue

  

<template>
    <div class="btn" :style="{‘background‘:color,‘color‘:fontColor}">
        {{text}}
    </div>
</template>

<script>
export default {
        name:"button",
 //配置项       props:{
            text:{
                type:String,
                default:"按钮"
            },
            color:{
                type:String,
                default:"#ccc"
            },
            fontColor:{
                type:String,
                default:"#fff"
            }
        }
}
</script>

  2、Vue.js 的插件有一个公开方法 install方法,第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象,我们可以通过这个方法来定义插件button/index.js

  

import ButtonCom from "./button.vue";

//创建button这个插件
ButtonCom.install = (Vue)=>{
    Vue.component(ButtonCom.name,ButtonCom)
}

export default ButtonCom;

  3、全局引入插件            library/index.js

  

import ButtonCom from "./button";

//UI组件
const components = [
    ButtonCom
]

//进行全局引入
const  plugin = (Vue)=>{
    components.map((component)=>{
        Vue.component(component.name,component)
    })
}

//判断当前是否为浏览器环境,获取vue实例
if(typeof window !=="undefined" && window.Vue){
    plugin(window.Vue);
}

export default {
    plugin
}

  4、使用插件

  import Vue from "vue";

  import Vuez from "./library";

  import App from "./App.value;
  Vue.use(Vuez)

  

<template>
    <buttton   :text="val"/>
</template>
<script>
    export default{
         data(){
            return{
                val:"点击"
         }

     }

}

</script>    

原文地址:https://www.cnblogs.com/zeishuai/p/10465937.html

时间: 2024-11-09 02:42:59

vue 封装一个插件的相关文章

浅析vue封装自定义插件

在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装自定义插件的本质就是组件实例化的过程或者指令等公共属性方法的定义过程,比较大的区别在于封装插件需要手动干预,就是一些实例化方法需要手动调用,而Vue的实例化,很多逻辑内部已经帮忙处理掉了.插件相对于组件的优势就是插件封装好了之后,可以开箱即用,而组件是依赖于项目的.对组件初始化过程不是很熟悉的可以参

vue封装一个简单的div框选时间的组件

记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框选实现 div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div.[注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位.不然,鼠标框选区域和被框选区域很难保持

vue封装插件并发布到npm上

vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录,创建文件夹和文件,最后结构是这样的  然后根据需求,实现具体功能,这里我封装了一个轮播图组件mini-sliders,主要功能写在lib/slider.vue组件中 功能写好后,我们要写index.js来封装组件 import VueComment from './VueComment.vue' c

自己封装一个弹框插件

弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高. 首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层

如何用面向对象的思维去封装一个小型轮播图插件

1.面向对象与面向过程 既然说到面向对象的思维,那就免不了要对面向过程的编程思维与面向对象的思维做一番比较. 笔者有 一段时间天真的认为有一个类,然后new一个对象就是面向对象编程了,现在想想还是太naive了呀. 其实面向对象的编程思维和面向过程的编程思维重要的不是对象和过程,而是思维. 比如说在生活中我们要做一道西红柿炒鸡蛋,很多人的第一反应就是西红柿炒鸡蛋第一步.第二步.第三步应该怎么做,每一步放什么调料.然后在做的过程中找每一步需要的调料.这就是很典型的面向过程的思维方式:怎么做,需要什

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

Vue 开发自定义插件学习记录 -- 入门

首先,你需要了解插件实现的基本原理 插件基本原理: 我们都知道用Vue.use注册插件,那你知道Vue.use(plugin) 干了什么? 以下是我对Vue官网的一些摘录和个人的理解 Vue.use( plugin ) 参数: {Object | Function} plugin 用法: 安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法. install 方法调用时,会将 Vue 作为参数传入. 该方法需要在调用

用vue开发一个app(2,main.js)

昨天跟着vue的官网搭建了vue的一个脚手架,我也是第一次用VUE一切都在摸索阶段. 今天试着看下里面脚手架里面有点什么东西 先看看main.js 导入了3个模块 一个vue,一个app,还有router Vue.config.productionTip = false 关闭生产模式下给出的提示 然后下面这些是做什么的.. new Vue({ el: '#app', router, template: '<App/>', components: { App } }) 这边我找到了一些vue官网

基于Vue封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-sel