- 博客(59)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 v-html代码中js事件失效问题
后端返回的HTML代码：const codeHTML = "<div class=\"table\"><table border=\"0\"><tr><td rowspan='1'>year</td><td><p><span οnclick='view({\"id\":\"6\",\"depId\":\"2022\"})'>2022</span></p></td></t
2022-04-20 14:55:41
618
原创 el-table中table-col动态更新后固定栏高度问题
好久没写了，记录一下一个el-table更新问题。动态更新el-table中table-col后固定在右侧的操作栏高度显示异常，如下图上图为更新前，下图为更新后刷新后就正常了，所以推断是没有同步更新造成的，解决方法如下：<el-table :key="elTableKey" // 给el-table绑定key值 ></el-table><template v-for="item in tableCol"> // 表格列是动态渲染的 <
2022-04-18 15:11:23
797
原创 数据处理题
2013年, 加里·伯恩哈德就在微博上发布了以下代码段:['10','10','10','10','10'].map(parseInt);以为是[10,10,10,10,10],其实是[10,NaN,2,3,4]解析：Array.map(parseInt)等价于Array.map((item,index)=>{ return parseInt(item,index)})那么结果便是[parseInt('10',0),parseInt('10',1),parseInt('10',2)
2021-08-25 13:55:14
253
原创 2021-08-24总结
1.环境判断navigator是HTML中的内置对象，包含浏览器的信息；userAgent是navigator的属性方法，可返回由客户机发送服务器的 user-agent 头部的值，作用是返回当前用户所使用的是什么浏览器，toLowerCase()将得到的信息变成小写，固定格式。let user = navigator.userAgent.toLowerCase();let isWx = user.match(/MicroMessenger/i) == "micromessenger"; // 判断
2021-08-24 13:43:18
131
原创 根据周X HH:mm:ss判断时间是否交叉重叠
根据如下itemInfo这种数据判断时间是否冲突，我的思路是将时间全部转化为秒，判别区间是否交叉重叠，是即冲突。代码如下（待优化）itemInfo:[ { period: ['03:20:10','15:20:10'], weekList: ['周一','周三','周四'] }, { period: ['02:20:15','03:30:30'], weekList: ['周三','周五'] }, { period: ['02:20:15','
2021-07-07 23:19:01
150
原创 grid空间自适应
某个公司的面试题，好久没写过原生了，凑活看吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
2021-06-24 10:55:15
144
原创 JS深浅拷贝
对象：let obj = { a:"a", b:"b"}// 以下两种为浅拷贝let newObj = {...obj} // 拓展运算符let newObj = Object.assign({},obj) // 空对象合并// 以下为深拷贝let newObj = JSON.parse(JSON.stringify(obj)) // 利用JSON序列化和反序列化方法将内容完全展开数组：let arr = [{name:'jack'},{name:'crdo'}]// 前三种
2021-06-10 10:45:29
61
原创 echarts图表宽高
总是在上线后才发现更好的配置·…options: { color: ["#4D7CFE", "#F1683F"], grid: { //grid 组件离容器上下左右侧的距离 left: '3%', right: '3%', top:'40', bottom: '3%', containLabel: true }, xAxis: { splitLine: { show: false , },
2021-06-10 10:40:17
1051
原创 向数组对象中添加新属性
用的是es6对象新增语法 传送门let arr = ["全部", "护肤", "日用百货", "母婴", "家居家纺", "美妆", "玩具"]let arra = []arr.map(((item, index)=> {arra.push(Object.assign({name:item,value:item=="全部"?null:item}))}))
2021-05-28 15:00:35
1201
原创 qs.stringify与JSON.stringify
刚接触的项目接口参数拼接是用Qs.stringify(params)，平时json转换用的是JSON.stringify()qs是npm的一个管理包npm install qs --Slet params = { Id: 123, status: 'normal'}Qs.stringify(params) //'Id=123&status=normal'JSON.stringify(params) //{ "Id":"123","status":"normal"}记得之前写过一
2021-05-24 11:39:47
151
原创 根据参数动态赋值
在utils文件夹下建公用js文件，用来存放静态数据，只需在使用时引入。export const demo = [ { label: '全部状态', value: '' }, { label: 'aaa', value: 1 }, { label: 'bbb', value: 2 }, { label: 'ccc', value: 3 }, { label: 'ddd', value: 4 }]<span :class="getColor(xxx)">{{getSta
2021-05-11 14:14:18
156
原创 less安装与配置
之前配置项目的时候也有这些坑，所以今天配置新项目的时候顺便记录一下。新建项目后安装lessnpm install less less-loader --save安装成功后找到webpack.base.conf.js文件，在以下位置增加less配置支持module: { rules: [ {}........... //以上部分为项目配置后自带的，只需要在尾部添加即可 { test: /\.less$/, loader: "s
2021-05-07 11:34:59
581
原创 表格数据导出功能
若后端为post传参，且返回的是文件流，那么可以用如下第一种方法： export() { let cookie = localStorage.xxx(); const params = { xxxx: xxxxxx, xxxx: xxxxxx, cookie, }; fetch( "http://api.xxx.xxxxx.cn/xxxxx/?post=json", {
2021-04-21 11:05:28
91
原创 vue 中.sync修饰符的使用方法
最近在项目中看到有些地方用了.sync修饰符，所以进一步了解一下，并记录。vue官网.sync修饰符介绍：点击查看一般情况下，子组件向父组件传值并改变值都需要使用回调方法，但有更简洁的写法。如下为简易案例：常见的回调函数写法：// 子组件代码：<template> <div> <button @click="setNum">点击传值</button> </div></template><script>
2021-04-02 15:35:40
280
原创 JSON Server接口请求和接口参数拼接
增add(){ let params= { "title": "阿西吧哈哈哈哈哈", "time": "2021-03-02 21:52", "id": "12" } this.$axios .post("http://localhost:3000/news/", params) .then(res => { console.log(res) }).catch(()=>{console.log('新增数据失败')}) },.
2021-03-25 16:58:17
508
原创 iview的select选择器下拉被遮盖
原代码：<Select v-model="defaultGroup" style="width:284px"> <Option v-for="item in groupNameList" :value="item.groupId" :key="item.groupId">{{ item.groupName }}</Option></Select>需给Select标签添加 **:transfer=‘true’**属性...
2021-03-09 18:08:21
644
原创 git pull 提示：发现交换文件 “.git/.MERGE_MSG.swp“
最近总是遇到git pull拉取代码时出现E325: 注意发现交换文件 ".git/.MERGE_MSG.swp"(1) Another program may be editing the same file. If this is the case, be careful not to end up with two different instances of the same file when making changes. Quit, or continue with
2021-03-08 16:44:37
3151
原创 input输入框类型为number时去除右侧箭头按钮
<input type="number"><style> /* Chrome浏览器 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } /* Firefox浏览器 */ input[type="number"]{ -moz-appearance: textfi.
2021-02-24 16:49:27
1382
原创 js检测数据类型方法typeof和Object.prototype.toString.call()对比
exampleObject.prototype.toString.call()typeof‘123456’[object String]string123456[object Number]number(2==3)[object Boolean]boolean{id : “1”}[object Object]objectnull[object Null]object[1,2,3][object Array]objectunde...
2021-02-04 10:51:43
225
原创 vue封装echarts组件
组件<template> <div id="echartsItem" style="width: 100%; height: 400px" :legendData="legendData" :echartsData="echartsData" ></div></template><script>import echarts from "@/utils/echars";expo
2021-02-03 15:21:54
447
原创 数值方法总结
总结数值常用方法let numCase = 1234.56789方法名功能示例Number.isFinite()用来检查一个数值是否为有限的, 如果参数类型不是数值一律返回falseNumber.isFinite(numCase) //trueNumber.isNaN()用来判断参数是否为NaNNumber.isNaN(numCase) //falseNumber.isInteger()用来判断参数是否为整数Number.isInteger(n
2021-02-03 10:37:09
845
原创 props参数修改
对于通过 props 传入的参数，不建议对其进行操作，因为会同时修改父组件里面的数据 ， 如果一定需要有这样的操作，可以这么写let copyData = JSON.parse(JSON.stringify(this.data))
2021-02-02 14:08:32
768
原创 限制文本行数，超出...
如图：超出限制行数显示…单行文本.text { width: 100%; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}多行文本.text { width: 190px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-
2021-02-02 11:16:08
239
原创 echarts.tooltip提示框示例
最近项目用到了echarts,做一下简单总结，主要是提示框tooltip中的formatter用法：主要配置代码：option: { grid: { //图表间距配置 left: "0", right: "10", top: "8%", bottom: "10%", containLabel: true, }, tooltip: { //提示框，可更改样式和所要提示的信息 trigger: "axis", formatter: (params) =&g
2021-02-01 16:00:55
282
原创 列表中数据导出请求
将列表中的数据导出为xlsx工作表…等其他类型原以为是按照正常的接口写法请求，实际大错特错，正确请求如下：window.location.href = axios.defaults.baseURL + “接口” + this.paramToStr(params);1. 配置axios.defaults.baseURL2. localStorage.setItem("token", res.access_token ); //先将要获取的值存一下 3. 参数配置 let cookie
2021-02-01 13:52:22
109
原创 数组方法总结
数组方法功能是否改变原数组concat()合并数组，可以合并一个或多个数组，返回合并数组之后的数据不改变join()使用分隔符，将数组转为字符串，返回字符串不改变toString()直接转为字符串，返回字符串不改变indexOf()返回某个指定元素在数组中首次出现的位置不改变slice()截取指定位置的数组，返回截取的数组不改变splice()向数组中添加或删除/替换数组中的元素，返回被删除/替换的元素改变unshift()...
2021-01-28 14:27:17
193
原创 vue仿移动端京东搜索历史自适应长度超两行折叠功能
1.根据文本自适应宽度2.标签超出两行显示两行3.展开收起箭头按钮永远置于末位，若只有两行则箭头按钮隐藏，若超出两行，将箭头符号置于第二行的末位效果如下图所示：<!-- 分组 --><div class="header" ref="lableGroup" :class="chatMore ? 'chat-group-mask' : 'chat-group'"> <div :class="chatMore ? 'chat-group-con-mask' : 'ch
2021-01-27 13:38:04
1289
2
原创 vue循环遍历出的文本展开收起效果
超出三行只显示三行，第三行末尾处显示展开，点击展开显示全部文本，末尾处显示收起。<div class="chat-item" v-for="(itemson, index1) in item.talkContent" :key="index1"> <!-- 文本 --> <div :class="chooseId == item.talkTechniqueId.toString() + index1 ? 'textName' : textList.includes
2021-01-27 11:38:18
1463
原创 vant-list上拉加载下拉刷新
vant-list官网示例 ，vant-list各参数释义如下：效果如图：<template> <van-list v-if="listData.length > 0" v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad" :of
2021-01-27 10:29:31
2337
原创 vue文件大小
单位换算<div class="size">{{ itemson.fileSize | fileSize}}</div> filters: { fileSize(val) { console.log("val", val); if (!val) return ""; if (val < 102.4) { return val + " B"; } let num = val / 1024;
2021-01-20 13:15:26
807
原创 前端UI框架
使用过的UI框架地址：Elementhttps://element.eleme.cn/基于 Vue 2.0 的桌面端组件库由饿了么公司前端团队开源Ant Designhttps://ant.design/开箱即用的高质量 React 组件蚂蚁集团体验技术部的一个服务于企业级产品的设计体系IViewhttp://v1.iviewui.com/基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品Vanthttps://vant-contrib.
2021-01-08 14:37:43
121
原创 使用this.$modal.confirm进行二次触发时会出现第二个对话框闪退的问题
iview的警告弹窗使用 iview Modal二次警告弹窗会出现第二个弹窗闪退解决方法：添加延迟this.$Modal.confirm({ title: '删除确认', okText: '是', cancelText: '否', content: '确认删除', onOk: () => { setTimeout(()=>{ this.$Modal.confirm({
2020-12-30 17:33:15
4011
1
原创 数组处理
三元表达式(条件)?'A':'B'条件为true置为A，反之B可用作动态绑定class更改样式:class="(条件)?'类名A':'类名B'"数组处理map方法(数组).map((item, index) =>item)includes方法 判断数组中是否存在某元素，结果为true/false(数组).includes(元素)splice方法 删除指定位置的元素(数组).splice((数组).indexOf(元素),1)Set方法 e.
2020-12-30 14:01:35
79
原创 css添加scoped后的样式无效问题
css添加scoped后会编译出版本号如果在添加scoped的style中更改UI组件库中的组件的样式，可能会导致无效，要将更改的样式写在无scoped的style中
2020-12-28 19:18:19
1549
原创 git常用命令
总结工作中常常使用到的git指令git指令释义git branch查看当前所在分支git branch -a查看本地所有分支git checkout -b xxxxx origin/xxxxx切换至分支xxxxxgit checkout -b NewBranchName新建分支NewBranchNamegit checkout master切换回master分支—未完待续…...
2020-12-21 15:45:35
87
原创 创建react项目
之前搭建reactnative环境node.js、cnpm、npm、yarn都安装好了，所以下面只是查一下版本。安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org安装yarncnpm install -g yarn安装脚手架工具cnpm install -g create-react-app配置好后就运行指令：create-react-app reactdemo /*reactdemo为创建项
2020-09-29 11:48:25
122
原创 windows链接目录
清理C盘大文件，室友告诉了一个好方法：把C盘大文件拷贝到其它盘，然后以管理员身份运行cmd输入指令：mklink /J “创建链接的路径” “对应文件实际路径”例：mklink /J “C:\Users\DELL\AppData\Local\React” “D:\React\React”...
2020-09-25 11:55:42
1020
原创 React native 知识点整理之基础组件和API
基础概念部分基础组件和API Flex布局justifyContent//主轴上对齐方式alignItems//副轴上对齐方式flexDirection//flex布局方向flexWrap//flex换行设置flexGrow//（子元素）放大权重flexShrink//(子元素)缩小权重flexBasis//（子元素）主轴空间配置flex//（子元素）上三者缩写alignSelf//（子元素）单元素对齐方式View组件Text组件fontStyle、fontF
2020-09-20 15:03:50
221
原创 React native 知识点整理之基础概念
基础概念部分RN的起源，开发特点：起源：2015年3月26日，Facebook公司对外正式发布了ReactNative—使用React框架跨平台开发原生移动应用的开源技术框架(ReactNative经常被简称、简写为RN)。开发者可以使用ReactNative高效地开发运行于Android与iOS操作系统的应用程序。它的设计理念是:使用ReactNative开发，既拥有Native的良好人机交互体验，又保留了React框架的开发效率。特点：1.一次学习，随处编写2.混合开发 3.高效
2020-09-20 11:22:48
413
原创 在uniapp和vue中控制卡片切换
在uniapp和vue中控制卡片切换提示：以下分两步介绍；动态绑定class，数据双向绑定卡片结构一、动态绑定class，数据双向绑定template代码如下：<view @tap="change(0)" :class="{active:btnnum == 0}" class="title-item">已发布</view><view @tap="change(1)" :class="{active:btnnum == 1}"class="title.
2020-09-18 12:03:53
828
css+html京东网页的制作
2019-12-21
待办事项列表todoList程序
2019-12-21
记事本.zip
2019-06-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人