- 博客(68)
- 收藏
- 关注
RSS订阅原创 移动端键盘弹起底部固定模块会被顶上去
问题：键盘弹起将底部按钮顶上去遮住输入框解决思路：实时监听窗口高度与初始高度比较，判断键盘是否弹起，弹起隐藏底部否则显示底部/vue/<div class='footer' v-show="isShow"></div> export default{ data(){ return{ originHeight: 0, // 原始高度 screenHeight: 0, // 实际高度 isShow: true, // 显示或隐藏底
2022-03-23 11:45:18
1554
原创 断点续传-vue
实现断点续传主题思路:对文件进行每200MB切片,基于spark-md5计算出第一个切片文件的hash值,将文件的名称,大小,hash值传给后台,后台确认当前文件是否上传过,已上传过返回之前上传大小或第几个切片,前端再次上传切片,直到上传完成.代码:<el-upload class="upload-demo" ref='upload' action="" :http-request='calcMd5' :on-preview="handlePreview" :on-rem
2021-09-03 16:21:47
1356
转载 实现复制文本js
copy(text) { //创建一个input框 const input = document.createElement("input"); //将指定的DOM节点添加到body的末尾 document.body.appendChild(input); //设置input框的value值为直播地址 input.setAttribute("value", text); //选取文本域中的内容 input.select(); //copy的意思是拷贝当前选中内容到剪贴板
2021-06-10 11:50:16
228
原创 chrome浏览器记住密码input背景色问题及input的placeholder的样式修改
一.浏览器记住密码input背景色问题input:-webkit-autofill { -webkit-text-fill-color: #ffffff !important;/*浏览器记住密码的字的颜色*/ transition: background-color 5000s ease-in-out 0s;/*通过延时渲染背景色变相去除背景颜色*/ caret-color: #ffffff;/*光标颜色*/}input:focus { outline: none; }/*外
2020-11-21 09:08:16
643
原创 js判断两个对象是否相等
一，最简单的JSON.stringifyJSON.stringify({a:1})===JSON.stringify({a:1}) //trueJSON.stringify({a:1})===JSON.stringify({a:2}) //true二，递归这里可以参考js判断两个对象是否相等
2020-07-24 17:09:43
880
转载 Object.assign()及深拷贝
语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target); // Object { a: 1,
2020-06-05 09:52:26
2829
3
原创 element导航菜单v-for循环数据后折叠菜单栏时有下拉菜单的文字不隐藏
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"> <div v-for="item in menuData" :key="item.id"> <el-submenu v-if="!item.children" :index="item.id" >
2020-06-02 11:17:56
1587
原创 面包屑实现 vue
面包屑有两种：一种是不带动态参数，一种是需要携带动态参数跳转的一，不带动态参数：1，通过路由元meta实现，在每个需要面包屑的页面路由中固定写好如：router.jsconst router = new Router({ routes: [{ path: '/test', name: 'test', component: test, meta: { breadList: [{ name: "首页", path: "/home" }
2020-05-31 16:16:23
3337
1
原创 vue重置data数据及element表单的重置出现自动验证问题
逐个赋值Object.assign(this.$data, this.$options.data())this.data获取当前状态下的datathis.data 获取当前状态下的datathis.data获取当前状态下的datathis.options.data() 获取该组件初始状态下的data3.如果有引入外部js的话使用：Object.assign(this.$data, this.$options.data.call(this))因为调用this.$options.data..
2020-05-13 14:53:33
1907
1
原创 vue项目实现代码统一风格
问题：由于每个人的IDE格式化不一致，导致提交的代码格式各异，在有冲突时可能会出现整个文件的冲突解决：1，在创建vue项目时添加eslint或者已有项目再单独添加eslint再pack.json里 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },这时，只要再提交代码前 npm run lin
2020-05-10 21:49:58
707
转载 windows系统 Git Bash Use arrow keys无法选择
windows系统 Git Bash Use arrow keys无法选择win7上的git bash有时候会这样，1.用cmd.exe就可以了2.使用数字代替你这里可以输入数字 2 ，然后回车，表示你要选择第 2 个。...
2020-05-01 17:28:31
2071
原创 vue 三层对象的渲染 页面正确显示但console报错error in render : 'typeerror':cannot read property 'path' of undefined
问题报错:error in render : ‘typeerror’:cannot read property ‘path’ of undefinedvue 三层对象的渲染(Splash.a.b)例如:渲染的组件为Splash,数据Splash原因:1.这很可能是由于Splash首次渲染的值所致。那是一个空对象，它将为任何属性返回undefined2.数据Splash是异步获取赋值,同...
2020-04-22 20:52:55
976
原创 window location href跳转地址时直接在当前地址后出现
问题:修改ip的接口成功后需要跳转修改后的ip地址失败的代码:this.$axios.get(url).then(res=>{let path=res.ip+window.location.pathnamewindow.location.href=path})原因:没有加协议更正:his.$axios.get(url).then(res=>{let path=win...
2020-04-22 20:43:18
3401
原创 vue2.0变化侦测粗浅理解
vue 同通过Object.defineProperty( )数据劫持方法里的get,set属性来监听data里的数据变化一,先熟悉下Object.defineProperty( )及其属性get,set通过以下代码就能理解var Book = {}var name = '';Object.defineProperty(Book, 'name', { set: function (v...
2020-04-16 17:23:24
362
转载 element-UI表格table实现表格行的动态合并
本文主要举个项目中真实实例，方便各位跟我一样在实际项目开发中碰到的需求功能的开发。（可直接拿来使用的）饿了么table组件官方实例：http://element-cn.eleme.io/#/zh-CN/component/table，在实际开发过程中，官方实例根本无法满足需求，实际需求一般都是动态的合并而不是固定怎么合并的，所以这时就需要我们对其进行处理。大致思路就是：先将查询出的列表数据分出...
2020-04-16 15:56:49
3907
3
原创 element-ui中for循环或者table遍历select且赋默认值
解决:把 v-model 的值加到循环数组中去，为每个 select 设置了单独的 v-model 变量值，对数据提前加工一下直接上代码:<template><div v-for='(val,index) in data'><el-select v-model="models[index]" placeholder="请选择"> <el-o...
2020-04-16 11:07:14
3943
2
原创 下载webpack插件时出现”Unexpected end of JSON input while parsing near”的错误
问题：按照官网配置webpack，npm install却提示有错误提示”Unexpected end of JSON input while parsing near”的错误解决：。1，解决方案为：清除缓存。运行 npm cache clean --force。再npm install2，换淘宝镜像试试npm install -g cnpm --registry=https://re...
2020-04-14 09:33:54
409
原创 实现未登录跳转回login页
问题：未登陆直接输入url：地址进入网站vue项目实例：一，设置router1.首先配置路由/src/router/index.js文件import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/',/...
2020-04-13 20:46:46
2082
转载 全角转半角
转化原理全角空格unicode编码为12288，半角空格为32其他字符半角(33-126)与全角(65281-65374)的unicode编码对应关系是：均相差65248function ToCDB(str) { var tmp = ""; for(var i=0;i<str.length;i++){ if (str.charCodeAt(i) =...
2019-10-09 20:42:25
304
原创 前端处理下载
一，后端文件流的形式（优点：简单）url=拼接的url（接口url+param参数）1，window.open(url)缺陷：有被拦截的可能2.利用a标签download属性实现下载，href为url3.利用from实现下载（推荐使用）直接贴代码download(url){ let from=document.createElement('from'); ...
2019-08-24 22:30:26
300
原创 前端跨域问题
一，Mac下chrome浏览器跨域在终端中输入以下命令（yourname是自己本机用户名）open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/打开的chrome有“–disable-web-se...
2019-08-24 21:36:26
459
原创 reduce的学习
一，语法arr.reduce(function(prev,cur,index,arr){...}, init);其中，arr 表示原数组；prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表示当前正在处理的数组元素；index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；init 表示初始值。举一个数组去重的例子va...
2019-08-18 15:35:43
139
原创 转化日期格式
将date类型或是时间戳转化为yy-mm-dd等自定义格式 getDate: function (data, formData) { let date = new Date(data); let lengx = function (param) { let str = param.toString(); ret...
2019-08-04 19:41:13
190
原创 export和export default
一，看到export和export defaule大家可能会想到exports和module.exports;1.exports和module.exports这是es5的语法，对应require来导入模块；2.export和export defaule是es6语法，对应import导入模块；这里主要讲export和export default的区别二，区别举这两个基本用法的例子就明白了...
2019-08-04 19:09:44
424
原创 $emit()不触发方法
一，父组件不触发原因：$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名。二，解决办法1.改小写命名2.用this.$parent.Event (Event为父组件中的自定义方法)使用父组件实例触发方法。3.如果是点击触发的 直接$emit(‘click’)触发...
2019-07-27 19:57:20
5574
原创 element-ui中组件函数钩子自带参数，不能添加参数问题
在element-ui中的组件函数钩子一般都是自带参数如：//上传组件<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remo...
2019-07-14 18:26:20
2094
2
原创 vue的watch监听
一，watch和computed区别（各自处理的数据关系场景不同）1.watch擅长处理的场景：一个数据影响多个数据2.computed擅长处理的场景：一个数据受多个数据影响二，（1）watch最简单的监听 <input type="text" v-model="input"> watch: { input(val) { // ...
2019-06-15 21:35:19
359
原创 git的一些命令
一，git的初始化配置安装git后：$ git config --global user.name "Your Name"$ git config --global user.email "email@example.com"这样就可以clone代码了，也有可能需要配置密钥，这个按照仓库的步骤来就行二，分支及合并查看分支：git branch创建分支：git branch &l...
2019-06-15 17:26:55
248
原创 vue mock数据引入本地json
作用：mock数据实现前端不依赖后台接口开发步骤：1.npm install mockjs --save-dev2.目录3.在src目录下创建mock文件index.jsimport Mock from 'mockjs'import user from './user.js'Mock.mock('/main.php', 'get', () => { return us...
2019-06-09 17:20:59
3825
原创 vue项目中vuter格式化和eslint冲突问题
一.在vue单文件中html格式化失败原因： 在vuter默认配置中： “vetur.format.defaultFormatter.html”: “none”,解决：在user setting中设置 “vetur.format.defaultFormatter.html”: “js-beautify-html”,二.在拉下代码或者修改""双引号->’'单引号 后格式化 “单引号-...
2019-05-25 19:53:21
6730
原创 $set()方法--更新数组时触发视图更新
vue中 有这种情况: 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新例如: 1.当你利用索引直接设置一个项时 this,arr[2]=‘美女’2.当你修改数组的长度时 this.arr.length=10$set()方法解决:this.$set(this.arr,2,'美女')...
2019-04-24 12:03:09
2849
转载 vue-router的钩子函数
vue路由钩子大致可以分为三类:1.全局钩子主要包括beforeEach和aftrEach,beforeEach函数有三个参数：to:router即将进入的路由对象from:当前导航即将离开的路由next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。afterEach函数不用传next()函数这...
2019-04-23 11:19:03
5791
原创 关于正则reg.test(str)结果反复问题
jslet reg=/jpg|png|jpeg/gilet str='jpg'if(reg.test(str)){ // true}if(reg.test(str)){ // false}if(reg.test(str)){ // true}if(reg.test(str)){ // false}但是:(/jpg|png|j...
2019-02-22 10:29:58
6031
1
原创 vue watch中function用箭头函数时this不指向vue
问题:watch:{ $route:(to,from)=>{ // this.title 为undefined }}解决:换回正常函数watch:{ $route:funciton(to,from){ //this 指向Vue }}...
2019-02-19 14:49:17
2779
原创 vue的router为history模式
一,出现的问题1.路由跳转不起作用(1)解决方法:routerVue.use(Router)export default new Router({mode:'history', // 注意添加这一项routes: [ { path: '/', component: home}, { path: '/content', component: Content },...
2019-02-19 11:05:27
8342
原创 es6新增的常用的数组方法及字符串方法
都是用来遍历数组1.forEach方法let arr = ['a', 'b', 'c', 'd']arr.forEach(function (val, idx, arr) { console.log(val + ', index = ' + idx) // val是当前元素，index当前元素索引，arr数组 console.log(arr)})forEach不能中断循...
2019-02-14 18:10:47
2662
1
原创 vue中引入图片问题
问题1:vue中动态修改img的src属性,直接改路径图片不显示问题2:我在vue中创建common.js为公共方法,在其中的方法有要用到img,src为形参,调用方法写入路径参数,但一直不显示图片解决:vue中的js引入图片,必须require进来例如:1.html<img :src='imgurl' />jsdata(){ return { im...
2019-02-13 18:52:05
1691
转载 vue路由传参的三种基本方式
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles" @click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 t...
2019-02-01 17:36:11
226
原创 简单的上传
html&lt;input type="file" title="" @change="uploadFile($event)" ref="clearFile"&gt;jsuploadFile(event) { this.fileName = event.target.files[0].name; // 文件名
2019-01-31 15:30:18
182
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人