写一个vue的滚动条插件

组件源码如下: vue-scroll.vue <template> <div class="vue-scroll" ref="vueScrollW"> <div class="vue-scroll-w" ref="vueScroll" > <div class="vue-scroll-c" :style="{width:cWidth}">…

分享一个自己写的vue多语言插件smart-vue-i18n

前言目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压缩后大小不超过2kb 使用方法通过Vue.js公开方法install安装,参数 lang 为初始化默认语言,参数 messages 为初始语言库,也可以在组件中新增多语言,语言库格式参照其他开源的国际化项目安装 github地址: smart-vue-i18n yarn add smart-vu…

写一个vue组件

写一个vue组件我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件会包括一下三个部分: template:模板 js: 逻辑 css : 样式每个组件都有属于自己的模板,js和样式.如果将一个页面比喻成一间房子的话,组件就是房子里的客厅.卧室.厨房.厕所.如果把厨房单独拿出来的话,组件又可以是刀.油烟机...等等.就是说页面是由组件构成的,而组件也可以是组件构成…

大前端工程化之写一个简单的webpack插件

今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化首先我们得知道一个插件是如何组成的: 定义javascript命名函数给这个函数的prototype添加apply方法在这个方法内我们可以勾入webpack暴露的钩子,这些钩子主要由compiler,compilation两个对象暴露在某个需要勾入的构建回调中加入自己的处理函数,处理需要处理的资源处理完成后调…

写一个Vue loading 插件

什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你…

如何优雅的写一个Vue 的弹框

写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题,如果在嵌套的组件里面使用了弹框,可能会出现弹框的层级不够高 2.弹框的函数调用方式首先第一点:弹框的层级如果将弹框放置在最外层,body下面.就不会有层级问题. 第二点:弹框的函数调用首先我们可以思考,将组件的实例拿到,然而初学的时候好像只有通过 refs 能拿到组件的对象,然后调用显示…

使用 js，自己写一个简单的滚动条

当我们给元素加上 overflow: auto; 的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 bar 是根据内容的多少,高度不一样的,这个需要动态的计算 2.滚动条 bar 的 top 位置和内容scrollTop 的关系. 思路: 使用嵌套的布局,如下: <!DOCTYPE html> <html> <head> <meta charset="…

面试题：你能写一个Vue的双向数据绑定吗？

在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望能让大家有所收获. 1.原理 Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例.为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-mod…

学习如何写一个vue插件【入门篇】

#### 疑答 1.市面上已经有那么多插件可用,为什么还要造轮子?学习.借鉴思想.应用到开发 2.能否在项目中使用?与网上插件使用相同更新维护问题怎么解决? 自身动力,使用者反馈等 #### 准备工具 1.官方文档https://cn.vuejs.org/v2/guide/plugins.html2.github.npm网站账号.node/npm.git3.代码工具:vscode #### 过程1.新建文件夹 vue-loading-text npm init 初始化 2.代码工具:vsc…

写一个简单的JQ插件(例子)

虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信我这个还是蛮实用的话不多说丢代码 JQ插件标准的封装代码如下,首先需要闭包: <scripttype="text/javascript"> (function ($) { //这里放入插件代码 })(jQuery); </script> 这是jQuery官方的插件开发规范,这样写…

【写一个vue的滚动条插件】的更多相关文章