当当当当当~我又来了。 在项目里经常会遇到侧导航切换页面的功能。 如果我们将侧导航做成公共组件，来调用的话，就会在每一个页面都引用该组件，在后期维护的时候比较麻烦，比如改参数。 所以此文将侧导航做成父页面组件，将切换的页面做成子页面，这样只需调用一次即可。大大减少了后期维护的麻烦 涉及功能点 侧导航支持多级 Vue Router的使用方法（ 官方文档 ） 子父组件的写法 样式：elementUI 效果图 实现 --- 目录结构 --- V...
vue-route-transitionvue router 切换动画 特性 模拟前进后退动画基于css3流畅动画基于sessionStorage，页面刷新不影响路由记录路由懒加载，返回可记录滚动条位置前进后退的判断与路由路径规则无关支持任意基于Vue的UI框架demo 手机扫码在线预览 说明 配套包含两个组件 vue-route-transition 负责动画router-layout 负责页面排版。 主要是解决transform动画，position:fixed异常问题像往常一样使用 npm i vue-route-transition -...
vue-form-check （基于vue的表单验证）具体实现代码如下所述： 安装 // 安装 npm i vue-form-check -S引用 // 引用(eg. 在工程的main.js下) import vueFormCheck from vue-form-check Vue.use(vueFormCheck)调用 this.$checkForm(current, config) @params current 是当前校验对象 config 是校验规则对象 config.alias 别名 config.type 配置项数据类型 config.required 是否必填 config.rule 正则校验 config.depend 先决...
我们的社区前端工程用的是element组件库，后台管理系统用的是iview，组件库都很棒，但是日期、时间选择器没有那种“ 年份 - 月份 -天数 ” 联动选择的组件。虽然两个组件库给出的相关组件也很棒，但是有时候确实不是太好用，不太明白为什么很多组件库都抛弃了日期联动选择。因此考虑自己动手做一个。 将时间戳转换成日期格式 // timestamp 为时间戳 new Date(timestamp) //获取到时间标砖对象，如：Sun Sep 02 2018 00:00:00 GMT+0...
具体代码如下所述：<div><div class="navlist"><ul><li class="navli" v-for="(item,index) in navList" :class="{activeT:nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}</i></li></ul></div><div class="swiper-container swiper_con"><div class="swiper-wrapper"><!-- 第一个swiper --><div class="swiper-slide" ref="viewBox">1111</div><!-- 第二个swiper --><div class="swiper-slide">2222</div></div></...
之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。 效果图：子组件 dropdown.vue<template><div class="vue-dropdown default-theme"><div class="cur-name" @click="isShow =! isShow">{{itemlist.cur.name}}</div><div class="list-and-search" :class="isShow?on:"><div class="search-module clearfix" v-show="isNeedSearch"><input class="search-text" @keyup=search($event) :placeholder="placeho...
一 需求： 公司项目需要通过electron调用系统打印机，实现打印小票的功能。 二、分析：electron打印大概有两种： 第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信调用相对复杂。第二种：使用页面的webview元素调用打印，可以将webview隐藏在调用的页面中，通信方式比较简单。 两个对象调用打印方法的使用方式都一样。 本文是通过第二种方法实现静默打印。 三、实现过程：...
1. 和多个元素的过渡一样，用组件来替换transition中包裹的标签 <style>.fade-enter,.fade-leave-to {opacity: 0}.fade-enter-active,.fade-leave-active {transition: opacity 2s}</style> </head><body><div id="demo"><button @click="show = !show">click me</button><transition name="fade" mode="in-out"><child-one v-if="show"></child-one><child-two v-else></child-two></transition></div><script>Vue.component(chi...
前言 上篇文章中，已经使用vue实现前端分页效果，这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图代码实现 按照惯例，我们在冻手实现的时候还是先想一想vue实现组件的思路 1、需要提前设定哪些参数需要暴露出来给父组件传递<Paging :name="name"@change="onPageChange":page-size="size":total="total"layout="jumper,total":current-page="curPage"/>方法及参数说明 属性 page-size 每页显示条目个数 total 总条...
菜鸟学习之路 //L6zt github 自己 在造组件轮子，也就是瞎搞。 自己写了个slider组件，想加个气泡提示。为了复用和省事特此写了个指令来解决。 预览地址 项目地址 github 我叫给它胡博效果图片 我对指令的理解: 前不久看过 一部分vnode实现源码，奈何资质有限...看不懂。 vnode的生命周期-----> 生成前、生成后、生成真正dom、更新 vnode、更新dom 、 销毁。 而Vue的指令则是依赖于vnode 的生命周期， 无非也是有以上类似的钩子。 ...
项目中我们可能会碰到导出Excel文件的需求，一般后台管理系统中居多，将table中展示的数据导出保存到本地。当然我们也可以通过一些处理来修改要导出的数据格式，具体需求具体对待。 1、首先我们需要安装3个依赖，file-saver、xlsx和script-loader。 使用npm安装： npm install file-saver xlsx -S npm install script-loader -D 使用yarn安装： yarn add file-saver xlsx -S yarn add script-loader -D 2、在/src目录下新建一个ven...
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多选，下面通过本文给大家讲解实现方法。 效果图预览：首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能 <div class="deliverySetting-table"><div class="table-head"><div class="selection"><el-checkbox :indeterminate="indeterminate" v-model="ische...
方式一、使用localStorage在数据存储 1、要在浏览器刷新的时候重新存储起来 if (window.localStorage.getItem(authToken)) { store.commit(types.SETLOANNUMBER, window.localStorage.getItem(loanNumber)); } 方式二、使用vue-cookie插件来做存储 1、参考地址传送门 2、安装包 npm install vue-cookie --save3、在store中存储起来 import Vue from vue; import Vuex from vuex;Vue.use(Vuex) var VueCookie = require(vue-cookie)...
一、问题描述： 我们在输入银行账号会设置每四位添加一个空格，输入金额，每三位添加一个空格。那么，在vue，element-ui 组件中，如何实现呢？ 二、效果图：三、实现代码： <el-table-column prop="account" label="银行账号"><template slot-scope="scope"><el-input type="text" maxlength="23" v-model="scope.row.account" placeholder="请输入银行账号" @change="validateNum(scope.$index)"></el-input></template> </...
我们安装好flyio之后 npm install flyio找到src目录下的main.js文件 首先引入flyjs并实例化 var Fly=require("flyio/dist/npm/wx") var fly=new Fly比方说我们每次请求我们自己的服务器接口的时候需要带上appID，用户登陆后需要带上openId// 请求拦截 fly.interceptors.request.use((request)=>{request.body.appId = xxx// 用户的openId在获取之后添加到全局变量中如果存在，我们将它添加到请求参数里面let openId = Vue.prototyp...