这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如图所示：采用了预先加载图片，再计算高度的办法。。网络差的情况下，可能有点卡 新建 vue-water-easy.vue 组件文件 <template><div class="vue-water-easy" ref="waterWrap"><div v-for="(items,clos) in list" :key="clos" :style="waterStyle" class="colsW"><ul><l...
这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如下代码如下 <template><div class="vue-scroll" ref="vueScrollW"><div class="vue-scroll-w" ref="vueScroll" ><div class="vue-scroll-c" :style="{width:cWidth}"><slot></slot></div></div><div class="vue-scrollbar" v-if="rate < 1"><div class="vue-scrollbar-thumb":...
在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示），具体内容如下所示： 1、使用npm安装依赖 npm install --save codemirror; 2、在页面中放入如下代码 <template><textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea> </template> <script> import "codemirror/theme/ambiance.css"; import "codemirror/lib/codemirror.css"; import "codemirror/ad...
一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在项目中试点成功了，现在在项目中已经不需要再维护路由配置文件了，由插件自动生成，节省了大家维护路由的时间。 从长远来看，使用插件自动生成路由是具有一定好处的。当项目中的路由配置非常多的时候，为了区分业务，你可能需要分成许多个文件来存放这些路由文件，这样就不得不去维护这些路由文件。 比如这样的路由文件结构： |-src/|-router/index.jschildr...
前言 Tree树形控件在前端开发中必不可少，对于数据的展示现在网站大都采取树形展示。因为大数据全部展示出来对于用户来说是不友好的。今天我们自己手写一个Tree插件。 iview提供的控件 iview已经很成熟了，如果说我写的控件和iview提供的控件谁更好，那肯定是选择iview ， 手写控件只是为了更好的了解vue父子组件之间的通信的。 请读者还是不要拿我的控件和iview或者其他第三方的去对比。下面我们先来看看iview的Tree控件如何使用 ...
axios 基于http客户端的promise，面向浏览器和nodejs 特色 ?浏览器端发起XMLHttpRequests请求 ?node端发起http请求 ?支持Promise API ?监听请求和返回 ?转化请求和返回 ?取消请求 ?自动转化json数据 ?客户端支持抵御 安装 使用npm： $ npm i axiso 为了解决post默认使用的是x-www-from-urlencoded 去请求数据，导致请求参数无法传递到后台，所以还需要安装一个插件QS $ npm install qs 一个命令全部解决 $ npm install --save axio...
这段时间开发的时候使用到了这个表单校验插件，用起来比较麻烦就不说了，还有较严重的缺陷。自己最终还是抽空把这个插件进行了一些优化，虽然优化的方式和当初自己定下的方向不怎么相同，但是就使用体验上来说还是提高了很多。 1. 实际开发中遇到的问题 在上面的文章中提及了一些表单插件的问题，主要针对的是插件开发本身存在的问题。下面我总结下使用中存在的问题: 每个使用表单校验的元素都需要添加 v-check 类名，比较麻烦。 必...
本文实例为大家分享了Vue实现日历小插件的具体代码，供大家参考，具体内容如下 先看下效果图吧， 如下 源码可见于我的github实现关键点： 1.组件的复用以及父子组件传值 很明显每年每个月的月历样式（数据不一样）是一致的，那么自然而然思路就是把每个月作为一个公用组件进行复用十二次，这样就避免了多次重复的代码。每个组件不一样的地方在于年份和月份，而这两个数据我们可以由父组件向子组件进行传值来告诉子组件。关键代码如...
1.如何引入 在vue-cli里，引入文件有几钟方法 一种是用npm或者cnpm指令去下载对应的插件，然后在main.js里用import方法引入，这里不讨论这种方法 我比较喜欢采用的是直接下载对应的js，然后引入到vue项目中去 问题来了，如何引入呢 方法如下： 下载对应的js文件或者css文件，一般下载插件相关联的都会在一起进入vue-cli项目工程里的index.html文件,分别引入css文件和js文件在这里，分别是 <link rel="stylesheet" href="./static/l...
vue路由插件，vuer Router,使vue官方的路由管理其，和vue高度耦合1.vue-Router的使用 import Vue from vue import Router from vue-router //引入路由组件Vue.use(Router)new Router({mode: history, //路由的两种模式 hash 和history 默认使history模式routes: [{path: /,name: home,component: () => import(xxx.vue)},{path: /about,name: about,component: () => import()}] }) 2.路由的跳转this.$router.push('/path')...
一、官方文档 1、第一步 const myPlugin = store => {// 当 store 初始化后调用store.subscribe((mutation, state) => {// 每次 mutation 之后调用// mutation 的格式为 { type, payload }}); };2、第二步 const store = new Vuex.Store({// ...plugins: [myPlugin] });二、编写一个打印日志的插件 1、函数的书写 import _ from lodash; function logger() {return function(store) {let prevState = store.state;store.subscribe(...
在开发项目的时候，我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。但是官方 cli3 现在并不支持搭建 plugin 开发的项目。 还好，已经有大神（Kazupon）走在了我们前面，我们就用现成的 vue-cli-plugin-p11n 。 如果你没有安装 vue-cli，请先安装 npm i -g @vue/cli 首先，搭建项目 vue create [your plugin name] && cd [your plugin name] vue add p11n这样我们就有了一个初始化的插件开发环境。 install 方法...
之前找了不少如何开发谷歌插件的文章，结果发现都是些很基础的内容，并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢？如果通过webpack编译的话，就能使开发过程变得更舒服，使文件结构趋向模块化，并且打包的时候直接编译压缩代码。后来发现了 vue-cli-plugin-chrome-ext 插件，通过这个插件能很方便地用 vue-cli3 来开发谷歌插件，并能直接引用各种UI框架跟npm插件。 tip：如果你没接触过谷歌插件开...
这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。 1.vue插件开发 关于vue的插件开发，官方文档里有很清晰的说明，详情可以去阅读开发文档。我自己开发的表单验证插件validate.ts和loading，messageBox插件都是利...
综述名称：vee-validate 用途：简单的 Vue.js 表单验证插件 官网：地址 github:地址特别提示配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面，通用性强安装单页安装npm install vee-validate --save浏览器安装 <!-- unpkg --><script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script> 引入项目单页引入import Vue from vue; import VeeValidate from vee-vali...