- 博客(202)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 el-upload 文件上传
<div class="upload-active"> <el-upload name="file" accept=".docx" action="/api/file" ref="uploadref" :multiple="false" :auto-upload="true" :show-file-lis
2021-07-23 17:58:28
3746
原创 vue element 中 select 和 button 的回车事件
按回车时隐藏 element 中 el-select的下拉框<el-select ref="selectref" v-model="reportType" placeholder="请选择" @visible-change="visibleType"> <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
2021-07-22 19:48:23
3948
2
原创 element中navMenu结合路由使用
路由使用NavMenu做为导航菜单，实现的不好会出现点击菜单跳转到新页面的情况。如果想要实现本页跳转，菜单导航页的路由要作为其它菜单页的父路由。现有菜单导航页：home.vue，图表页：echart.vue。如菜单导航页的路由为/home，要想实现本页面路由跳转，则图表页的路由为/echart是不可以的，路由应为/index/echart，必须是菜单导航页的字路由。import Vue from 'vue'import VueRouter from 'vue-router'import Home
2021-07-13 10:36:06
3857
1
原创 vue移动端项目使用自定义字体
手机只会显示系统自带的默认字体，如果要展示特殊字体只能引入字体包，但是引入的字体包如果是中文汉字类（比如楷体、黑体等）加载速度会很慢，因为毕竟汉字有很多。使用自定义字体引入所需的字体报，可以到git上找需要的字体包，但是貌似不是那么好找～～。新建一个css文件，在里面引入所需的字体包（src），然后定义好该字体的名字（font-family）。@font-face { font-family: 'Arial'; /*这里是说明调用来的字体名字*/ src: url('./Arial
2021-06-29 19:13:56
1302
原创 移动端echarts点击全屏按钮横屏全屏展示
在遮罩层显示全屏图表<div class="fullScreen"> <van-overlay lock-scroll :show="isFull" @click="isFull=false"> <div class="wrapper"> <!-- 图表 --> <div :class="[ isFull ? 'rotate':''] "
2021-06-20 17:03:57
4464
7
原创 往gitpush已经搭建起来的项目
进入自己已经写好的项目根目录，在终端窗口打开；git statusgit add .git commit -m ‘init’git push要使用下面的方式提交git remote add origin git@git.zenki.cn:fe/hz-macrostudy-app.gitgit push -u origin master
2021-06-11 15:56:46
482
原创 git clone报错 emote: http basic: access denied
git clone 的时候报错$ git clone xxxxxxxxxxxxxCloning into 'xxxxxxxxxxxxxxxxxx'remote: HTTP Basic: Access deniedfatal: Authentication failed for ...可能之前输入错误的gitlab用户名和密码（或者更换了密码），第二次clone不弹框提示输入用户名和密码的解决方案。执行：git config --system --unset credential.help
2021-06-09 14:02:51
766
原创 windows安装node及环境配置
一、下载node官网然后一路“next”，完成安装。（中途的安装路径可以修改一下）二、环境配置我的node安装目录是D:\node，下面的安装目录都是以此为准。在 高级系统设置 -> 环境变量 -> 系统变量，新建NODE_PATH，值为你node安装的时候的目录地址。在系统变量，修改Path，在末尾输入 ;%NODE_PATH% 即可环境变量配置完成，检测是否安装成功node -vv14.17.0npm -v 6.14.13如果还显示 不是内部或外部命令，
2021-06-08 16:58:40
2931
1
原创 移动端点击触发tab标签页滚动事件
<van-tabs v-model="active" scrollspy sticky :ellipsis="false" @scroll="activechange" ref="tabs"> <van-tab title="aaa"> // Grid是自定义组件
2021-06-06 15:20:24
1523
原创 el-table拆分单元格
el-table的官方文档给出了合并单元格的方法，本以为拆分和合并是一样的，但是tableData遍历出一条数据在表格中就添加一行，而现在是要根据这一条数据里面的数据把这一行拆分称两行或多行，这样貌似是行不通的。然后我看别的写的相关文章，就是给要拆分的单元格里面写一个表格，然后添加CSS样式，让表格看起来是被拆分的效果。<el-table border isIndex :tableColumn="tableColumn" :tableData="tableData"> <templat
2021-04-27 15:50:35
8660
4
原创 js按位移动操作符
计算机表达数值是一个固定长度的二进制串，一般的计算机位32位或64位，这个固定位数的最高位表示符号位，为1表示负数，为0表示正数。‘<<’ 左移向左移动对应的位数，向左移出的位被丢弃，右侧用零补齐。例如：9 << 2 ，得到36 9 (base 10): 00000000000000000000000000001001 (base 2) --------------------------------9 << 2
2021-04-27 12:07:57
226
原创 js处理对象&数组
后端返回对象数组，前端处理返回新的对象数组 // event.data为后端返回的对象数组 this.uploadingFileList = JSON.parse(event.data); let arr = []; this.uploadingFileList.map(item => { var param = {}; param.Filename = item.Filename; param.Totalsize = rates(i.
2021-04-26 11:10:52
202
原创 使用axios的cancelToken实现文件上传中途取消
首先文件上传可以使用el-upload组建，但它的底层使用的封装的ajax来实现文件上传，官方介绍里面说 abort()方法可以取消上传，但是我没有实现出来????????????，欢迎实现的大佬分享出来。然后文件上传也可以用input的file属性来实现，我这里就用的这个方法。取消的实现是利用来axios已经封装好的cancelToken来中断一个正在发送的请求。<div> <input class="file" name="file" type="file" m
2021-04-24 14:43:36
1902
原创 webSocket连接
created(){ this.ws();}, methods:{ ws(){ // WebSocket if ("WebSocket" in window) { //协议以及主机名的处理 const {host, protocol } = window.location; const pr.
2021-04-24 14:17:57
402
原创 promise
Promise是为了解决异步请求而提出的处理方案。promise共有三个状态：pending（请求中）、fulfilled（已成功）、rejected（已失败）。成功会进入.then()，失败会进入.catch()。promise的状态只能从pending变为fulfilled或者从pending变为rejected，只会发生这两种状态改变，一旦状态改变就不再会变化。...
2021-04-24 14:01:47
86
原创 el-upload上传文件，显示上传进度
el-upload上传文件，显示进度条deviceFile.vue<el-upload class="upload-demo" ref="upload" action="donothing" :http-request="fileUpload" :multiple="true" :show-file-list="false" :file-list="fileList"> <el-button
2021-04-24 13:11:50
10461
原创 vue表格增删改查
记录一次特别的坑的传参这两处拿到的scope不一样第一处拿到的scoped是正常的每行的数据，但是第二处拿到的scoped是最后一行的数据，不知道为什么。。。。。
2021-04-19 10:32:45
193
原创 date转换
标准的new Date()的格式为：new Date(year, month, day, hours, minutes, seconds, milliseconds)，new Date(yyyy-mm-dd hh:mm:ss)等格式存在兼容问题。export function stringToDate(str) { // 字符串必需符合以下规则： // 按照年月日时分秒顺序； // 至少需指定到日，日与时之间需要加空格； // 连接符只能是一个字符，只有日的或者最后一个的连接符可以省略。
2021-04-13 10:34:22
336
原创 a标签的download属性实现静态文件或图片下载
前端使用a标签的download属性实现静态文件或图片下载需要知道的是，如果下载的是浏览器不能识别的（例如：.exe,.zip,.doc等）内容，浏览器会直接进行下载，但是如果下载的是浏览器可以识别的（例如：.png,.jpg等）内容，浏览器不会进行下载，而是进行打开预览。下载内容为不能识别1.1 直接使用download属性，属性值为下载文件的名字。<a href="./企业综合信息系统插件的副本.zip" download="xxx.zip" >压缩包下载</a>&
2021-04-06 16:29:45
5392
2
转载 this.$nextTick()
this.nextTick(callback)，当数据发生变化，更新后执行回调。this.$nextTick(callback)，当dom发生变化，更新后执行的回调。在以下两个情况下需要用到Vue.nextTick()Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的
2021-03-01 15:01:25
305
原创 ref的使用
vue 提供的一个操作dom的属性ref,用起来和ID类似，通过this.$ref来调用常见的用法<div ref="test" @click="test">ref 测试</div>mounted(){ console.log(this.$refs.test); },当ref所在的dom元素是一个组建时子组建<template> <div>组建</div></template>
2021-03-01 11:55:52
1036
原创 vue内使用 cytoscape（数据可视化）
vue内使用 cytoscape官网（https://js.cytoscape.org/）官网全是英文，不太友好，哈哈哈，翻译过来也是乱七八糟…cytoscape能够进行图形分析和可视化，轻松显示和操作交互式图形，允许用户与图形进行交互。cytoscape是用于可视化网络数据的强大工具。点（node)和线(edge)是网络图中的两大核心要素，我们做各种各样的网络图，归根结底是对点和线进行注释，通过改变点和线的样式来赋予点和线不同的意义，从而实现数据的可视化。安装cytoscapenpm i
2021-02-22 16:26:58
2339
原创 flex弹性盒实现头部固定
<template> <div class="homePage"> //头部固定 <div class="myHead"></div> //主体部分滚动 <div class="homeMain"></div> </div></template><style> .homePage{ height: 100%; display: flex; flex-
2021-02-20 18:12:49
962
原创 SVG矢量图中矢量路径的获取
矢量图中矢量路径的获取首先下载一张svg图片，例如，在阿里矢量图标库中下载用代码编辑器打开下载的图片将标签中的d属性复制出来，写成下面的格式这样就可以拿到矢量图中的路径了！SVG矢量图是无损的，是矢量图，图片是由直线以和曲线以及绘制他们的方法组成，当你放大一个SVG图片的时候你看到的还是线和曲线，而不会出现线素点。这意味着，SVG在放大时，不会是真，所以特别适合用来做企业logo等。...
2021-02-19 18:06:30
6369
3
原创 初识 dataURI
第一次看见dataURI是在ECharts官网中。我刚开始以为是URL，后来去搜索了一番，才知道了什么是dataURI。先区分一下URL和URI：URI = Uniform Resource Identifier 统一资源标志符，用来标识抽象或物理资源的一个紧凑字符串。URL = Uniform Resource Locator 统一资源定位符，一种定位资源的主要访问机制的字符串，一个标准的。URN = Universal Resource Name 统一资源名称，通过特定命名空间中的唯一名称或
2021-02-19 17:22:47
741
原创 在ECharts中加入数据区域缩放组建（dataZoom）
在ECharts中加入数据区域缩放组建（dataZoom）查看官网在图表中加入交互组件dataZoom组建是对数轴进行【数据窗口缩放】【数据窗口平移】操作。可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。dataZoom 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。dataZoom 的数据窗口范围的设置，目前支持两种形式：百分比形式：参见 dataZoom.st
2021-02-18 18:22:35
4497
4
原创 ECharts封装
ECharts封装子组建<template> <div class="graphLeft" id="graphLeft" style="flex: 1;height: 300px;" ></div> <div class="graphRight" id="graphRight" style="flex: 1;height: 300
2021-02-18 17:48:18
543
原创 上传项目到GitHub仓库
上传项目到GitHub仓库在GitHub新建一个仓库，创建完成如下面在本地新建一个文件夹，然后在终端打开，先初始化git init如果你的项目还没有开始，那么你就可以在新建的这个文件夹下面开始你的项目了。如果你的项目已经搭建好了，那么你只需要把你项目目录下的文件复制粘贴到这个新建的文件夹下面。然后查看工作区的状态，发现你刚粘贴进去的文件都在工作区。git status然后提交到暂存区git add . //提交以上所有文件 git add app.js /
2021-02-18 15:26:22
122
转载 git操作代码丢失
git操作代码丢失执行命令git reflog执行命令git reset --hard HEAD@{1} //需要恢复几就写几
2021-02-16 20:13:07
225
原创 PNG转ICO-在线转换
在线工具：PNG转ICO-在线转换图表文件https://www.aconvert.com/cn/icon/png-to-ico/
2021-02-10 11:20:06
3616
原创 vue element-ui tab标签页默认样式的修改
vue element-ui tab标签页默认样式的修改默认蓝色改为桔红色新加一个style 不要使用scoped。注意要在标签外的父标签起class名，例如我的class名：.homeMain。<style>.homeMain .el-tabs__nav-wrap::after { height: 1px;}.homeMain .el-tabs__item { height: 50px; font-size: 16px; font-family
2021-02-10 11:13:57
8684
1
原创 vue 回车事件
vue 路由监听首页<template> <div class="index"> <input class="inp" v-model="input" placeholder="请输入" @keyup.enter="getCompanySearchList"> <el-button class="searc
2021-02-09 15:47:11
2821
原创 vue动态绑定class属性
<div :class="{color:scope.row.state == null || scope.row.state.toLowerCase() === 'error'}">{{scope.row.state}}</div> .color { color: #ea5151e8;}
2021-01-21 18:23:18
1239
原创 vue中使用代码编辑器monaco-edito
摩纳哥编辑器安装npm install monaco-edito子组建<template><!-- 摩纳哥编辑器子组建 --> <div class="the-code-editor-container" ref="container"></div></template><script>import * as monaco from "monaco-editor";export default { nam
2021-01-20 18:51:54
1346
原创 element之v-loading以及颜色修改
点击element-loading当你已经发送了请求，但是数据还没有请求回来的时候，呈现一个数据正在加载的状态，可以通过v-loading指令来展示加载状态。只需要把v-loading的值绑定为true或false即可。<el-table v-loading="loading" :data="tableData" > <el-table-column type="index" :index="indexMethod"></el-table-column>
2021-01-13 11:04:00
16329
原创 Object.values()
json数据{ "statusCode": 200, "statusDetail": "success", "content": { "ps-xxxsss": { "name": "xxxsss", "nspace": "ps", "tarClus": "xxx" }, "ps-dbsss": { "name": "ydbsss", "nspace": "ps", "tarClus": "db" } }}需求：把name，nspace，ta
2021-01-10 21:48:49
2004
原创 filter过滤
过滤器是根据过滤条件，留下符合条件的totalData() { // this.tableData是后端返回的一个对象数组 const tableData = this.tableData; // searchKey是搜索框输入的关键字 const searchKey = this.searchKey.toLowerCase().trim() return tableData.filter((item) => { //搜索框
2021-01-05 10:03:06
216
原创 json代码高亮显示插件vue-json-pretty
vue-json-pretty的用法vue-json-pretty是用来格式化展示json数据的GitHub ： vue-json-pretty的详细用法用法npm下载npm install vue-json-pretty --save引入import VueJsonPretty from 'vue-json-pretty';import 'vue-json-pretty/lib/styles.css';注册组建export default { components
2021-01-03 22:46:35
9996
2
原创 highlight的用法
在vue中的用法安装 ：npm install highlight.js在vue中注册插件Vue.use(hljs.vuePlugin);使用<div id="app"> <!-- bind to a data property named `code` --> <highlightjs autodetect :code="code" /> </div> export default { data (
2020-12-30 10:01:45
3035
3
bootstrap.zip
2020-06-30
HTML CSS JS的作用.zip
2020-06-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人