树沙&-优快云博客

原创 mpvue PDF文件预览

小程序中PDF文件预览问题在小程序中可以ios端可以使用<web-view:src="url"></web-view>但是在Android端pdf文件会自动下载解决方案：1 通过判断系统类型是否是ios还是Android，如果是ios端使用<web-view:src="url"></web-view>进行预览如果是Android 使用小程序文件上传预览方法// pdf功能预览 openMaterial(url) {...

2020-06-15 16:21:20 455

原创 Vue 百度富文本多图上传顺序错乱的问题

最近使用Vue工程+百度富文本ueditor碰到一个需求需要解决多图上传图片排序的问题参考一篇文章可以完美解决文章连接丢失。。。多图上传写入文本框的图片顺序和上传的顺序不一致修改两个地方第一个ueditor/dialogs/image/image.js 把_this.imageList.push(json);改为_this.imageList[$file.index()]...

2019-11-07 17:17:23 1248 1

原创原始form表单提交数据字段缺失问题

最近修改一个前后端不分离的项目表单提交使用的是最原始的提交方式（不想吐槽了）提交数据的时候不能把输入框设置disabled=true修改为disabled=false就OK了...

2019-08-02 21:57:26 2021

原创 elementUI中input框无法输入的问题

最近发现别人项目中在输入密码的时候发现input框无法输入进去键盘都快敲坏了还是无法输入通过各种排查、还是无法解决这个问题后面无意中发现 elementUI中@input事件可以拿到当前的输入的值问题找到了视图没有更新的问题那么怎么解决了刷新通过this.$forceUpdate() 可以解决这个问题这样的话这个问题就解决了原因可能是由于组件嵌套太深（不...

2019-07-22 21:57:44 58619 44

原创 vue项目出现替换图片出现404的错误

最近接手了一个项目需要替换logo图标、UI设计好新的图片放进项目中出现localhost:999/images/login-logo.png找不到的错误通过各种写法 require 、 important 发现都没有用结果打印图片发现是一串地址、打印以前的图片是base64位编码结果通过看base64位相关文章和看代码发现对图片的大小做了限制不能比以前的图片尺寸大太多否则会出现找...

2019-07-10 14:33:09 1029

原创高德地图实现marker水波纹雷达扩散覆盖效果

