分类 前端技术 下的文章

最近在搞vue3+Typescript脚手架然后在定义变量的时候报错 'name' is never reassigned. Use 'const' instead prefer-const 大概意思就是 标识符'errMsg'永远不会被重新分配;使用'const'而不是'let'。(prefer-const)解决方法就是在eslint配置文件或者tslintt配置文件增加{ "rules":{ "prefer-const": "off" } }

Pinia 是什么?Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案Pinia 支持 Vue2 和 Vue3常见问题关于该项目和可能问题的几点说明：问：这是否取代了Vuex，是它的继任者吗？答：不，或者至少这不是主要意图问：动态模块呢？答：动态模块不是安全的类型，因此我们允许创建不同的商店，可以在任何地方导入Pinia 优势符合直觉，易于学习极轻， 仅有 1 KB模块化设计，便于拆分状态安装 Piniayarn add pinia@next # or with npm npm install pinia@next 用法创建一个- 阅读剩余部分 -

    大家都知道，网页之间传递数据可以使用ajax请求来完成，今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢？首先，postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢？这里我把一个案例分享出来把。看下面的代码：test.html<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> - 阅读剩余部分 -

iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？一：去掉全部的滚动条第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。 scrolling : auto -----在需要的时候滚动条出现 scrolling : yes ------始终显示滚动条 scrolling : no -------始终隐藏滚动条 当设置 scro- 阅读剩余部分 -

