- 博客(52)
- 资源 (3)
- 收藏
- 关注
原创 公共组件,打开两个标签页时, 数据不更新
问题原因:因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。解决方法://方案一(推荐)watch: { $route(to, from) { this.XXXX(); // 再次获取数据 } }//方案二()路由跳转绑定唯一的key值如 xxx/6 xxx/7...
2022-03-14 13:23:15
253
原创 element-ui中的中国省市区级联选择器
npm install element-china-area-data -S 或cnpm install element-china-area-data -S导入以vue-cli创建的项目为例,在vue文件中的scrit标签内导入数据:import { regionData, CodeToText } from "element-china-area-data";使用如下代码所示:<template> <div id="app"> <d.
2022-02-18 17:44:37
2238
原创 数据封装处理大全
1.解析地址参数// 解析地址参数function GetParentQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var url = window.name; console.log(url, "打印"); // var url = document.referrer; localStorage.setItem("tdurl", url); va.
2021-07-21 14:12:05
237
原创 es6 简介
ES6ECMAScript 6 简介ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ECMAScript 和 JavaScript 的关系一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netsc
2021-06-23 12:04:08
426
转载 Git 教程
入门教程git入门教程展示帮助信息git help -gThe command output as below:The common Git guides are: attributes Defining attributes per path cli Git command-line interface and conventions core-tutorial A Git core tutorial fo.
2021-06-23 10:27:59
130
转载 vue 如何在循环中 “监听“ 的绑定v-model数据
1.普通属性的值进行监听vue中提供了一个watch方法,它用于观察vue实列上的数据变动,来响应数据的变化。下面我们来分别学习下使用watch对对象的属性值进行监听,有如下几种,普通属性的监听,对象的属性值的监听。最后一种就是对input中的v-modle的动态数组的数据属性进行监听,最后一种不是使用watch来监听,本文的重点是最后一种的实现。在项目中会经常碰到使用v-model监听数据的。<!DOCTYPE html><html> <head> .
2021-06-22 13:38:15
2714
原创 vue解析表格数据成json,并且分片上传
这个不用说npm i XLSX -S然后解析<el-upload class="upload" action="" :multiple="false" :show-file-list="false" accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
2021-06-08 11:25:45
383
原创 子传父
内部发送 window.parent.postMessage(message, '*');外部监听接收window.addEventListener('message', function (e) { //let target = e.target; let data = e.data; console.log(data); if (true) {
2021-03-24 16:12:58
163
原创 element-ui实现动态菜单栏 并处理菜单栏折叠文本不隐藏问题
element-ui实现动态菜单栏 并处理菜单栏折叠文本不隐藏问题<template> <el-aside style="width: auto" > <!-- 导航 --> <el-menu :unique-opened="true" router class="el-menu-vertical-demo" @open="handleOpen" :default-active="defa
2021-03-11 18:05:54
1130
原创 vue传值方式
其实很简单很好理解,引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。这里不包含同级组件父<template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :i
2021-01-06 16:31:21
124
原创 vue3.0+element 报Cannot read property ‘prototype‘ of undefined
写太多vue2.0项目了,3.0都出来这么长时间了,我还没用过,今天初体验一番。(之前都是听说坑很多,今天也遇到一个)防止旧版本脚手架影响项目,我先卸载老的 npm uninstall vue-cli -g //或者 yarn global remove vue-cli直接用最新的脚手架(Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli)注: Vue CLI 3需要 nodeJs ≥ 8.9 cnpm install -g @vue/cli //yarn global .
2021-01-06 16:18:11
11434
9
原创 js如何准确获取当前页面url网址信息
在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结。下面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=11、window.location.href(设置或获取整个 URL 为字符串)var test = window.location.href;alert(test);返回:http://i.cnblogs.com/EditPosts.aspx?o
2020-12-03 15:08:16
139
原创 不同环境请求不同配置
// 不同环境的请求配置const prodConfigs = { // 开发环境 'xia.8688sdk.com': { DOMAIN: '', baseURL: "http://dev.surprisejk.8688sdk.com", url:'http://dev.img01.8688sdk.com/', Bucket: 'test-1302919045', down
2020-12-03 13:58:16
257
原创 vue使用百度富文本教程
众所周知,富文本插件市面上多的很,国外的我们不谈,国内的也多如牛毛!!不得不说的是,百度自家的产品还是很不错的》》虽然早就不维护了。也比一些小流的好用,功能全。虽然操作起来复杂的多直接贴代码引入就不废话了,直接全局挂载引入import '../static/ue/ueditor.config.js'import '../static/ue/ueditor.all.js'import '../static/ue/lang/zh-cn/zh-cn.js'import '../static/ue
2020-12-03 12:02:30
902
1
原创 vue 使用 cos上传,完美解决!!!!!
说到vue使用cos上传,还是因为我们的一次服务器大规模迁移。公司服务器阿里云迁往腾讯云。因为我之前发布过一个不使用第三方官方sdk上传的功能,代码贴的很细致,有兴趣的可以自己爬楼找一找。好了废话不多说,开始大家最感兴趣的,贴代码!!! (cos-js-sdk-v5.min.js自己下载去,别下错了!!!下错了,会各种报错,实在找不到,叫我,我给你找!!!!)<!DOCTYPE html><html> <head> <meta charset=
2020-11-27 12:43:11
6777
13
原创 iframe中document.referrer无法取到完整url
今天发生了一件特别奇怪的事,特意记录下来,以供后续查看。测试同事反映说,使用chrome和Safari浏览器,打开线上的服务发现有问题。经检测发现,是iframe中的js文件中的函数,使用document.referrer获取外部文档的url竟然只能取到域名,其它的全取不到了,当时感觉特别奇怪,十一假期之前,还没有任何问题,结果放完假一上班就出现问题。然后就是一通折腾,发现chrome和safri都有问题,检查chrome版本,发现是86.开头的,同事的是85.开头的,都出现了同样的问题,结果装了个低版本
2020-10-29 11:06:58
3303
2
原创 element ui菜单栏动态渲染
直接上代码,模块清晰,自己赋值粘贴都行<el-menu :default-active="this.$route.path" :unique-opened="true" router class="el-menu-vertical-demo" background-color="#393e46" text-color="#fff" active-text-color="#4480e9" .
2020-08-24 17:35:39
3299
6
原创 如何在localStorage中存取数组,对象
1.首先你要知道localStorage只能存取字符串!!!!!那么如何存取数组/对象呢转存let newlist = []localStorage.setItem('recent', JSON.stringify(newlist))取用let list = JSON.parse(localStorage.getItem('recent'))
2020-08-24 17:19:44
1698
原创 vue 分片上传大文件,后端php接收合并
项目需要用到上传大文件功能,文件可能好几个G。传统的上传文件会有问题,所以自己找了一个php的实现方式,自己改到vue里面。废话不多说,这里是github上面的php dome 需要的可前往自行查看1.方式二、直接vue 的项目 index.html 里面引入 aetherupload.js spark-md5.min.js 还有 jq (因为他的aetherupload是jq写的请求,我懒得改,就直接引入了) 找不到index.html的同学,看你vue是什么版本的,是3
2020-08-19 10:24:01
1308
1
原创 element ui dialog 表单点击编辑,再点击添加,数据无法清空问题 解决办法
问题原因分析vue element ui在做编辑和添加时候通常使用一个dialog 弹框,这样就会出现一个问题,点击编辑 再点击添加,这时候数据已经赋值了, 所以this.$refs[formName].resetFields(),无法把数据重置为空[] 这肯定不是我们想要的结果,后面是这样解决的,在点击添加按钮的时候解决方式element Ui新增表单的时候,表单默认数据是新增get_new_data,编辑的时候表单默认数据是get_edit_data,这两个数据只能填一个,根据当前状态(
2020-08-07 09:43:44
4544
5
原创 html中如何去掉浏览器右边的滚动条
<body style="overflow-x: hidden"> 表示去掉水平滚动条。<body style="overflow-y: hidden"> 表示去掉竖直滚动条。<body style="overflow-x:hidden;overflow-y:scroll"> 表示隐藏横向滚动条,显示纵向滚动条。<body style="ov
2020-07-27 15:06:02
1695
原创 Avoided redundant navigation to current location:
虽然此报错并不会影响项目运行,但是作为一个强迫症的码农的确受不了error,解决方法如下:方法1:在项目目录下运行 npm i vue-router@3.0 -S 将vue-router改为3.0版本即可;方法2:若不想更换版本解决方法:在router.js中加入以下代码就可以记住插入的位置const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return or
2020-07-09 16:56:54
3940
原创 iframe postMessage跨域传参
父<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <iframe src="http://xiawenyi/index.html" id="ifr" width="" height=""></iframe> <br /> <
2020-07-09 10:00:59
646
原创 iframe跨域获取的父页面URL
当iframe与父页面不属于同一个域名时,像上面的获取会因为安全策略原因而失败。在nczonline的一篇文章上看到一种方法,使用document.referrer。方法很简单,通过parent !=window检测iframe与父页面是否同源,当不同源时,使用document.referrer,否则使用parent.location.href或者top.location.href;var getParentUrl = function() { var url = null; if (
2020-07-07 15:56:05
6733
原创 Vue+Element ui中常用表单验证----手机号、座机、传真、邮箱、身份证号、数字和带小数点的数字
Vue+Element ui中常用表单验证----手机号、座机、传真、邮箱、身份证号、数字和带小数点的数字情景:最近为前端form表单提交时需要验证一下几种特殊的输入数据格式进行验证,在此记录一下。一:正则1.手机号:const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;//11位手机号2.座机和传真:const reg = /^(\d{3,4}-)?\d{7,8}$/;//座机和传真格式是一样的:区号-号码3.邮箱:const reg = /^[a-z0-9
2020-07-07 15:50:43
3723
原创 window.open 在Safari中被拦截
原因:大部分现代的浏览器(Chrome/Firefox/IE 10+/Safari)都默认开启了阻止弹出窗口的策略,原因是window.open被广告商滥用,严重影响用户的使用。这个阻止弹出窗口的操作,并不是直接封杀window.open(),而是会根据用户的行为来判断这次window.open()是否属于流氓操作。如果是由用户触发的动作所引起的 window.open 就不会被浏览器所阻止,比如写在 onclick 这些事件 handler 里的,但如果是代码自己触发的就会被阻止。那么,我们可以知
2020-06-03 10:42:22
2523
3
原创 vue项目使用阿里无痕验证
<template> <div class="login"> <el-form-item style="width:300px;"> <el-button type="primary" @click="submitForm()" style="width:300px;height:50px;">登录</el-button> </el-form-item>
2020-06-01 13:26:28
3579
原创 记录一次vue3.0创建项目
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家。一、介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件:CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)CLI 服务:@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供 如:serve、build 和 insp
2020-06-01 11:02:07
425
原创 数组转url
function filter(str) { str += ''; str = str.replace(/&/g, '%26'); str = str.replace(/\=/g, '%3D'); return str;}function formateObjToParamStr(paramObj) { const sdata = []; for (let ...
2020-05-08 11:10:30
1373
原创 vue js获取手机系统型号、版本、浏览器类型
1.index.html引入<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.4/mobile-detect.min.js"></script>...
2020-05-08 10:47:17
7115
原创 VUE中使用UEditor百度富文本编辑器
我相信大家都能够对 vue 项目有了一个基本的认知。现在是不是已经开始上手做自己的项目了呢?呵呵,当然这是极好的。但是我们一般用 vue 来制作管理后台,在制作管理后台的时候,不可避免的,我们需要用到富文本编辑器。我尝试过 github 上的若干富文本编辑器,虽然能够实现一部分需求,但是还是不能充分满足我的需求。而百度推出的 UEditor 编辑器口碑不错,文档充分,还是很不错的选择(百度能有...
2020-04-15 11:53:04
1292
原创 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
首先,我们分别找到下面的文件:/config/dev.env.js/config/prod.env.js其实,这两个文件就是针对生产环境和发布环境设置不同参数的文件。我们打开dev.en.js文件。代码如下:var merge = require('webpack-merge')var prodEnv = require('./prod.env')module.exports =...
2020-03-18 10:03:38
450
原创 时间戳转时间格式
filters: { formatDate: function(value) { // console.log('时间戳',value) value = `${value}000`; //如果后台传的value为10位数,则需要在后面加三个0. value = Number(value); let year = new Date(value)...
2020-01-08 10:34:13
141
原创 vue 点击按钮复制指定内容到剪切板,复制变量值到剪切板
1.安装插件npm install --save vue-clipboard2或cnpm install --save vue-clipboard2import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)<template> <div cl...
2020-01-04 12:14:49
877
原创 vue element 表格根据后台返回的数据来决定展示数据还是可操作的按钮
vue element 表格根据后台返回的数据来决定展示数据还是可操作的按钮
2019-12-24 10:43:03
1538
转载 侧边栏与高度适应
js侧边栏在我新手时期,也写过许多的侧边栏,侧边栏的要求很简单,和屏幕高度保持一致,并且功能项能在内部进行滚动,当时的我也是煞费苦心,为了能够准确地自适应,不得不用js去进行实现$(window).resize(function(){ let sidebar = $('#dashboard-sidebar'); sidebar.css('height', 'auto'); ...
2019-12-03 15:40:07
1056
原创 复制粘贴
1、引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard --save 第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.com/)2、在需要使用的组件中import 引用方法:import Clipboard ...
2019-10-19 16:21:28
145
转载 vue中class渲染颜色 多种只取一种
<template> <div class="hello"> <button @click="addFn">提交</button> <h1>{{msg}}</h1> <p :class="[sum[index]]">颜色</p> </div></...
2019-08-15 23:27:55
576
原创 Vue中对数值进行保留小数点后两位的处理
废话不多说,上代码vue渲染页面时,处理后台返还的数据!<div class="text primary-text"> <span>合计:</span> <span class="money">¥{{totalMoney | numFilter 这里是下面对应的值}}</span></div>toFixed方...
2019-08-15 12:13:00
30795
4
转载 vue 的点击事件怎么获取当前点击的元素
首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “clickfun($event)”>点击</button>methods: { clickfun(e) { // e.target 是你当前点击的元素 ...
2019-08-10 16:29:43
11968
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人