- 博客(88)
- 收藏
- 关注
RSS订阅原创 vue2 使用 vue-video-player 播放m3u8 流地址视频
2.aspectRatio: '16:9', 宽高比需要进行设置， 若没有进行设置，会出现黑边过高或者过宽的问题。1.type: 'application/x-mpegURL' ，否则无法播放流文件。注意需要引入 videojs-contrib-hls ，否则无法播放hls流文件。main.js 引入。
2023-09-19 14:20:39
1301
2
原创 vue 使用Decimal解决精度问题， 根据两个值以及区间值，生成一个数组，满足0.1+0.2=0.3小数位的精度计算
引入Decimal.js。
2023-08-09 13:08:44
958
原创 不同ts文件下，提示变量名重复的问题解决
可以尝试在 报错的文件上加上 export{}，即可完美解决。同一个目录的不同文件下使用同一个变量名称出现报错。发现即使在标签栏关闭 也无法解决，是因为ts的文件默认是全局文件。
2023-07-06 17:58:03
626
原创 2023 前端面试题
间隔一段时间后将函数放到任务队列中TypeScript是JS的超集（加强版），给JS添加了可选的静态类型和基于类的面向对象编程，拓展了JS的语法，TS是纯面向对象的编程语言，包含类和接口的概念，程序员可有用它来编写面向对象的服务端或客户端程序TS引入了很多面向对象程序设计的特征，主要包括interface 接口class 类enumerated type 枚举类型。
2023-04-06 11:11:24
1509
原创 ant-design-vue a-range-picker月份范围选择后弹框不关闭
【代码】ant-design-vue a-range-picker月份范围选择后弹框不关闭。
2023-04-03 18:59:35
913
1
原创 ant-design-vue a-range-picker 限制时间区间
【代码】ant-design-vue a-range-picker 限制时间区间。
2023-04-03 15:18:52
644
原创 js 关于加减乘除的小数点精度问题
js 在对于浮点型的数值在进行加法 乘法时，会出现精度问题例如 0.1+0.2 != 0.3 0.1425*100 != 14.25 等等/** * 精简乘法 accMul * @param {*} fn * @param {*} t * @returns */// 乘法函数 精确乘法结果 export const accMul = (arg1,arg2)=> { var m=0,s1=arg1.toString(),s2=arg2.toS...
2022-02-25 14:34:53
367
原创 vue ant-design-vue customRender内使用过滤器
引入全局过滤器// main.jsimport { numberToCurrencyNo } from '@/utils/util'// 配置全局过滤器，实现数字千分位格式Vue.filter('numberToCurrency', numberToCurrencyNo)在页面的标签内 是直接使用的{{formatMoney(item.recharge).bigMoney | numberToCurrency}}但在customRender内 就需要像调用具体方法的形式去使用
2022-02-24 17:42:07
1522
原创 关于js 拼接字符串带有特殊字符的处理
因为兼容ie的问题 不能使用模板字符串，所以对于字符串的变量拼接 还是使用的 + _var + 的形式'<p title=" '+ item.value + ' " class="pubTableItemStyle">' + item.value + '</p>'因为 value值 内存在 特殊字符 "" ,所以如果正常拼接的话， title的内容就会出现被中间存在的" 给中断了，导致显示不全的问题，这个时候就需要就需要先对特殊字符进行转义，然后再进行显示'<..
2022-01-19 15:37:43
2384
原创 el-input 邮箱 身份证号和手机号校验
ruleForm: { email: '', mobile: '', id_number:'', mobile1:'', }, rules: { email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', ...
2021-11-25 11:19:59
4020
原创 momnet.js 使用
获取当月第一天moment().startOf('month')获取当月最后一天moment().endOf('month')获取前七天的时间以及当天时间的区间范围[moment().subtract(6, 'days'),moment()]获取前一天的数据moment().subtract(1, 'days').format('YYYY-MM-DD')获取上个月第一天的数据moment().subtract(1,'month').startOf('m...
2021-10-11 17:24:31
365
原创 ant-design-vue a-table 表头添加tooltip
闲话不说 直接上代码<a-table :columns="headerData" :dataSource="tableData" :pagination="pagination" :rowKey="res => res.order_num" :scroll="{ x: 1200,y:500 }" class="mb20"> <span slot="customTitle"> 打款回单 <a-tooltip ..
2021-08-24 23:38:08
3631
原创 关于moment.js 的使用总结
1：计算时间差值moment(endTime).diff(moment(startTime), 'years')moment(endTime).diff(moment(startTime), 'months')moment(endTime).diff(moment(startTime), 'days') moment(endTime).diff(moment(startTime),'minutes' )moment(endTime).diff(moment(startTime), '
2021-08-10 23:21:33
258
原创 React中的webpack如何配置less
1. 暴露配置文件npm run eject如果执行 npm run eject报错 小心是.git隐藏文件 需要删除在执行命令2. 下载loadernpm install less less-loader说明：推荐使用的方法--不用考虑less-loader版本的问题3. 修改webpack.config.js修改前：constcssRegex=/\.css$/;修改后： constcssRegex=/\.css|less$/;4. 新...
2021-07-21 22:43:46
1041
1
原创 关于 ant-design-vue a-card 自定义title的问题
卡片标题上添加图标给卡片里面元素身上加slot属性，值等于title，需要取消组件a-card的title属性，不然无效。<a-card :body-style='{padding:0}'> <div slot="title"><a-icon type="smile" />卡片标题</div> <p>card content</p> <p>card content</p> <
2021-06-02 12:04:49
9081
1
原创 关于element-ui el-tree lazy懒加载 局部刷新的问题记录
在项目开发中，使用el-tree 进行懒加载的时候，如果遇到需要进行添加 删除操作的时候，整体刷新数据体验会很不好，所以需要局部进行刷新,我们可以通过找到树节点的形式，对当前展开的节点进行重新打开请求一次，以此来获取最新数据 <el-tree lazy ref="tree" :load="loadNode" :node-key="id" > </el-tree>methods: { refresh..
2021-05-26 14:04:23
1460
原创 关于 vue-qr 二维码插件的使用
1.安装依赖npm install vue-qr --save2.项目内使用：<div id="qrcode"> <vue-qr :text="companyInfo.qrcode_url" :size="200"></vue-qr></div>import VueQr from 'vue-qr'components:{ VueQr},data() { return { companyInfo:{} .
2021-05-07 12:27:26
569
原创 关于使用 ant-design-vue a-table 超出部分 隐藏并显示省略号
如果只是对于超出隐藏 可以直接使用ellipsis 进行设置，方便快捷columns = [{ id: "1", checked:true, width: 100, title: '更新时间', dataIndex: 'update_at', ellipsis: true,}]但有的时候 title的hover显示效果 满足不了我们的需求 ， 要求我们使用类似于tooltip的形式 对省略的字段进行显示 代码如下：columns = [{ i...
2021-04-01 12:43:02
13606
1
原创 npm install 、npm install --save 和 npm install --save-dev的区别
# 安装模块到项目目录下npm install moduleName#-save 的意思是将模块安装到项目目录下，并在package.json文件的dependencies节点写入依赖。npm install moduleName -save#--save-dev 的意思是将模块安装到项目目录下，并在package.json文件的devDependencies节点写入依赖。npm install moduleName --save-devnpm install moduleName.
2020-12-06 12:48:45
165
原创 vue中 关于proxy的理解
问题我们本地调试一般都是npm run serve，然后打开本机ip:8080（localhost:8080）对吧，这时候我们要调接口调试，后端的接口的地址可能在测试环境，也可能是自己电脑的 ip，总之不是你的lcoalhost:8080，那么你调接口就会产生跨域，那么怎么办呢？就需要proxy出场了复习一下跨域的解决方案jsonp cors Node中间件代理(两次跨域) nginx反向代理CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案JSONP只支持GE...
2020-12-05 11:35:34
6821
原创 react基础之--样式设置
1、行内样式设置<p style = {{color:'red', fontSize:'14px'}}>{this.state.name}</p>2、以对象的形式 将样式抽离出来 进行设置import React from 'react'const nameStyle = { fontSize: '20px', color: '#000', fontWeight: 'bold',}export default class Child2 ext..
2020-12-03 20:01:18
518
原创 react基础之--事件绑定的写法
1、 在调用的时候使用 bind 绑定 thisimport React from 'react'export default class Child2 extends React.Component{ constructor(props){ super(props) this.state = { name:'aaa' } } handleName(){ this.setState({ name:'ks' }) }
2020-12-03 19:52:35
131
1
原创 react基础之--setState的三种写法
修改state的值不能直接去修改 state 的值，否则数据无法驱动关联，需要使用 setState，setState 方法接收一个参数，参数为一个对象，类似于小程序原生的 setData。// 错误方式this.state.name = 'ks'// 正确方式this.setState({ name: 'ks' })存在props值的修改state的值因为更新的 props 和状态是异步的。这里，我们根据这些 props 更新状态。// 错误方式this.setS...
2020-12-03 14:02:04
1576
1
原创 react基础之--子组件向父组件传值
在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据） 在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数） 在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法 就可以在父组件中拿到传递过来得值进行使用具体代码如下：父组件代码：import React from 'react'export default class Hom.
2020-12-02 20:30:07
1032
原创 react基础之--父子间通信 props传值 以及prop-types的基本使用
步骤：1.父组件调用子组件时传入属性2.子组件直接通过this.props.属性名 即可拿到父组件传过来的值父组件代码：import React from 'react'import Child from '../components/child1'export default class Home extends React.Component{ constructor(props) { super(props) this.state =.
2020-12-02 19:58:35
982
原创 react基础之-- 列表循环
在jsx语法中，循环渲染是利用数组的遍历 map() 方法返回一个集合。遍历时必须有唯一索引 key 提高遍历的效率。一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串，万不得已可以使用 index。import React from 'react'export default class Home extends React.Component{ constructor(props) { super(props) this.st.
2020-12-01 23:36:25
1726
原创 webpack Prefetching/Preloading
1：是什么preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。Prefetching：设置这个指令，就表示允许浏览器在后台（空闲时）获取将来可能用得到的资源，并且将他们存储在浏览器的缓存中。这两种其实都是webpack提供的资源加载优化的方式，反正如果就是设置了这几个指令，就会先走个http的缓存，然后下次再次请求的
2020-08-05 21:52:47
280
原创 vue-i18n 中英文翻译
实现中英文翻译切换以及cookie 存储需要安装以下依赖npm install vue-i18n --savenpm install js-cookie --savemain.js 内 注入i18nimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementUI from 'element...
2020-08-05 17:42:53
637
原创 Webpack中SplitChunksPlugin 配置参数详解
代码分割本身和 webpack 没有什么关系，但是由于使用 webpack 可以非常轻松地实现代码分割，所以提到代码分割首先就会想到使用 webopack 实现。在 webpack 中是使用SplitChunksPlugin来实现的，由于SplitChunksPlugin配置参数众多，接下来就来梳理一下这些配置参数官网上的默认配置参数如下：module.exports = { //... optimization: { splitChunks: { chun...
2020-08-03 22:35:01
1086
原创 webpack-merge
webpack-merge随着我们业务逻辑的增多，图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来，进而导致配置文件的增多，使得配置文件书写起来比较繁琐，更严重者（书写特定文件的位置会出现错误）。更由于项目中不同的生产环境和开发环境的配置，使得配置文件变得更加糟糕。使用单个的配置文件会影响到任务的可重用性，随着项目需求的增长，我们必须要找到更有效地管理配置文件的方法。安装webpack-mergenpm install webpack-merge -D2
2020-08-03 17:22:50
4819
原创 webpack tree shaking--基础
tree shaking是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如import和export通俗一点解释就是：当我引入这个模块的时候 我不引用这个模块的所有代码 我只引入它需要的代码好处：主要的决定因素是应用程序中死代码的数量。如果你没有多少死代码，那么你就看不到 tree-shaking 的多少好处。什么是死代码很简单：就是 Webpack 没看到你使用的代码。Webpa...
2020-08-03 16:46:24
152
转载 Webpack知识点
介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面当修改了一个或多个文件 文件系统接收更改并通知webpack webpack重新编译构建一个或多个模块，并通知HMR服务器进行更新 HMR Server 使用webSocket通知HMR runtime 需要更新，HMR运行时通过HTTP请求更新jsonp HMR运行时替换更新中的模块，如果确定这些模块无法更新，则触发整个页面刷新如何利用webpack来优化前端性能？（提高性能和体验）压缩代码：删除多余的代码、注释
2020-07-28 22:59:17
156
原创 webpack --devserver
在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。module.exports = { devServer:{ contentBase:resolve(__dirname,'build'), // 项目构建后路径 watchCont
2020-07-28 21:37:20
209
原创 webpack--sourceMap
配置devtool此选项控制是否生成，以及如何生成 source map。当页面代码出现错误的时候 我们通常会点击右侧看看代码哪里出错了 这是打包后main.js内的代码 我们希望代码写错的时候 告诉我们的是源代码哪里出了问题总结一下：SourceMap是一种映射关系。当项目运行后，如果出现错误，错误信息只能定位到打包后文件中错误的位置。如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。const path = require(...
2020-07-27 23:23:40
814
原创 webpack--基础
webpack本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。entry入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间..
2020-07-27 23:04:22
80
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人