在循环数组的时候基于每个对象中的某个参数来进行数据请求，获取当前对象对应的数据状态实现方法基于最新的es6中的async await 来实现首先要把对应的Promise方法进行一个封装_getReportStatus(item){ return new Promise((resolve, reject) => { getReportStatus({reportCode:item.reportNo}).then(data => { if(data.data.code == '0000'){ - 阅读剩余部分 -

主要语句 vnode.elm.dispatchEvent(new CustomEvent('input'));/** * Created by liweiliang 406320591@QQ.com on 2021/01/26 23:04. */ import pattern from '@/utils/pattern' let amountCheck = function (vnode, binding, el) { // console.log(el, vnode, binding) let reopenState = binding.modifiers.- 阅读剩余部分 -

Column配置比如：操作列{ key: 'action', scopedSlots: { customRender: 'action', title: '变量名' }, align: 'center' } 代码段<template slot="变量名">{{动态表头名称}}</template> demo: 注意不要在括号 dataIndex同级节点加title属性名，否则的话scopedSlots设置的title会失效//Column { dataIndex: 'belong', key: 'belong- 阅读剩余部分 -

首先来说 百度地图默认的api，通过查看接口文当 中 MapOptions -> enableMapClick:是否开启底图可点功能，默认启用new BMap.Map(mapid,{enableMapClick:false});在vue-baidu-map中，上面这个方法是无效的通过查看源码发现需要在baidu-map上添加个:mapClick="false" 就可以了官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/index

::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset006pxrgba(255,0,0,.3); background: hsla(0,0%,100%,.1) } ::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(0,0,0,.2); -webkit-box-shadow: inset006pxrgba(0,0,0,.5- 阅读剩余部分 -

icon 自定义图标（1.14.0 新增） string|()=>VNode 一、利用自带的icon赋值个默认的icon名字就可以了，但是有时候我们需要用到实底风格的icon，所以只能用()=>VNodethis.$confirm({ title: '确认设置当前位置为出险地点?', content: this.infoWindow.contents, icon: 'exclamation-circle', onOk: () => { this.onMapClose(); c- 阅读剩余部分 -

Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.] 使用 Ant Design的时候报key警告，这由于columns中定义的默认key值在返回的数据中没有当前的这个字段造成的，一个是使用rowKey默认指定一个对应的键值对，或者使用类似v-for循环中的下标index来代替:rowKey="(record,index)=>{return index}"

最近试了下 Vue.extend 方法，写好后发现访问会报如下错误vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.接下来我们分析下报错的原因在哪里和解决办法原因vue有两种形式的代码 c- 阅读剩余部分 -

先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。1、vue的生命周期图在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。生命周期钩子详细beforeCreate在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。c- 阅读剩余部分 -

利用moment.js来实现距离某个时间的时间差，写了个过滤方法filterTaskTime(params){ let x=moment(params); let y=moment(); //当下时间 let duration = moment.duration(y.diff(x,'ms')); //做差 let days = duration.get('days'); let hours = duration.get('hours'); let mins = duration.get('minutes'); l- 阅读剩余部分 -

ios使用如下方法获得NaN，安卓手机则是正常计算，解决方法是换个这个时间的格式new Date("2020-07-17 23:59:59").getTime() 换成如下方式就正常了，就是‘-’换成‘/’new Date("2020/07/17 23:59:59").getTime() 正则表达式替换方法"2020-07-17 23:59:59".replace(/\-/g, '/')

首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；二、解决办法如上图所示，七个方法，基本覆盖了JS中大部分文件类型的转换与压缩，其中：1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的- 阅读剩余部分 -

HTML代码： <input id="file" type="file"> JS代码： var eleFile = document.querySelector('#file'); // 压缩图片需要的一些元素和对象 var reader = new FileReader(), img = new Image(); // 选择的文件对象 var file = null; // 缩放图片需要的canvas var canvas = document.createElement('canvas'); var contex- 阅读剩余部分 -

Nginx配置https代理，一直报错 nginx: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:46这个主要原生是因为nginx没有安装ssl模块执行步骤[root@120 ~]# cd /usr/local/src/nginx-1.6.1 [root@120 nginx-1.16.1]# /usr/local/nginx/sbin/nginx -V nginx version: nginx/1.16.1 built by gcc 4.8.5 2015062- 阅读剩余部分 -

1.随机数长度控制,定义一个长度变量（length），生成可控长度的随机数：Math.random().toString(36).substr(3,length) 2.引入时间戳：Date.now().toString(36) 3.合在一起最终办法：genID(length){ return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36); }

blobToBase64(blob) {return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = (e) => { resolve(e.target.result); }; fileReader.readAsDataURL(blob); fileReader.onerror = () => { reject(newError('文件流异常')); }; });},使用方法：thi- 阅读剩余部分 -

https://cn.vuejs.org/v2/api/#v-cloakv-cloak这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。示例：//css [v-cloak] { display: none; } //html <div v-cloak> {{ message }} </div>

<el-upload class="upload-demo" ref="upload" :on-change="handleUploadChange" :on-success="handleImportSuccess" :before-upload="beforeImportUpload" :http-request="uploadZip" :file-list="fileList&q- 阅读剩余部分 -

最近搞了个组件发现在实现input 离焦下拉收起，和点击下拉里面的选项进行选择的时候，会同时触发blur和click事件，如图：经过分析发现主要原因是由于blur事件会比click事件更先触发导致的。发现问题了就好解决了把click使用mousedown事件来代替就解决了

最近在搞纯页面外部引入vue.js的项目（非脚手架）今天遇到了坑，发现在子组件利用emit像父组件传值就是不好使，最后发现利用$emit 创建自定义事件，方法名一定要小写，大写是不会生效的，和脚手架开发还是有好多区别的，做个笔记

一、JS是单线程语言由于JS设计的初衷就是用来进行一些简单的用户交互以及DOM操作，为了避免复杂性，从一开始JS就被设计成一门单线程语言，现在如是，以后也不会变。然后正是由于单线程的缘故，当我们需要在前端运行一些大运算量的代码时，浏览器肯定会陷入卡顿。为了解决前端大运算量问题，HTML5引入了WebWorker。二、WebWorkerWebWorker是浏览器为我们提供的一个可以在浏览器后台开启一个新的线程的API，使得运行在浏览器中的 js 有了多线程的能力。但是这并不意味这js本身就支持多线程，因为这种新线程有很多限制：不能操作DOM；受主线程控制；和普通JS相比有很多- 阅读剩余部分 -

很多人都会遇到这个问题！一般情况先这个问题你百度就会有一大堆的答案，也许你运气好很快就能解决！虽然我这里讲述的可能会跟网上的部分教程有一样，因为我也是从他们那总结出来的！但是我这里是把大家可能遇到的情况都说清楚，包括网上没有答案的情况！下面都是我被坑了一天总结出来的！希望看到的朋友少踩坑！如果你遇到其它的奇葩问题，欢迎给我留言或者联系我个人QQ，因为很多坑我都踩过，希望能帮到你！【新版解决方案】：一句命令解决 npm i node-sass --sass_binary_site=https://npmmirror.com/mirrors/node-sass/【旧版解决方案如- 阅读剩余部分 -

1.安装vue-cli时经常卡住，将npm的仓库地址改为淘宝镜像原npm地址 npm config set registry http://registry.npmjs.org npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 2.验证配置npm config get registry 使用cnpm工具安装npm install -g cnpm --registry=htt- 阅读剩余部分 -

video.js是一个很好的视频播放插件，但是如果移植到vue上相信很多小伙伴很苦恼，是不是网上搜了一堆，发现不好使，我也是踩坑了，后来发现官方文档上就有，好尴尬，建议以后学习先看看官方文档，会有惊喜的。1.首先安装video.js，然后在main.js中引入npm i video.js -D //安装 //main.js 引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video; 1.先官方基础的使用方法，自定一个组件，说明一下在使用v- 阅读剩余部分 -
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. ...
  7. 7