qq_42546652的博客

原创 postion:fixed失效问题

https://www.jianshu.com/p/4f77fa62e14b

原创 css裁剪图片或者遮盖图片

事情发生在一个正在摸鱼的下午，伙伴阿甜同学遇到一需求。问我如何用css裁剪图片。阿陆同学一脸懵逼，立刻打开了www.baidu.com。一顿搜索。如图所示，首先我建议了为何不直接让Ui切图奉献 岂不是很香？阿甜告知。此图是后端返回，无法ui切图。故而 想到 那是不是直接写个扇形遮盖住就ok了、？然后发现没得任何卵用一顿搜索实现了。mask-image这方法，okkkkkk…这效果就类似于ps内蒙版的作用。本身我发现了一方法 clip-path我感觉可以实现。但是我没怼股出来…emmmm.

原创 【react】useRef的用法

useRef 和直接创建一个对象的区别在于什么？ useRef是保持唯一的引用，赋值和取值都是拿到的最终的那个值。修改他的值，不会导致重新渲染组件常用的做法：就是访问一个dom节点。通过ref.current去访问到真实的dom。可以做到监听举个简单栗子：...

原创 【react】react hooks 重构

由于重复业务。需要抽取一些通用的业务组件举两个栗子基础款：import React,{useEffect,useState} from 'react'const useMouseTrack=()=>{ const [postion, setpostion] = useState({x:0,y:0}) useEffect(()=>{ const hear=(e:MouseEvent)=>{ console.log(1) setposti.

原创 npm ERR! errno -4058

运行了一个 react 项目报错。首先询问了度娘。度娘解答npm换成cnpm 试一下。结果依然报错。然后又重新百度。说删除依赖试一下再一次Overok…最后，发现是运行的路径不对。蠢哭。只需要 cd ts-with-react 然后重新npm run start稳稳运行。头秃...

原创 react基础 react hook

npx是什么1.避免安装全局模块2.调用项目内部安装的模块reacr hooks没有破坏性改动完全可选百分百向后兼容没有计划从react移除class为什么用Hooks组件很难复用状态逻辑替代生命周期react组件一直是函数，使用Hook完全拥抱函数...

原创 利用第三方库创建生命文件以及利用ts自己创建生命文件

https://www.npmjs.com/package/@types/jqueryhttps://github.com/microsoft/typesearch基于网络的@types/*软件包搜索。利用第三方库快速创建生命文件使用TypeScript时，安装库类型定义的一种简便方法是使用“ @types” npm软件包。查看运行中的站点：http://microsoft.github.io/TypeSearch。第三方没有生命文件的时候，要自己写生命文件ts官方文档 生命文件的相关配置h

原创 【vue】事件修饰符事件（v.stop 和v.prevent）

一、v.stop作用 ：阻止事件冒泡<div @click="alert(1)"> <div @click="alert(2)">第二个</div></div>此时点击第二个 div 弹出的顺序为 2 1<div @click="alert(1)"> <div @click.stop="alert(2)">第二个</div></div>弹出的就只有2二，v.prevent作用 阻止事件

原创 【MVVM MVC】的区别

MVVM，MVC都是一种设计模式我们常用的vue框架实际上就使用了MVVM这种设计模式，采用了双向绑定的原理。MVVM—M:model 逻辑层 V:view 视图层 VM:view-model 视图模型实现的方式是DOM事件监听。在这种模型下 实际上是视图和模型之间是不能直接通信的。他们通过ViewModel来通信。通常要实现一个observer观察者。数据发生变化的时候。ViewModel能够监听到数据的这种变化。然后通知到对应的视图做自动更新。用户操作视图 ViewModel也能监听到视图的变

原创 【vue】SPA单页面的优缺点是什么？

什么是SPA?单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了， SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。SPA的优点是什么、？1.良好的

原创 【webpack】初认识

webpack 配置：环境参数：Nodejs10webpack4.26以上预备技能：基本Nodejs知识 NPM指令熟悉ES6语法 webpack是一种资源构建工具，静态模块打包器主要有五个核心概念：1.Entry以哪个文件作为入口起点开始打包2.Output输出指示webpack打包后的资源bundles输出到哪里3.Loader（css img）让webpack能够去处理非JavaScript·文件 webpack自身只理解js4.Plugins（插件，可压缩代码 les

原创 forEach for..in for...of的区别是什么

1.forEachvar a = ['a','b','c']a.forEach((item,index)=>{ console.log(item,index)})打印结果但是forEach有弊端是在循环数组的时候是无法跳出循环的 也就是无法 break return2.for…invar a = ['a','b','c']for(item in a){console.log(item)}打印结果可以获得毽名。但是 类型确实字符串形式的。也就是说 for … in 适合遍历

原创 【vue+element-ui】时间选择组件弹出框错位的问题

这就是一个平平无奇的日期选择器。第一次点击正常无比。在第二次开始切换之后。就出现弹出框错位的问题。百思不得其解。如下图所示于是乎 阿陆同学就开始尝试改动样式问题。甚至翻阅了饿了么的文档 以为是没有放置align:center这个属性导致的。经过百般尝试。没想到是v-if导致出来的错误！！！！瞳孔震惊。原理是什么 不清楚 总之将v-if改成了v-show就完美的解决了。附送部分代码一张。...

原创 【vue】 less和sass的区别

less和sass都是css的一种预处理器。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。sass和less的区别1、Less环境较Sass简单2、Less使用较Sass简单3、从功能出发，Sass较Less略强大一些4、Less与Sass处理机制不一样（前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点）关于变量在Less和Sass中的唯一区别就是Less用@，Sass用

原创 plus.runtime.quit()； IOS 无法退出

http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quitplus.runtime.restart() 重启

原创 uniapp的App证书 秘钥 应用包名等 ios安卓可能涉及到的一些问题

如图所示这个uni_appid 即uniapp的id切记 不要重新获取。这样可能会在后续打包等问题出现问题。但是由于本人好奇心极重以及手欠的特性。还是没忍住重新获取了一下。于是内心慌得一比的我就遭遇了无法打包的问题。终于在种种百度中，找到了问题的关键。在这里就可以因我自己手欠的原因。重新更改回原来的uni_appiduni_appid： uniapp的id秘钥： 生成APP证书时设置的密码应用包名： uniapp打包时有个安卓包名既应用包名应用签名： 常是微信开放平台中特定需要的，下载.

原创 踩坑vue table点击当行获取展开行的接口数据

时隔很久复盘一下这个问题。当时遇到了，虽然按照自己的常规写法。但是出现了一个不知道如何解决的问题----点击三次才能正常获取到数据。不知道如何产生的这种情况。但是目前先整理出来可以正常获取出来的正确操作 <!-- 表格主体部分 --> <el-main class="table-container"> <div class="tableBox" :style="height" > <el-table :data="t..

原创 vue父组件和子组件的生命周期到底谁先执行？

加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父组件更新过程父beforeUpdate->父updated销毁过程父beforeDestroy-&gt

原创 vue中树结构的新需求

由于我们产品的幺蛾子。据说那是个风和日丽的下午。产品大人去和大佬们谈需求。大佬们说要把这个树结构里的数据啊 改一改。也就是上面的数据里后面为0的就不显示了。如下图是的 没有看错。于是乎就产生了思考。让我这个过了十一还没怎么动手敲过代码的孩儿 重新捡起来js。oh~nice getThreeData() { this.$axios.get(this.MICRO_CONFIG.baseUrl + "/transferStation/transferStationTree").t.

原创 uniapp 踩坑Map组件

由于本人不爱看文档 遇到问题先百度的原则，还是踩了不少坑。先简单记载第一步做出一个如图所示的效果 代码如下： <map style="width: 100%; height:94vh;" :latitude="latitude" :longitude="longitude" :markers="marker" :scale='scale' :controls="controls" :circles="circles" :polyline="polyline"&

原创 uniapp 中条件编译以及平台标识 记录

原创 uniapp showToast

图中标注部分为显示在底部 无icon

原创 熟悉Uniapp之对setStorageSync 和 setStorage 的区别

拿到uniapp项目，在了解的过程中。了解到，对数据进行缓存的方法，看到官网之后，发现了其中的不同之处 产生了疑虑以Sync结尾的都是同步缓存（同步 同时），二者区别是 异步不会阻塞当前任务。同步缓存直到同步方法处理完才能继续往下执行。通俗点说,异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.使用异步,性能会更好;而使用同步,数据会更安全。它们都是将数据存储在本地缓存指定的key中，单个key最大数据长度为 1MB，所有数据存储上限为 10MB在使用.

原创 uniapp用苹果机进行调试

本人手机Ios，所以被迫ios进行调试用hbuilder打开Uniapp项目。点击运行-》运行到手机或者虚拟机需要pc端下载itunes,电脑检测到是否连接上手机。连接之后信任该程序。但此时我就遇到了一个问题。在相关网站上下载了ITunes，电脑显示连接到该设备。但是无法运行在苹果手机里鄙人一时懵逼无比。翻阅无数文档，拜读无数百度文、终于勇敢向同事勇敢发问！！！当当当当！这动人的话语。哈哈哈哈哈哈哈哈哈，完美搞定了我的困惑~安装成功后稳稳的重启了一下Hbuilder。就Ok了。..

原创 如何查找Google的安装位置？

打开Google ,在地址栏中输入chrome://version

原创 echarts dataZoom属性如何修改设置

因x轴数据过多。因此用dataZoom属性。使得产生一个滚动条方便展示，但现在需求变化，想要滚动条如下图所示这样展示的效果更好些：那么关键代码如下： grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true}, xAxis: { data: [], type: 'category', // interval: 5, axisLabel: { .

原创 如何设置element ui table的show-overflow-tooltip属性以及宽度

先上图如上图所示，在运用饿了么这个组件库的时候。有时因为表格字数过多导致内容溢出。一般会采用:show-overflow-tooltip="true"这个属性。该属性可以让内容在一行显示，如果显示不下时，显示…,并且鼠标划过时显示全部文字如果想要上述提示中所有的提示字都完整显示出来，那么就需要修改这个样式：样式代码如下：可以在全局添加这样全部生效，如果不想加在全局的话，可以单独加在页面当中，但是切记修改elementui自带样式的话，不能在中修改，因为不会生效。一个全局的代码段：...

原创 Echarts x轴数据过多 如何处理

使用echarts 柱状图数据过多时，容易挤到一起，导致排版很不清楚。就像下图这样：到网上找了很多，答案都不尽人意，后来就到官网查API文档，被我给找到了先出效果图，再上答案没错就是这种横向X轴拖动配置代码就是 dataZoom : [ { type: 'slider', show: true, start: 94, end: 100, handleSize

原创 vue项目 导入pdf功能 以及 预览Pdf

先上效果图上传Pdf的具体代码如下： <el-upload class="upload-demo" ref="upload" :action="action" :on-preview="handlePreview" :on-remove="handleRemove" :befor

原创 js词法作用域以及欺骗词法

作用域主要有两种，一种为词法作用域 一种为动态作用域（Bash脚本等）词法作用域就是定义在词法阶段的作用域也就是你的变量和作用域写在哪里决定的。function foo(a){ var b = a * 2 function bar(c){ console.log(a,b,c) } bar(b*3)}foo(2)包含整个全局作用域的唯一标识是foo包含foo所创建的作用域，表示：a,b. bar包含Bar所创建的 只有c欺骗词法如果词法作用域完全由写代码期间函数声明的位置来定义

原创 Element ui表格导出Excel 以及遇到的坑

项目中遇到需要导出excel的需求首先安装依赖首先安装依赖项：npm install -S file-saver xlsx或者是以下命令，这两个命令一样。npm install --save xlsx file-saverfile-saver：保存文件xlsx：电子表格解析器接下来我们开始写一个表格，给表格一个id（项目中用到id并没有多大用，不知道是哪里的问题 总之先带着还是没毛病的）<el-table :data="meterList" style="width: 100

原创 vue 验证两次输入的密码是否一致

好记性不如烂笔头。总也记不住<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="新密码" prop="newPwd"> <el-input v-model="ruleForm.newPwd" clearable size="sma

原创 vue侦听器

我们大部分情况下 使用计算属性即可。但是watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。<div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p></div><!

原创 Vue声明式渲染

1.简洁的模板方式实现<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})生成的页面：动态绑定属性：<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span&

原创 vue自定义指令

Vue.directive('scroll', { inserted(el) { el.scrollIntoView() }})自动滑动到底部

原创 css实现响应式布局？浏览器兼容（77%以上支持）

CSS Grid 布局代码实现：html部分<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div></div>css部分：.container {

原创 vue项目的模糊搜索功能

vue模糊搜索关键代码如下： <el-input placeholder="请输入关键信息" v-model="keyword" class="input-with-select" @keyup.enter.native="findKey" clearable @change="getCompany()"> <!-- @change="pageNum=1,getCompany()" --> <el-button cl

原创 vue项目中v-for循环。将拿到的index和name作为参数传给后端

代码如下<el-select v-model="currentObj.carUnitName" size="small" clearable placeholder="请选择运营单位" style="width: 100%" @change="chooseUnits"> <el-option v-for="item in unitsArray" :key="item.code" :label=

原创 vue项目下拉框内容过长做一个滚动条的效果

vue项目下拉框内容过长做一个滚动条的效果如下图：关键代码如下：

原创 uniapp基础(以及初始化配置（不全）)

uniapp基础互联网流量为王。因此各家都出个自己的小程序。uniapp一套代码适应很多平台。优点：学习成本低。基于vue。小程序。开发成本低 按需编译开发准备：编译工具下载：HBuliderX 微信小程序开发工具 其他自行下载（在官网上对应下载）创建项目： 可以在小程序里面打开。运行-》运行到小程序开发模拟器=》微信小程序左侧为项目生成的目录结构1.uni.scss设置全局的样式。主色调，字体大小 常用字号常用间距2 pages.json初始化的设置。 新建页面要