js
visionke
这个作者很懒,什么都没留下…
展开
-
前端解析文本中URL并处理为超链接
正则判断url链接原创 2023-02-15 18:08:47 · 487 阅读 · 0 评论 -
文本域带格式的内容,展示在div中,保存格式,并且url变成超链接
文本域带格式的内容,展示在div中,保存格式,并且url变成超链接原创 2022-07-26 15:37:19 · 401 阅读 · 1 评论 -
前端大屏项目思路-如何缩放
想必近几年前端的数据可视化越来越重要了,很多甲方爸爸都喜欢那种炫酷的大屏幕设计,类似如下这种:遇到的这样的项目,二话不说,echarts或者antv,再搭配各种mvvm框架(react,vue),找二次封装过的组件,然后开始埋头开始写了,写着写着你会发现,如何适配不同屏幕呢?css媒体查询吧,用vw吧,哪个好点呢。其实写到最后,我觉得都不好对于这种拿不定主意的情况呢,最好还是参考大厂的做法,于是去找了网易有数,百度suger等,他们是如何写这样的页面的提供2个他们的案例链接:百度.转载 2021-07-27 17:09:22 · 3132 阅读 · 1 评论 -
在npm安装依赖失败时,特别是echart容易失败,切换为淘宝镜像
Node注意 Node 的版本应大于等于 12,而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本,注意 1.8 版本官方也直接称 8 版本)。安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。# 使用nrm工具切换淘宝源npx nrm use taobao# 如果之后需要切换回官方源可使用npx nrm use npmYarnYarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。np原创 2021-07-01 10:31:40 · 1112 阅读 · 0 评论 -
package.json中^,~的详细说明
package.json中^,~的详细说明在package.json这个文件中,我们经常可以看见这样的信息但是我们很少注意的是版本前面的 ^ 到底是什么意思今天我们就来讲一下(端好小板凳) "dependencies": { "axios": "0.21.0", "core-js": "~3.6.5", "echarts": "^4.9.0", "antd": "^3.1.4" "quill-image-drop-module": "^1.0.3",原创 2021-07-01 10:26:33 · 1216 阅读 · 0 评论 -
小程序中使用vant
1打开终端,初始化项目,生成pack.json文件2、通过 npm 安装 npm i @vant/weapp -S --production3、微信开发者工具点击右上角详情--本地设置--勾选使用npm模块4、构建npm5、修改 project.config.json官方解释:官方修改npm包位置{ ... "setting": { ... "packNpmManually": true, "packNpmRel原创 2021-06-23 17:00:40 · 318 阅读 · 0 评论 -
解决react-native中页面不刷新,再次进入页面,不走componentdidmount的问题
方法一:使用navigation的didFocus函数 componentDidMount() { const { navigation } = this.props; this.focusListener = navigation.addListener('didFocus', () => { this.pageInit(); //处理自己进入路由的逻辑 }); }方法二:使用react-native的DeviceEventEmit.原创 2021-05-06 18:01:03 · 3310 阅读 · 0 评论 -
react-native-video中加载中loading的使用
一、简介react-native-video是一个可以播放视频的组件,它的用法简单,功能完备,是React native项目中很好用的一个Video播放的组件。本文较多的功能并没有使用,只是简单地让视频在APP中展示,因为是点小图标然后再弹框中播放视频,所以需要加loading主要用到以下支持定制样式,比如设置宽高 主要在onLoadStart,onReadyForDisplay 这两个视频加载周期中展示loading,给用户反馈在视频加载初始,给一个loading提示 二、使用.原创 2021-03-03 14:28:40 · 1807 阅读 · 0 评论 -
js同源视频下载
fetch('https://internalgw-test.mottuum.com/group1/M00/00/50/rBLlJWAOlXyAEp6hABkAAApXoVw632.mp4?token=3423911b3b4f5c519a9cade07a32554f&ts=1611643549').then(res => res.blob()).then(blob => { const a = document.createElement('a'); document.body..原创 2021-01-26 14:48:59 · 193 阅读 · 0 评论 -
js匹配文件类型
/* * 根据文件名的尾缀 返回文件类型 * @param {any} fileName 文件名 * dzl * 2020年5月9日 */function getFileType(fileName) { // 后缀获取 let suffix = ""; // 获取类型结果 let result = ""; try { const flieArr = fileName.split("."); suffix = flieArr[flieArr.length - .原创 2021-01-26 13:52:12 · 519 阅读 · 0 评论 -
a,fetch 标签下载excel文件
handleExport = () => { const { dispatch, form } = this.props; const { paginationProps } = this.state; let forPage = { curPage: 1, pageSize: 999999, }; let options = {}; form.validateFields((err, fieldsValue) => ...原创 2021-01-13 18:12:50 · 392 阅读 · 0 评论 -
react在线编辑Excel表格
效果如上图,引用:SpreadJS下载react例子运行后如图原创 2020-12-01 17:32:15 · 2176 阅读 · 0 评论 -
pc签名插件 react-signature-canvas 的使用
import React, { Component } from 'react'import ReactDOM from 'react-dom'import SignaturePad from 'react-signature-canvas'import styles from './styles.module.css'class App extends Component { ...原创 2020-05-07 10:25:31 · 1521 阅读 · 0 评论 -
react中盒子内平滑滚动,监测盒子滚动条状态
Html <div className="content-layer"> <div className="module0 module-base"> <CarRegister pageQuery={pageQuery} jumpModule={this.handleStep} /&...原创 2020-03-25 19:55:30 · 816 阅读 · 0 评论 -
react-native init时报错
An unexpected error occurred: "https://registry.npmjs.org/react-native: self signed certificate in certificate chain". React-native安装时报错,说没有自签证证书解决方法:您正在尝试将SSL与未加密的端点进行通信。通常,这是由于代理配置错误(另请...原创 2020-01-20 17:30:52 · 512 阅读 · 0 评论 -
简单vue导航切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-12-13 16:48:43 · 173 阅读 · 0 评论 -
数组去重的方法比较
JavaScript 高性能数组去重中午和同事吃饭,席间讨论到数组去重这一问题我立刻就分享了我常用的一个去重方法,随即被老大指出这个方法效率不高回家后我自己测试了一下,发现那个方法确实很慢于是就有了这一次的高性能数组去重研究一、测试模版数组去重是一个老生常谈的问题,网上流传着有各种各样的解法为了测试这些解法的性能,我写了一个测试模版,用来计算数组去重的耗时...原创 2019-12-11 11:21:50 · 120 阅读 · 0 评论 -
利用sort() 和 localeCompare()函数来排序
目的是为了实现英文的首字母进行排序。函数代码:var arr1 = [{ name: 'DaLin' }, { name: 'HaLin' }, { name: 'VaLin' }, { name: 'SaLin' }, { name: 'WaL...原创 2019-10-24 10:46:26 · 637 阅读 · 0 评论 -
Eslint中 报错 Dependency cycle detected import/no-cycle 错误解决
引起上述错误的主要原因是 两个util文件中 依赖循环了,A依赖的B中的内容,B中也依赖的A中的内容,不要循环依赖,把其中一个依赖项摘出来,就解决问题了...原创 2019-04-19 10:42:43 · 24418 阅读 · 1 评论 -
input的type=file上传文件时限制各种文件格式accept属性值整理
<form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg, application/vnd.ms-excel" /></form>可选项.xml text/xml, application/xml Extensible Marku...原创 2019-05-14 16:24:35 · 4187 阅读 · 1 评论 -
在代码提交之前使用esLint校验代码
引言这个需求主要是组内成员用的编辑器不统一,代码风格也各异,所以在修改代码时,如果格式化了代码,在code review阶段很难分辨修改了的代码。当然,代码风格统一还有其他好处,这里就不不多废话了。先看效果源文件可以看到有很多红线,这个是因为不符合prettier的规则,这种情况下会使用eslint进行报错,就是你看到的红线了。具体如何配置之后再讲。下面来看看提交时的...转载 2019-06-19 12:01:53 · 5804 阅读 · 0 评论 -
vue全局使用axios 的方法(设置代理跨域)
在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼。仔细看看文档,就知道axios 是一个基...转载 2019-06-20 12:37:26 · 7919 阅读 · 0 评论 -
react-router 2.4.0 js 路由跳转问题
使用的react-router 2.4.0import { Link , History} from 'react-router';//分页点击跳转onChange (index) { this.setState({ index }); let Id = this.state.Id; this.props.history.pushState(null,'li...原创 2019-06-11 20:45:03 · 590 阅读 · 0 评论 -
利用sort 对json数据对象内的属性排序
举例,对数据中的id排序,经常会忽略sort()函数内的参数,重点是理解传给sort的函数 var result=[ {id:1,name:'中国银行'}, {id:3,name:'北京银行'}, {id:2,name:'河北银行'}, {id:10,name:'保定银行'}, {id:7,name:'涞水银行'} ]...转载 2019-06-24 10:30:46 · 1090 阅读 · 0 评论 -
实现锚点-scroll平滑滚动
a链接锚点定位太生硬?试试自己让滚动条平滑滚动把 scroll2 =(target)=>{ console.log('alb') console.log('滚动拉') target = target?target:'aaa'; //className const scrollPart = document.querySelector('.' + targ...原创 2019-07-22 21:13:02 · 1272 阅读 · 0 评论 -
不用循环,es6创建一个长度为100的数组
问题描述:在不使用循环的条件下,如何创建一个长度为100的数组,并且数组的每一个元素是该元素的下标?结果为:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, ...转载 2019-07-28 01:59:25 · 3765 阅读 · 0 评论 -
js 跨域下载图片解决方法
同源可以直接使用a标签,跨域时神烦,测试成功的代码如下,可直接复制测试 function ddd(){ console.log(22222) // 创建隐藏的可下载链接 // let blob = 'http://pic.c-ctrip.com/VacationH5Pic/mice/wechat/ewm01.png'; ...原创 2018-11-28 13:59:05 · 19096 阅读 · 7 评论