vue功能实现案例
vue实用宝典
技术项目经理
不忘初心,砥砺前行
展开
-
缓存路由的方式
1.data中//缓存路径,这个路径是给当前组件激活时用的cache_path: '/preciousMetalCompanyManage/preciousMetalCompanyManage', //缓存路径数组,这个路径数组是给点击子组件时用的cache_component_paths: [ '/preciousMetalCompanyManage/pre...原创 2019-03-18 21:04:17 · 1374 阅读 · 0 评论 -
vue路由缓存清除在main.js中设置
1.main.js/* 页面数据缓存 */var _CACHE_OBJS = {};function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === '...原创 2019-03-18 20:00:48 · 4697 阅读 · 0 评论 -
input上传文档代码
1.template<el-input v-compositionend ref="clearElInput" class="from-input" placeholder="请选择文件" readonly style="width:57%"></el-input> <input type="file" id="fi原创 2019-03-17 04:03:23 · 295 阅读 · 0 评论 -
同一表格根据不同排序条件查询
1.template<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange" @sort-change='handleSortChange' :clearS...原创 2019-03-16 21:13:14 · 941 阅读 · 0 评论 -
过滤文件设置
1.设置一个filter文件filter.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);//测试过滤器 /* 设置金额格式 1,234.56 */ let moneyFormat = value => { /* //金额转换 分->元 保留2位小数 并每隔3位用逗号分开 1,23...原创 2019-03-14 22:22:27 · 322 阅读 · 0 评论 -
路由带参数查询
// 带查询参数,变成/backend/order?selected=2this.$router.push({path: '/backend/order', query: {selected: "2"}});原创 2019-03-14 21:29:39 · 410 阅读 · 0 评论 -
node.js实现模糊查询
const express = require("express")var router = express.Router();const pool = require("../pool.js")router.get("/details", (req, res) => { var $pno = req.query.pno; var t = req.query.t;...原创 2019-03-04 15:53:51 · 1915 阅读 · 0 评论 -
node.js服务器发送各种类型数据
router.get("/getlist", (req, res) => { var tid = req.query.tid; if (!tid) { tid = 1; } var $pageNum = req.query.pageNum; if (!$pageNum) { $pageNum = 1; } el...原创 2019-03-02 15:38:31 · 254 阅读 · 0 评论 -
node实现同步顺序查询利用promise
const express = require("express")var router = express.Router();const pool = require("../pool.js")router.get("/details", (req, res) => { var tid = req.query.tid; if (!tid || tid == 0) ...原创 2019-02-28 15:38:06 · 381 阅读 · 0 评论 -
vue富文本编辑器组件
1.引用quill<script src="/lib/quill/quill.min.js"></script><link href="/lib/quill/quill.snow.css" rel="stylesheet" />2.RichEditorDemo.vue<template> <div cl原创 2019-02-16 15:15:47 · 1184 阅读 · 0 评论 -
移动到导航栏时显示二维码
1.index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu原创 2019-02-15 09:44:23 · 549 阅读 · 0 评论 -
sessionStorage用法
setItem存储value 用途:将value存储到key字段 用法:.setItem( key, value) 代码示例: sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in"); getItem获取value 用途:获取指定key本地存储的值 ...转载 2019-01-23 09:13:14 · 485 阅读 · 0 评论 -
base64 互转字符串
var str = '怪诞咖啡';console.log(encode(str));//JUU2JTgwJUFBJUU4JUFGJTlFJUU1JTkyJTk2JUU1JTk1JUExconsole.log(decode(encode(str)));//怪诞咖啡// 字符串转base64function encode(str){ // 对字符串进行编码 var encod...原创 2019-01-18 09:24:38 · 2366 阅读 · 0 评论 -
使用highcharts【案例3D饼图】
1.安装vue-highcharts和highcharts,npm install vue-highcharts --savenpm install highcharts --save2.option.jslet all={ pie:{ chart: { type: 'pie', options3d: ...原创 2019-01-10 14:34:09 · 1127 阅读 · 0 评论 -
vuex的使用场景【菜单导航、评论弹框】
1.store.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({ //统一状态 state: { count: 0 }, //状态管理方法集 mutations: { increase() { th...原创 2019-01-03 09:31:33 · 447 阅读 · 0 评论 -
背景图片居中显示
<div class="newsContbannerImg"> <img width="100%" class="innerimage" :src="hotTodayListImage" alt="新闻图片" ...原创 2019-01-02 10:56:05 · 821 阅读 · 0 评论 -
页面重置reset.css
选项一html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, str...原创 2018-12-31 21:25:29 · 224 阅读 · 0 评论 -
未知高度图片只显示中间一部分
<div style="width:300px; height:300px;"> <img src="dog.jpg" alt=""/></div>div{ position: relative; left:100px; top:100px; ..原创 2018-12-28 14:17:50 · 1039 阅读 · 2 评论 -
table删除当前页返回上一页
if (this.commentNum % this.pagesize === 1) {//总条数%每页条数 let lastpage = (this.commentNum + this.pagesize - 1) / this.pagesize;//最后一页=(总条数+补齐最后一页)/每页条数 if (this.No === lastpage && this.N...原创 2018-12-27 14:14:57 · 326 阅读 · 0 评论 -
路由缓存后定位
leave() { let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset; sessionStorage.setItem("id", JSON.stringify(top));}activat...原创 2018-12-26 18:45:02 · 228 阅读 · 0 评论 -
scss使用步骤
1).用npm安装sass的依赖包(可使用cnpm淘宝镜像)npm install --save-dev sass-loadernpm install --save-dev node-sass 2).在build目录下找到webpack.base.conf.js文件,在module的rules中插入以下代码{ test: /\.sass$/, lo...原创 2018-12-24 11:24:41 · 634 阅读 · 1 评论 -
echart封装
1.【template】<div class="stock-charts" style="height: 70px;width: 100%" id="stock-charts2"></div>2.【Methods:】//传入三个参数,ID、Data、ColordrawCharts(id,data,color){ let myCh...原创 2018-12-19 09:39:22 · 545 阅读 · 0 评论 -
vue中过滤器大全(一)【两位小数、银行卡号】
1.【保留2位小数】/** * 保留2位小数不四舍五入 * @param value * @returns {*}**/ Vue.prototype.formatnumst = function (value){ var f = parseFloat(x); if (isNaN(f)) { return false; } ...原创 2018-12-19 09:25:21 · 696 阅读 · 0 评论 -
首次登录会被弹出与点击新增与修改回到主页
处理方法:阻止默认行为@click..prevent原创 2018-12-18 09:53:59 · 325 阅读 · 0 评论 -
vue中使用Scroll事件
一.固定头部导航栏1.【vue的touch事件】 <div class="flex-wrapper" ref="scrollmain" @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend'>2.【Method】touchmove(e){ var scollTop=0...原创 2018-11-30 09:27:50 · 3984 阅读 · 0 评论 -
Vue项目通过百度地图获取地理定位【请开启HTTPS】
Vue 项目中使用百度地图一.写在前面的话,在vue项目中使用H5新特性在IOS手机上打开vue网页会有适应性问题,并且无法获取所在城市,因此使用第三方库百度地图api二.使用步骤1.获取百度地图密钥(1).注册百度开发者帐户 http://lbsyun.baidu.com/(2).创建网站为网站申请百度地址访问密钥 AccessKey2.实现百度...原创 2018-11-29 16:14:05 · 18074 阅读 · 9 评论