高德地图上面的marker的一些方法没有百度地图多参考了一篇关于百度地图marker雷达图的文章博主很强大给他点个赞具体实现思路：每一帧改变一下circle半径即可。然后多个circle覆盖在一起，按时间差进行绘制，向外扩散时又同步缩减透明度，即可实现水波纹效果。this.map = new AMap.Map("container",{// mapSty...

2019-03-28 16:54:30 9440 3

原创 react学习之路（二）es6语法掌握

react对js基础要求比较高 es6是必备基础 let 和 const 命令变量的解构赋值字符串的扩展数值的扩展函数的扩展数组的扩展对象的扩展 Class 的基本语法 Set 和 Map 数据结构 Promise 对象还有其他的就不一一列举了详情可以看看阮一峰es6非常详细 http://es6.ruanyifeng.com/这里我想说几种数组对象...

2019-02-20 16:44:38 230 2

原创 react学习之路（一）react脚手架的安装

官网链接https://github.com/facebook/create-react-appnpm install create-react-app -g 全局安装react脚手架create-react-app my-app 安装react最基本开发环境需要的第三方依赖cd my-app 进入项目npm start 运行项目浏览器访问localhost:3000 查看调...

2019-02-20 11:37:59 1609

原创 vue项目中使用webscoket心跳重连

首先在created定义心跳检测对象that.websock.send("ping") send方法是webscoket自带的一种给服务器发送消息的方法that.heartCheck = heartCheck 表示把heartCheck对象等于在data上面定义的heartCheck 对象然后把原来的heartCheck = null 来释放掉避免内存泄露that.ini...

2019-02-19 10:22:00 6764

原创解决elementUI菜单在vue中切换路由不高亮的问题

场景：项目中需要用到webscoket 推送过来的信息点击信息按钮跳转到指定的页面路由改变了可是菜单还是上一次的菜单高亮elementUI 里面有个属性通过设置这两个属性实现激活菜单的颜色active-text-color 当前激活菜单的文字颜色（仅支持 hex 格式） string — #409EFF text-color ...

2019-01-29 16:05:59 13078 9

转载 Websocket(一)——原理及基本属性和方法

Websocket(一)——原理及基本属性和方法初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。WebSocket 协...

2018-12-26 18:17:25 457

原创 vue中webscoket 主动断开连接

我们经常碰到这个需求在客户端退出的时候需要断开webscoketwebscoket里面提供了一个方法 webscoket.onclose这里是无法直接清除webscoket对象必须使用onclose方法...

2018-12-12 14:11:34 13610 5

原创 vue 中把dome拖拽封装成全局自定义指令

1 首先在vue中我们把拖拽事件进行封装（我这里是把它取名叫common.js）2 定义一个对象3 把需要用到的封装函数写在对象里面4 导出这个对象5 在需要用到拖拽功能的组件中进行引入6 给需要拖拽的元素绑定事件（我这里是通过标题拖动父元素类似于登录表单拖拽的形式）7 调用对象里面的方法到此vue中封装拖拽功能已经全部实现了...

2018-10-24 10:57:29 1432 2

原创 js禁止鼠标滚轮事件

一段代码搞定直接是禁止全局的鼠标滚轮事件如果只需要单个模块则把window.onload = function() {window.onmousewheel = document.onmousewheel=function() {return false}}里面的document 改为需要禁止的当前元素...

2018-10-11 13:52:17 7511 4

原创在 vue中使用 websocket

在methods 里面初始化websocket 在created里面进行调用websocketopen() {websocket连接成功后的触的函数}websocketonmessage(e){ 数据接收后触发的函数}e为后台推送过来的数据websocketclose（）{ 关闭后触发的函数}websocketerror（）{连接失败后触发的函数} ...

2018-09-12 20:48:10 14685 5

转载 css盒子居中

看到标题，相信大家并不陌生。这个问题，经常会出现在面试题中。通常会要求面试者写出几种方法。那么，究竟有几种方法，每种方法的兼容情况如何，相信大家很少研究过。今天，我们就一起来看看。通常分为2种情况，已知元素的宽度或未知。我们先说说在已知的情况下，要如何设置。举例说明：有2个元素，让子元素相对于父元素水平垂直居中。 html代码： <div class...

2018-09-11 16:55:45 635

原创 vue-cli打包优化

参考文章https://github.com/kaola-fed/blog/issues/204 https://segmentfault.com/a/1190000013239622打包优化主要是三个方面下载文件速度慢解析JS比较慢渲染比较慢服务端渲染(SSR)（服务器端渲染是加载最快的一种方式）SEO优化在服务端先将JS进行解析,解析完...

2018-09-11 15:00:50 3139

原创 element ui formatter 之字段为数组

formatter 按照官方说法最近碰到一个问题是后台传给我的表格字段是一个数组如何才能渲染到表格上呢查找elementUI官方文档发现formatter 还可以这样使用后台给的数据是这样的formatter 这样使用formatter 用来格式化内容 Function(row, column, cellValue, index) 先定义一...

2018-09-03 15:29:31 10266 11

转载 javascript通过navigator.userAgent识别各种浏览器

识别各种浏览器的实现原理是根据navigator.userAgent返回值识别:unction validBrowser(){ var u_agent = navigator.userAgent; var browser_name='Failed to identify the browser'; if(u_agent.indexOf('Firefox')>-1){ brows...

2018-08-09 18:05:26 2511

原创高德地图动态渲染marker

data() { return { flag: true, flag2: false, dataTree: [] }; }, unitBuilding() { this.$axios .post(“sinhic-service-website/unit/building/list”, { ...

2018-08-02 17:28:49 7757

原创 elementui 三级菜单可能在IE浏览器无法点开的问题

刚刚动态渲染三级菜单后出现了三级菜单在IE下无法点击的问题从github上面拉了很多代码都有这样的问题于是通过排查发现是elementUI面包屑的原因导致在IE下无法点击通过改造elementUI面包屑代码<el-col :span="18" class="breadcrumb-container"> <el-breadcrumb ...

2018-07-23 11:48:11 1368

原创 elementUI 动态渲染三级菜单

第一次使用elementUI项目不太熟看了网上很多列子感觉或多或少都有问题于是自己琢磨写出来了后台传的数据为menuList: [{name: "首页",pid: 0,id: 28,url: "/main"},{name: "实时监测",pid: 0,id: 29,url: "/monitoring",childNode: [...

2018-07-23 11:30:35 28570 13

原创 extract-text-webpack-plugin" loader is used without the corresponding plugin 打包报错

这个问题之前困扰我好久在项目发布的是需要打包刚开始打包没问题突然今天出错了网上的答案千奇百怪话不多说直接上代码刚开始以为是插件版本问题有一些确实是版本问题后面经过测试和版本无关不管是之前还是之后的版本都没关系在build 下面的webpack.prod.conf.js 里面只需要修改如下配置 // extract css into its own file ...

2018-07-12 15:01:11 8716

原创 vue 中的非父子间的通信

方法有二一在main.js中创建一个vue的实例在window下挂载 window.bus = new Vue()然后在需要传递的数据的组件中我这里是在home组件里面向其他地方进行传值在methods里面进行 handleNodeClick(data) { alert(data.id) bus.$emit('change', data) //d...

2018-07-05 15:31:41 241

转载 bootstrap-treeview树形图参数详解

简要教程bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。插件依赖Bootstrap v3.0.3jQuery v2.0.3以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支...

2018-06-28 14:27:46 51008 12

原创 vue登录验证进行路由拦截

表单验证部分使用elementUI里面提供的简单验证办法<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" autocomplete="off&

2018-06-28 14:23:06 2005

原创 vue中动态添加class类进行显示隐藏

<div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger&quot

2018-06-25 16:45:02 22531

原创在vue中使用js排他思想以及jQuery中的动画

1 在webpack.base.conf.js文件中如下配置并且执行npm i jqery --save resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'scss_vars': ...

2018-06-14 20:42:29 2193

原创 vue-cli中使用高德地图

第一步去高德地图开放平台申请密钥高德地图开放平台第二部在vue-cli项目目录结构里面多了config文件夹和 utils文件夹 config.js里面是这样的主要是导出密钥 // 高德地图 keyexport const MapKey = '你的密钥key'// 地图限定城市export const MapCityName = '武汉'utils文件夹里面新建路一个remoteL...

2018-06-01 17:28:27 16298 6

原创 vue-cli中使用echarts

首先在vue脚手架项目中安装echarts 执行npm i echarts --save 或者cnpm i echarts --save然后在main.js中进行配置import echarts from 'echarts'Vue.prototype.$echarts = echarts然后在组件中设计echarts图表<template> <div id="myChart...

2018-05-23 09:24:50 1600

原创 js中递归跟闭包的简单理解

首先认识一下递归js中的递归函数就是在函数体内部调用本函数；在写递归的时候一定要写条件避免进入死循环一个经典的例子使用递归写一个阶乘的案例//通过递归求阶乘function fun(n) {if (n<=1) {return 1}else {return n*fun(n-1)}}alert(fun(5))闭包的话// 一般指一个函数能够访问另一个...

2018-05-17 16:39:01 1229

原创 yapi的简单使用 ------一个神奇的模拟数据接口的工具

地址：http://yapi.demo.qunar.com/project/8403/interface/api第一步注册第二部：创建项目第三步：第四步：接口预览第五步：编译接口（也就是修改接口）第六步：返回参数的携带也可以实时编译返回的json数据还可以修改header头官方参考文档 https://yapi.ymfe.org/documents/index.html在谷歌浏...

2018-05-15 17:03:51 27023 1

原创 call apply bind的用法以及区别

对于call apply bind 大家的理解好多人的理解可能只是停留在可以改变this的指向上（当然我也是因为害怕忘记主要还是自己掌握的不牢，才写的）先来一个例子function mp() {}mp.prototype = { name: '手', tack: function() { console.log("他用" + this.name + '打我') }}...

2018-05-15 16:33:46 859

原创 vue中时间格式化组件库moment.js的使用

1 首先在vue项目中npm install moment --save2 定义时间格式化全局过滤器在main.js中导入组件import moment from 'moment'Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { return moment(dat...

2018-05-14 15:23:05 61884 1

原创使用nginx

第一步在https://nginx.org/en/download.html 地址上下载nginx 下载安装后会是这样的一个界面然后再conf文件中打开 nginx.conf文件修改配置文件 server { listen 8800;//这是需要监听的端口号访问本地8800相当于打开下面配置的端口号 8889 server_name localh...

2018-05-12 10:34:37 237

原创 vue-cli axios跨域问题

首先输入命令vue init webpack + 项目名称构建初始化vue-cli项目 npm i axios 在main.js文件中配置import axios from 'axios'Vue.prototype.$axios = axios然后在config index.js文件中配置以豆瓣的接口为例assetsSubDirectory: 'static', assetsPu...

2018-05-12 10:08:56 1015

原创 js数组方法的一些拓展

Array.prototype.forEach:替代for循环对数组进行循环遍历var list = [1,2,3,4,5]list.forEach(function(v,i){ // v是当前遍历的这一个元素 i是这个元素的索引 console.log('当前元素是' + v,'当前元素的索引是' + i)})Array.prototype.map:对数组进行遍历,同时会...

2018-05-08 18:03:06 1544

原创 vue的思中双向数据绑定的原理

我们在面试中经常会被问道什么是mvc 什么是 mvvm 还有双向数据绑定的原理：MVC：对项目的整体把控,M代表的是数据库中的数据,V代表的是前端的视图层，C用于处理M和V之间进行交互的业务逻辑(业务逻辑需要程序员自己控制，自己编写)MVVM:主要用于一些前端的框架,对MVC三层架构中的视图层再次进行层次划分，M是当前一个视图中需要用到的数据,V就是当前视图,VM负责M和V之间的数据调度,内部已...

2018-05-08 17:44:35 642

原创解决使用脚手架打包后本地不能访问的问题

很多学习vue的人在使用脚手架进行开发后执行npm run build 的时候会报这样的错误这一般都是缓存的问题解决方案就是在c盘中找到AppData\Roaming\npm-cache这个文件进行删除然后在项目依赖中删除node_modules 执行cnpm i 重新下载包如果没有安装cnpm 执行npm i 进行安装再重新进行打包就会生成这样的文件这个index文件是...

2018-04-28 17:13:26 1692

原创如何在vue-cli中使用百度地图

首先第一步搭建项目的架子 vue init webpack + 项目名称第二部就是申请密钥 http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 申请密钥后看一下百度开放平台问题反馈 http://lbsyun.baidu.com/index.php?title=FAQ/jsapi在index.html引入<script t...

2018-04-28 15:55:54 12963 3

空空如也

空空如也