- 博客(115)
- 收藏
- 关注
RSS订阅
原创 用vue-cli+Electron开发一个跨平台的桌面应用____篇一（搭建vue项目、安装electron）
## 1. 安装vue-cli3（这里使用的是yarn，进行这一步的前提是安装好node和yarn）yarn global add @vue/clivue --version （此命令意在查看vue的版本，可确认是否安装成功，）## 2. 创建vue项目vue create vue-electron-demo （vue-electron-demo是你要创建的项目名称）## 2....
2019-10-31 22:44:52
15086
12
原创 css实现圆角渐变边框
用css实现圆角渐变边框，每种方式都有其特点和适用场景。可以根据具体需求和浏览器兼容性选择合适的实现方式。若仅需实现渐变边框，则用border-image即可。
2024-08-01 00:00:45
1779
原创 这是一篇随笔与回想，也关于【创作初心】，也关于【重新定义自己】
另外，关于评论区，我很抱歉，之前的自己有一些逃避和不愿参与（还有是自己也实在懒 😂），之后我会尽量去回复一些评论，但我并不觉得自己能解决评论者的问题，其一是编程确实是一个复杂的环境，问题总有多面，具体问题还是需要结合具体情况分析才能得解，其二是，自己能力确实有限，我的文章能提供的仅是和我遇到类似甚至是相同问题的朋友（本人也很惭愧 😄），望各位大佬多点拨、指教，求带（当然更求内推哈哈哈 😄）😄。我希望重新定义自己的写作方向和方式，这次，我想分享更多关于成长、解决问题的过程，并探索新的写作风格和主题。
2024-07-30 22:04:59
923
原创 vue中，Vue.extend的实际运用 （运用Vue.extend自己封装一个类似Element的MessageBox的组件）
**需求：**将原项目中所有用Element的Message 消息提示组件的地方，改为如下样式：message消息提示：demo见：demo地址
2021-11-28 12:45:43
5435
3
原创 在线预览csv文件
一、 所需插件在index.html中引入 heiho.js<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kktsvetkov/heiho@latest/heiho.css"/><script src="https://cdn.jsdelivr.net/gh/kktsvetkov/heiho@latest/heiho.js"></script>安装papaparse, jschardet
2021-04-02 09:32:54
4895
原创 vue2项目，用dart-sass替换node-sass报错
一、原项目package.json的sass信息部分: "node-sass": "^4.12.0", "sass-loader": "^8.0.2",二、用dart-sass替换node-sass移除原项目的node-sass模块，并用dart-sass替代；命令如下：yarn remove node-sass yarn add sass-loader sass -D 此时的package.json关于sass的信息 如下： "sass": "^1.32.8", "sass-lo
2021-04-01 09:03:40
4237
原创 手写Promise (自定义Promise) —— Promise从入门到自定义笔记
test.html<!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-03-12 09:10:45
428
原创 vue中，使用videojs 播放m3u8格式的视频
文章目录一、安装二、引入videojs三、在组件中测试并使用1. `实现基本的自动播放`2. `实现换台`四、踩坑小记1. 视频不能自动播放 或报错 `DOMException: play() failed`2. 换台的时候，url已经成功更改，但视频还是之前的五、 播放rtmp流一、安装yarn add video.jsyarn add videojs-contrib-hls // 这是播放hls流需要的插件二、引入videojs在src文件夹下新建 plugins文件夹，并新建video
2021-01-29 10:40:02
3025
5
原创 vue项目中，下载pdfjs压缩包,将pfdjs作为静态资源的方式使用pdfjs
一、详细步骤 * 1. 到github上下载pdfjs的压缩包，减压后将其放于项目的根目录下的static下（或者放在public文件夹下的static下） * 下载地址：https://github.com/mozilla/pdf.js/releases/tag/v2.5.207 * * 2. 安装 copy-webpack-plugin 插件； * 安装命令：yarn add copy-webpack-plugin -D * 3. 在vue.config.js中添加如下代码：
2021-01-28 09:34:21
1400
原创 获取两个时间字符串相差的秒数
这里说的时间字符串格式是："2021-01-15T14:44:40.001+08:00" 或者 "2021-01-15 14:44:40" 一、原生js function diffSecond(start, end) { const startTime = new Date(start); const endTime = new Date(end); const second_time = Math.abs(startTime - endTime) / 1000; // 得到相差的秒数
2021-01-25 10:16:27
1342
原创 vue展示json数据，vue-json-viewer的使用
一、安装 yarn add vue-json-viewer二、引入项目src目录下plugins下的jsonViewer.js文件import Vue from "vue";import JsonViewer from "vue-json-viewer";Vue.use(JsonViewer);在 main.js文件 中引入import "./plugins/jsonViewer.js";三、在组件中使用test.vue文件<template> <div c
2021-01-19 09:30:05
4371
2
原创 vue项目，npm install方式使用pdfjs
文章目录一、安装插件二、在组件中测试是否引入成功三、踩坑合集1. 需手动设置workerSrc一、安装插件yarn add pdfjs-dist二、在组件中测试是否引入成功const PDFJS = require("pdfjs-dist");console.log("成功：",PDFJS )打印结果：三、踩坑合集1. 需手动设置workerSrc报错信息如下： Uncaught SyntaxError: Unexpected token '<' "Cannot rea
2020-12-23 09:08:08
4631
3
原创 在vue+element项目中，使用antd的图标
文章目录一、安装 ant-design-vue ，并引入其Icon组件1. 在项目中安装antd-design-vue2. 按需加载 ，引入并注册它的Icon组件二、封装 AntdIcons.vue四、使用刚刚封装的 AntdIcons.vue嗯，项目开发到后期，甲方提了一个需求，说要一个文章末尾那样子的图标选择器（要求图标基本与它一致），哇哦，这边让项目基于vue+element开发，甲方后来提的icon的需求确实基于ant,也只好将其集成进项目咯。值得注意的是，这里最好是将antd的组件按需引入，样式
2020-12-04 09:14:34
4134
3
原创 记一个神k，请求地址中加了一堆字符（%E2%80%8B）
一、解决办法把你的接口地址重新敲一遍二、唠嗑唠嗑%E2%80%8B 这兄弟有一个艺名，Zero-width space，简称 ZWSP，中文名 零宽空格；学习之路任重而道远啊。这是我复制的
2020-11-19 09:03:47
3178
原创 获取3个月前的日期（年月日）
方法一：获取过去的那个时间的标准日期格式，来确定年月日注意： new Date(yy,mm-4,dd); ，是为了得到过去时间的标准日期格式。这里得到的mm,即月份加了1，故这里是mm-4 而不是-3 哈。 function getThreeMonthDate(){ let currDate=new Date().toLocaleDateString();// 2020/11/6 let arrs=currDate.split('/'); let yy=parseInt(
2020-11-15 15:09:43
2483
1
原创 vue如何自定义指令？
自定义获取元素焦点的指令，v-focus一、局部注册的写法需求：当页面加载时，该元素将获得焦点；第一种，通过input的自带autofocus属性实现（autofocus在移动版Safari上不工作）第二种 利用自定义指令实现<template> <div class="test-directives"> <input v-focus /> </div></template><script>expo
2020-11-09 18:32:12
297
原创 根据不同的页面情况，渲染按钮样式
小tip：当网页中有多种情况的操作按钮，这些按钮的功能和样式相同，但每个页面的所需的功能不同，且后续对按钮功能可能还会有相应的更改，故做了这样的封装。一、封装OperateBtn.vue<template> <el-button v-for="btn in btns" :key="btn.value" @click="handleClickBtn(btn.value)" :type="btn.type" :icon
2020-10-30 09:18:46
574
原创 阿里图标库iconfont，svg图标的symbol引用，结合svg-sprite-loader 使用 （优雅的使用svg）
svg-sprite-loader 的作用： 将加载的 svg 图片拼接成 雪碧图，放到页面中，其它地方通 复用一、安装 svg-sprite-loaderyarn add svg-sprite-loader -D二、配置webpackvue.config.js文件yarn add svg-sprite-loader -D
2020-10-29 09:10:43
1262
原创 用import 图片的方式使用svg, 导入svg图，封装SvgIcon组件
一、封装SvgIcon组件SvgIcon.vue文件<template> <div> <img v-if="svg" :src="svg" :class="cssModuleA.noSelect" height="24px" /> </div></template><style module="cssModuleA">/* CSS Modules： */.noSelect { user-select:
2020-10-19 18:32:01
2786
原创 fill:currentColor是什么意思？iconfont为何要设置 vertical-align: -0.15em？
在css中，currentColor是一个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父元素继承而来。.svg-icon { /*将icon大小设置和字体大小一致 */ width: 1em; height: 1em; vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效
2020-10-16 09:00:40
12008
2
原创 css Module （＜style module＞，$style.red的写法代表什么？）
一、css Module 简单写法<style module>* 这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。可在模板中通过一个动态类绑定来使用它，因为 $style 是一个计算属性，所以它也支持绑定class的 :class 对象/数组语法：<template> <div> <p :class="$style.red">我是一段文字&
2020-10-13 09:10:58
2952
原创 vue中，解决chrome下，的warning, Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event 问题
一、警告信息如下：vue+element项目中，解决chrome下的passive警告问题element-ui.common.js?5c96:9972 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://ww
2020-10-10 09:08:17
11178
8
原创 element的Dialog的二次封装
公共的<template> <div> <el-dialog class="comn_dialog" :title="dialogTitle" :visible.sync="visible" width="415px" top="23vh" > <slot> <p>弹窗内容</p> </slot>
2020-09-30 09:20:33
3822
1
原创 element的分页组件pagination的二次封装
<template> <div :class="{ hidden: hidden }" class="pagination-container" > <span class="refresh_icon el-icon-fa-refresh" title="刷新" @click="handleRefreshTable" ></span> <el-pagi
2020-09-27 09:12:51
1164
2
原创 数组去重，对象数组取重
一、数组去重 function unique(arr){ return Array.from(new Set(arr)); }你也可以这样写: function unique(arr){ return [...new Set(arr)]; }
2020-09-26 11:23:55
400
原创 对element的Tree组件二次封装(含右键菜单)
<template> <div class="tree-container"> <el-tree class="_tree" :data="treeList" :props="defaultProps" @node-expand="handleNodeExpand" :lazy="true" @node-click="handleNodeClick" @node-contextmen
2020-09-23 18:46:19
1968
原创 element的Form组件简单的二次封装
<template> <div class="serachform-conatiner"> <el-form :model="queryForm" :inline="true" ref="queryForm" label-width="80px" class="query-form" > <slot> <el-form-item label="编码
2020-09-21 18:04:59
3415
原创 动态路由中，有一步需将后端传回的component 的字符串模式，改为我们前端路由需要的component模式,报错Cannot find module
动态路由中，有一步需将后端传回的component 的字符串模式，改为我们前端路由需要的component模式一、import写法 报错动态路由 Cannot find module '@/views/Home.vue'function loadPageByRoutes(str) { // 传入的str为 '@/views/Home.vue' 这种格式 return () => import(`${str}`);// 要报错 }二、改为require写法,并返回一个resolve
2020-09-17 10:06:40
2466
原创 利用vscode的LOC插件，统计代码行数
在vscode中安装LOC插件安装了，按 Ctrl+Shift+p ，再输入命令 LineCount 就可以了此时会在你的项目下生成一个out文件夹，文件夹下有两个文件，里面记载了你代码行数等相关的的详细信息以上操作是按默认设置统计 ，也可以在vscode的 setting.json 文件中，新增它的配置信息，详细配置，参考 **LOC**插件 的文档。...
2020-09-11 19:35:24
2562
原创 将数组的转为 key为键，name为值 的数据格式传给后端
//修改排序号时，id为键，sequence为值 ,的数据格式传给后端 mounted() { let arrs = [ { key: "A", name: "答案A" }, { key: "B", name: "答案B" }, { key: "C", name: "答案C" } ]; console.log(this.convertData(this.arrs));// [{A: "答案A", B: "答案B", C: "答案C"}] }
2020-09-01 18:22:03
661
原创 vue中，mavon-editor的引入和使用
安装 mavon-editor npm install mavon-editor --save 一、vue中，按照官网，全局注册mavonEditor报错参考mavonEditor的github地址给出的全局注册 use 示例，报错：Unknown custom element: <mavon-editor> - did you register the component correctly?mavonEditor.jsimport Vue from "vue";import
2020-08-31 19:29:20
6214
3
原创 传入中文，返回英文操作名
function getName(name){ let map = new Map([ ["添加", "add"], ["修改", "update"], ["删除", "delete"], ["移动", "move"], ["启用", "enable"], ["禁用", "disable"], ["保存排序号", "saveNum"] ]); return map.get(name
2020-08-30 22:14:28
190
原创 将树形结构数据转为平级数组 （树形菜单和扁平数组）
function treeConvertToArr(tree) { var arrs = []; var result = []; arrs = arrs.concat(tree); while (arrs.length) { let first = arrs.shift(); // 弹出第一个元素 if (first.children) { //如果有children arrs = arrs.concat(first.children);
2020-08-28 09:10:49
3066
1
原创 element的el-form和el-table嵌套使用
<template> <div> <el-form :model="addJsonForm" ref="addJsonForm" :rules="addJsonForm.addJsonRules" :inline="true" label-width="108px" > <el-table :data="addJsonForm.params" style="width: 10
2020-08-24 09:12:31
22438
15
原创 js生成随机id,生成随机数
function getRandomNum(n) { let rdmNum= ""; for (let i = 0; i < n; i++) { rdmNum+= Math.floor(Math.random() * 10); // [0,10)的整数 } return rdmNum;}// let id = "T" + RndNum(6); //生成以T开头的七位随机数 ,如：T419075
2020-08-19 09:06:29
1698
原创 weekDays,select的多选功能，multiple
weekDays: ["天", "一", "二", "三", "四", "五", "六"].map( val => "星期" + val ), 此时weekDays 为， ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
2020-08-18 09:05:15
294
原创 在新增、修改等功能之前，做清除表单验证（clearValidate）操作的原因
具体描述小伙伴问了一个问题，打开弹窗为什么要取消表单验证？答：是为了避免这种情况，比如你没填，点击了确定，那就打开了表单验证，此时你直接就把该弹窗关了，当你再次打开这个弹窗，这个弹窗的表单表单验证样式是存在的this.$nextTick(val => { this.$refs["FormInAddPopup"].clearValidate(); // 取消表单验证 })...
2020-08-13 09:08:47
2782
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人