- 博客(36)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 较全面的面试题
前言本文针对目前常见的面试题，仅提供了相应的核心原理及思路，部分边界细节未处理，希望对你有所帮助。1.Vuex有五个核心概念：state, getters, mutations, actions, modules。 1. state：vuex的基本数据，用来存储变量 2. geeter：从基本数据(state)派生的数据，相当于state的计算属性 3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型.
2020-08-26 21:04:13
120
原创 el-cascader动态加载选择时兼容checkStrictly属性并存时的一个空白面板的问题
解决懒加载与checkStrictly并存问题
2022-12-29 16:22:59
847
1
原创 node脚本使excel转json
1.创建一个空文件夹，在当前目录下打开控制台，执行npm init命令自动生成package.json执行npm install xls-to-json.新建index.jsnode_xj = require("xls-to-json");node_xj({ input: "xls/test.xlsx", // input xls output: "beijing.json", // output json// sheet: "sheet" // specific sheetn.
2022-05-12 11:03:30
702
转载 CSS 实现字体发光效果 text-shadow
一、CSS字体发光效果：CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果1、text-shadow：该属性为文本添加阴影效果。text-shadow: h-shadow v-shadow blur color;2、参数：参数名称说明h-shadow水平阴影的位置（阴影水平偏移量），可为负值，必需v-shadow垂直阴影的位置（阴影垂直偏移量），可为负值，必需blur阴影模糊的距离（默认为0），可选color阴影颜色（
2022-03-25 17:26:07
21247
原创 简单的深拷贝
利用 JSON 方法先转化成 string 再转换为对象const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
2022-03-09 10:45:21
519
原创 实现一个柱状图（不是echarts统计图）
在开发过程中，我们会要求写一个百分比柱状图，简单一点就是两个矩形拼在一起，只有长和高，但如果具有用户体验，那就得用画一个圆柱体，下面我们就是我们的简单实现逻辑，主要是通过CSS样式。先看代码，实际效果图在最后。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css实现圆柱体</title> <style&.
2021-12-21 09:13:00
336
3
原创 vue通过 Ctrl 点击鼠标实现 div 多选操作
针对前端部分，有一个div的列表，想通过按住Ctrl键后点击div实现多选的功能大体思路如下：1 通过拦截控制ctrl的键盘code值，2 在div上添加一个点击事件，将div设置成一个选中的样式，当然，在点击事件里面得判断一下，判断键盘是不是被按下了，没有按下的话，不做任何处理具体代码如下：1 首先先定义变量data() { return { data:[], //数据源列表 isCtrl: false, // 快捷键 ctrl 是否被按下
2021-11-16 14:35:23
2962
原创 js简单代码（1）
数组去重可以使用 JavaScript 中的Set轻松删除重复项const removeDuplicates = (arr) => [...new Set(arr)]; console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));从 URL 获取查询参数Object.fromEntries(new URLSearchParams(window.location.search))回到顶部可以使用 window.scrol
2021-11-01 09:55:14
90
原创 解决element分页激活后，页码没有发生变化（失效）的问题
当我们使用element分页时，如果只给了total时，我们就会引用如下代码： <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>给了总数会自动计算出页码数，但实际上，比如你点击了第二页，页码还是在第一页的情况.解决办法this.$nextTick(() =>{ this.$refs.pagination.internalCurrentPage=1;
2021-10-09 09:26:35
2086
原创 检查日期是否合法
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf()); isDateValid("December 17, 1995 03:24:00");// Result: true
2021-09-30 08:29:00
111
原创 2021-09-23
开发webGIS项目时，首先就要初始化一个地图，我们以使用mapbox举例<!DOCTYPE html><html><head><meta charset='utf-8' /><title>显示一个地图</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><script src=
2021-09-23 10:00:07
56
原创 解决element组件数据无法二次渲染的问题
当你使用elementUI组件后，如果使用接口传参赋值，第一次可以正常渲染数据，但是当第二次重复操作时，数据是正常的，在页面却没有正常显示。我们拿Cascader 级联选择器为例，解决办法是强制使用 v-if 进行重新加载渲染。 <el-cascader v-if="cascaderFlag"></el-cascader> this.cascaderFlag = false this.$nextTick(() => { this..
2021-08-27 10:14:14
1833
3
原创 实现定位居中对齐
直接上代码<div class='a'></div> <div class='b'></div> .a{ height: 100%; width: 100%; border:1px solid black position: relative;}.b{ position: absolute; width: 100%; left: 0; right: 0; background-c
2021-08-23 18:43:38
280
原创 使用element表单时，数据无法渲染到dom上的问题
当使用element表单时，在已有数据进行二次渲染时，页面上还显示的是上次的数据，排查原因是因为使用了 this.$refs['editForm'].resetFields()把这个代码去掉就可以了
2021-08-04 08:34:42
537
原创 element表格点击某一行改变行背景颜色
表格<el-table:data="data" :row-class-name="tableRowClassName" //设置类 :row-style="selectedstyle" //设置行的样式 @row-click="rowClick" //点击></el-table>data() { return { data:[], getIndex:"", }},methods: { selectedstyle ({r
2021-07-28 09:27:14
1080
原创 手把手教你使用npm发布组件
##准备需要你在npm官网（https://www.npmjs.com/）上注册一个账号，具体可进行百度，并记住你的账号和密码，作为后续使用
2021-06-29 16:12:45
673
1
原创 webpack配置指定文件不打包
引言在打包配置时，会有一些需求是指定某些文件夹下的某些文件指定不打包压缩的，经过学习，webpack的CopyWebpackPlugin可以帮助我们解决整个问题，下面介绍一下制定流程：1.npm安装webpack的插件copy-webpack-plugin（有的在初始化项目可能有安装，可以先在package.json上查看是有copy-webpack-plugin有版本信息。）2 命令cnpm install --save-dev copy-webpack-plugin3 在在项目下新建一
2021-06-22 10:18:34
4492
3
原创 el-cascader v-model设置默认值后，改为其他值再改回来时，绑定数据没有发生变化
el-cascader v-model设置默认值后，改为其他值再改回来时，绑定数据没有发生变化。苦于寻找答案，却没有找到合适的答案，不得已剖析了一下源码，发现原来绑定的值经过多次切换后在切换为原来的绑定值时，由于绑定值没有发生变化，没有刷新dom.所以采用了一个非常暴力的办法，在el-cascader上使用v-if<el-cascader v-if="isSelected" v-model="getInfo" :options="options" @change = "modeChange
2021-06-11 16:56:55
3576
9
转载 重学javascript string对象
String 对象String 对象用于处理文本（字符串）。String 对象创建方法： new String()。String 对象方法|charAt() |返回在指定位置的字符 ||--|--|| | |charAt() 返回在指定位置的字符。charCodeAt() 返回在指定的位置的字符的 Unicode 编码。concat() 连接两个或更多字符串，并返回新的字符串。fromCharCode() 将 Unicode 编码转为字符。indexOf() 返回某个指定
2021-05-25 16:00:48
57
原创 动态计算表格高度
我们在使用表格展示数据时，都遇到过需要监听屏幕窗口的大小，动态计算table的height，达到适配屏幕尺寸的友好界面项目,接下来我给大家呈现一下解决方案，希望能帮助到大家1 在data里声明变量 contentStyleObj: { height: "" }, //动态计算高度2 表单里赋值:style="contentStyleObj"3 在声明周期里调用 方法计算 created() { window.addEventListene.
2021-05-25 15:52:08
651
转载 el-tree未完全勾选子节点，但父节点存在则子节点全部勾选问题
我从后台获取默认勾选的节点（包括父节点和子节点）。子节点未全部勾选，但获取数据中只要存在父节点，则子节点就会被渲染。开始使用如下代码进行渲染，出现了问题。后来改为如下代码，问题就解决了。...
2021-05-14 10:22:07
511
1
原创 画一个饼图
// 画一个饼图转为img drawpie(data) { console.log(data) // data 为数组 例如：[1,2] let that = this let a = data[0] / that.sum(data) let b = data[1] / that.sum(data) // let c = data[2] / that.sum(data) // c...
2021-05-06 12:37:08
73
原创 用id和pid数组实现为树形式的json数据
当后端给你的json数据不是树格式的，不能直接拿数据放在el-tree组件里使用，所以要把id和pid格式的数组转化为树格式的数据不多说，只讲干货，直接上代码function toTree(data) { let result = [] if (!Array.isArray(data)) { return result } data.forEach(item => { delete item.children; }); let map = {}; da.
2021-04-28 09:14:22
494
原创 el-table展开行 +懒加载 实现内部表格嵌套
在开发过程中需要在表格展开行中再嵌套一个表格,当element自带的组件满足不了（外层表格数据和内层表数据由两个接口提供）,需要用类似懒加载的功能实现，所以选择采用展开行 + expand-change事件来实现。实现中遇到的问题通过展开行+ expand-change实现时,遇到一个很大的问题,就是el-table组件在更新数据内部某个属性值时,并不能实时刷新dom视图,这样会导致每次在expand-change事件中获取到内层表格数据后，给父层数据中添加属性时视图并未刷新。解决方法需要.
2021-04-24 11:25:24
3379
7
原创 去掉el-table最外层下边距的白线
当你改变element表格的背景颜色时，最外层的下边距的白线一直还会存在，如何去掉它呢，引入一个css样式进行覆盖即可html <div id="list"> <el-table :data="tableData" height="250" :stripe="true" :row-class-name="tableRowClassName"> <.
2021-04-21 15:26:06
1872
原创 vue web项目控制只能输入一位小数，两位小数和整数的指令
控制只能输入整数，一位小数，两位小数的指令 <el-input placeholder=""v-input-num="2"> </el-input> // v-input-num="2" 两位小数 // v-input-num="1" 一位小数 // v-input-num="0"或 v-input-num 整数Vue.directive("inputNum", { update(el, {value = 0}, vnode) { // 当被绑定的元素插入.
2021-04-21 14:59:03
341
2
原创 双重数组遍历，根据两个数组对象种某一个值相等作为判断条件过滤数组
双重数组遍历，根据两个数组对象种某一个值相等作为判断条件过滤数组 let tableData=[{a:1,b:2,c:3},{a:2,b:3,c:4},{a:3,b:4,c:5},{a:4,b:5,c:6}] let queryList= [{a:1,d:2},{a:3,d:4},{a:5,d:6},{a:7,d:8},] let newArr = tableData.filter(item => { if(queryList.findIndex(iten => i
2021-04-19 09:45:46
1096
2
原创 中级工程师的面试题
最近参加了一些公司的面试，每个公司的面试题目都不一样，但是都离不开 js基础，下面来总结一下最近面试的一些题目，供参考。display哪些属性，作用分别是什么。 display 的属性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-
2020-08-30 18:06:21
1355
原创 2020-08-27
数组去重1，根据某一个属性是否重复var obj = {};arrays = arrays.reduce(function(item, next) { obj[next.id] ? '' : obj[next.id] = true && item.push(next); return item; }, []);将内容输出到浏览器控制台for(var i =0; i<arrays.length; i++){console.log(ar
2020-08-27 08:03:33
102
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人