- 博客(38)
- 资源 (6)
- 收藏
- 关注
原创 vscode输入npm:无法加载文件报红
在运行命令的时候,使用pnpm或者npm出现此错误解决办法点击左下角开始,找到Windows PowerShell,点击右键找到更多,找到以管理员身份运行输入命令:set-ExecutionPolicy RemoteSigned 然后回车选择:输入A选择全是,或者输入Y选择是 都可以的接着重新启动然后去运行就可以了
2023-03-17 11:15:17 672 1
原创 Vue-使用Echarts做一个中国疫情地图demo
安装echarts包后如果包内没有 echarts/map/js/china.js 这个文件夹访问echarts/china包下载引入Vue页面代码如下直接复制,运行项目<template> <div class="hello"> <!-- echarts 初始化 --> <div class="content" ref="mapbox"></div> </div></tem.
2022-02-17 15:48:18 1040
原创 Vue-前端自己导出表格为xlsx 格式
download-mixins.jsvar XLSX = require('xlsx');var FileSaver = require('file-saver');export const downloadMixins = { data: {}, methods: { btn_export(id, fileName) { var table1 = document.querySelector(id); var she.
2022-02-17 15:38:53 530
原创 css 实现菱形
<!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-Compatible" content="ie=edge"> <title>菱
2022-01-25 14:38:45 1103
原创 Echarts 初始化TypeError: Cannot read properties of undefined (reading ‘init‘)
导入echarts时用:import echarts from ‘echarts’ 出现 “Cannot read property ‘init’ of undefined” 报错,改成 import * as echarts from ‘echarts’ 后解决。
2021-12-10 17:12:12 5472 1
原创 Canvas 获取上传视频第一帧图片当封面
安卓-IOS可能存在兼容性问题导致出现截取黑色背景图//截取视频第一帧作为播放前默认图片 findvideocover(obj) { // const videoList = document.querySelectorAll('.videoList') // console.log(videoList); const video = document.getElementById(`upvideo${this.videoList.length - 1}`).
2021-12-10 16:22:30 4003
原创 canvas 实现图片添加水印
1.使用canvas来实现图片添加水印(也包括上传图片后显示水印~)<!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, initia.
2021-12-10 16:10:49 2238
原创 Vue solt插槽子组件像父组件传值
子组件 传递一个id 到父组件在<template> <div class="task-list"> <div class="task-box" v-for="(item, index) in list" :key="index"> <div> {{item.name}} </div> <div class="handleField"> <.
2021-06-30 17:43:51 363
原创 2021-06-15 Element 上传组件获取本地地址
:on-change 事件触发handleChange(file) { console.log(file); console.log('file', URL.createObjectURL(file.raw)); this.image = URL.createObjectURL(file.raw) },
2021-06-15 15:04:44 1118
原创 JS 创建a标签并触发href事件
在此记录一下var a = document.createElement('a'); a.setAttribute('href', href); a.setAttribute('target', '_blank'); a.setAttribute('id', 'startTelMedicine'); // 防止反复添加 if (document.getElementById('startTelMedicine')) {
2021-06-08 16:41:41 1246
原创 Vue 左边菜单跟右边列表进行位置联动 scrollTop
小demo 记录一下 点击左边 右边出现对应的列表内容 滑动右边左边出现对应的索引值左边列表css 时间线 记录一下<template> <div class="el-courtWrap"> <el-row class="el-left"> <div id="time-line"> <div class="item" v-for="(item, index)..
2021-05-14 15:32:07 1788
原创 Vue+Element ui上传图片限制图片尺寸
1.引入element-ui upload组件<el-upload class="avatar-uploader" :headers="myHeaders" :action="上传图片的地址" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar".
2021-05-10 15:52:03 2022 2
原创 Vue Element Cascader 级联选择器 修改页面时候选择的节点回显问题
根据当时修改页面 对Cascader 选择器进行节点的回显遇到的问题所以闲暇整理了一个小demo ,直接上代码里面也都有注释<template> <div> <el-col :span="8"> <el-select v-model="nodeId" placeholder="请选择"> <el-option v-for="item in idOptions" :key="item.id" :label=".
2021-04-22 16:54:56 1221
原创 js处理数组对象把相同的值归类
<!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"> <title>Doc
2021-03-03 23:35:47 1752 2
原创 echats 柱状图的点击事件及高亮
点击柱状图触发事件及双击柱状图高亮<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js.
2021-01-20 16:26:26 4222
原创 Vue v-html显示富文本列表问题
后端返回的数据let obj = {"id":501,"content":"<p><span style=\"color: rgb(34, 34, 34);\"> 读书是一件快乐的事情。对于爱读书的人一但读上就让人欲罢不能,无法放弃读书,想让人读到天涯海角。有人说:“人生最深最平和的快乐,就是静观天地与人生,慢慢品味出它的和谐与美。”静下心来,翻开书本,那些沉积的墨香一点点溢满空间,那些尘封的快乐一点点打开。读书真的很快乐!</span></p><p
2021-01-18 14:49:21 6075
原创 Js date日期格式处理
获取当前时间的周一到周日 function getDates() { var new_Date = new Date() // console.log(new_Date) var timesStamp = new_Date.getTime(); // console.log(timesStamp) var currenDay = new_Date.getDay(); // console.log(cur..
2020-08-26 11:29:59 483
原创 JS取出两个数组的不同或相同元素
1.取出数组中相同的元素getArrEqual(arr1, arr2) { let newArr = []; for (let i = 0; i < arr2.length; i++) { for (let j = 0; j < arr1.length; j++) { if(arr1[j] === arr2[i]){ newArr.push(arr1[j]); } .
2020-05-12 17:49:57 2418
原创 Vue中的$set和Vue.set方法(视图更新)
这里我定义了一个列表数据,我将通过按钮来控制列表数据。调用方法:Vue.set( target, key, value )target:要更改的数据源(可以是对象或者数组)key:要更改的具体数据value :重新赋的值<template> <div id="app" style="padding: 100px"> <el-link type="...
2020-04-21 10:04:28 1669
原创 Vue中 浅谈watch(深度监听)
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: { firs...
2020-04-20 17:03:04 281
原创 Vue常见的几种组件传值方式
组件系统是 Vue.js 其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用。在 Vue.js 应用程序开发过程中常常需要处理组件传值的问题,下面详细列举几种常见的组件传值方法。1. props父组件代码:<template> <child-component title="子组件标题"></child-component&...
2020-04-16 09:32:44 827
原创 前端面试JS总结
原型构造函数是一种特殊的方法,主要用来创建对象和初始化对象。每一个构造函数都要prototype(原型)(箭头函数以及Function.prototype.bind()没有)属性,这个prototype(原型)属性是一个指针,指向一个对象,这个对象的用途是包函特定类型的所以实力共享的属性和方法,即这个原型对象是用来给实例对象共享属性和方法的。每一个实例对象的_proto_都指向这个构造函数/类...
2020-04-02 14:43:26 155
原创 Vue axios Post请求优化处理
加粗样式1.项目中存在得问题在系统管理业务角色管理下分配权限点击保存时报一个网络错误2.问题的原因使用axios的post调用时,用params传递参数,参数会全部加到url中,类似get请求,导致url的请求头数据太长,出现413 FULL head3.解决办法a.安装npm install qs ,在项目文件axios.js中引入(import qs from ‘qs’),将对象...
2020-04-01 14:16:55 1003
原创 iview中tabs得自动切换问题
最近在项目中遇到一个问题就是如何根据我左边得tree点击选取得节点,对tabs选项卡进行权限得控制,满足就可以点击不满足为disabled,如下图当我点击得时候发现通过左边点击控制右边得禁用得时候,发现tabs自带得disabled默认初始和点击左边让tabs某一个禁用得时候并没有用,于是我就在想让带tabs自动切换,根据左边得tree,tabs自动切换到满足得条件就可以了,这样disabl...
2020-04-01 13:17:32 1567
原创 前端打开一个新得窗口,保持原来的页面不刷新
最近接到一个新得需求需要做大屏显示,技术上用的Vue,需要打开一个新得窗口并且保存原来跳转的页面不刷新废话不说直接上代码// 首先做一个点击事件 然后点击的时候加上以下代码showFull() { let newpage = this.$router.resolve({ name: 'hrscreen', }) wind...
2020-03-26 14:40:21 4806
原创 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"
<!----><template> <div style="width: 95%;height: 82%;position: absolute"> <div id="checkOnWork" ref="checkOnWork" style="width: 100%;height: 100%;background: white"><...
2020-01-06 09:48:12 1840
原创 JS ES6 数组得一些处理方法归类
find()数组实例的find方法,用于找出第一个符合条件的数组成员<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=1, initial-scale=1.0"> <m...
2020-01-03 09:45:51 1147 4
原创 JS 将一个数组对象里面每个具有相同的字段筛选出来组成一个新数组
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><script>var college = [ [{firstName:'赵'}, {la...
2020-01-02 11:00:39 12967 1
原创 HTML 中的input框对键盘得操作
1. H5禁止手机自带键盘弹出// vue得写法<input type="text" @focus="onChange" ref="test">methods:{ onChange() { this.$refs.test.blur(); },}2. H5直接调用手机的数字键盘<input placeholder="输入数字" t...
2019-12-30 09:52:51 1720 1
原创 H5 CSS-pointer-events 给自己的网站加一个水印
<!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-U...
2019-12-26 14:02:44 247
原创 js 在前端实际开发中,进行前端计算及社保公积金核算会出现丢失精度的问题,项目中需要对金钱进行运算
今天因为项目需要做社保公积金缴纳金额得核算,所以在前端计算需要十分精确并且需要对所得计算金额进行一些计算规则的处理(四舍五入到角,见分进角,全舍到角…),因此引用了bigDecimal工具来实现bigDecimal: Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算 需要的可以自行百度下面直接上代码-----<!doctype...
2019-12-11 16:23:20 568
原创 js 实现div拖拽
直接上代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> .box { position: absolute; width: 200px; heigh...
2019-12-10 15:19:22 198
原创 js 仿QQ超出部分自动滚动
HTML:<div class="mainRight_F_Main" ref="chatScroll"></div>// class 要设置 overflow-y: auto;// 设置ref 用来操作DOM属性js://滚动到底 chatScrollTop() { setTimeout(() => { //...
2019-12-10 14:58:56 287
原创 js 实际应用中如何将后台返回字符串中的URL链接与文字进行提取拼接组合,文字做展示,URL做跳转
首先第一步js用正则表达式获取字符串中URL链接 let str = '亲,为您找到车次信息 a(http://touch.qunar.com/trainDetail.jsp?searchType=number&startstation=&endstation=&number=1111 )[请点击查看...]'//function httpString(s...
2019-11-28 14:29:09 1321 1
原创 js如何将变量作为一个对象的Key
var lastWord = 'last word';var a = { 'first word': 'hello', [lastWord]: 'world'};a['first word'] // "hello"a[lastWord] // "world"a['last word'] // "world"
2019-11-28 09:52:36 1962
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人