_pengliang-CSDN博客

vue2的时候使用的是字体图标，缺点就是比较单一。到了vue3，相信浏览器的性能起来，所以这里记录一下前往 https://www.iconfont.cn/，创建自己的项目，准备好需要的图标。然后点击下载每次都这么使用，比较麻烦，所以打算使用一个组件封装一下，并且全局注册。icon-svg.vue三、引入前端项目如果只需要 svg，只需要引入iconfont.js即可放置的目录：public\font\iconfont.js然后在main.ts 注册一下main.ts总结最后就可以

2022-07-13 04:00:00 493

原创【问题记录】vue2.7升级指南实践

vue2.7 出来了，可以以比较低的成本能够使用到vue3新特性。并且最近公司的项目也是使用着vue2.6 + Composition API。所以本着拥抱 vue3 的原则直接由 vue2.6 + Composition API 升级为 vue2.7，即去除 Composition API 。官方资料2.7.0首先肯定是删除和然后升级插件需要移除的插件这里可以使用vscode的正则替换/deep/(.*?){:deep($1){注意：对于类名换行的情况，需要手动处理下。尝试过了换行符，还是

2022-07-12 21:53:00 2306 1

原创【web-music】记录ts+vue3中的ts语法问题

[ref].value 警告加一个判断即可或者使用链判断运算符

2022-07-12 19:46:34 151

原创【问题记录】vue部署后报错，Composition API语法失效

最近一直在使用 Vue2 + 开发项目。所以对于当看到正式版的发布的时候，是开心的。Vue 2.7 从 Vue 3 向后移植了一些最重要的功能等等…，十分接近但是第二天我的项目部署线上的时候，就突然一直报错。编译时没有报错，但是到了线上就报错，如也就是语法失效了。定位了很久发现是vue2.6自动更新为2.7了，导致无效。最后锁定版本号即可。去掉......

2022-07-06 21:33:40 2484 1

原创【web-music】【Vue3.x+Vite+TypeScript+Router4+Pinia+Less+Element Plus】快速搭建

配置环境

2022-04-11 22:01:04 530

原创【bpmn.js 使用总结】十、答疑

答疑（持续更新）1 如何自定义 id如何将 id,例如 Task_1hcentk 改成自己想要的格式？先看看源码怎么写bpmn-js/lib/features/modeling/BpmnFactory.jsBpmnFactory.prototype._ensureId = function(element) { // generate semantic ids for elements // bpmn:SequenceFlow -> SequenceFlow_ID var p

2021-06-20 11:58:01 3289 20

原创 el-transfer 数据量大时使用虚拟列表

前言el-transfer 加载几千个数据已经卡得不行了，毕竟页面上存在了几千多份 dom。由于时间紧急，打算直接拿源码出来修改。开始为了代码不混淆，这里使用 mixins。有三个文件virtual-list-mixins.jsexport default { computed: { contentHeight () { // 计算滚动条高度 return this.data.length * this.itemHeight } },

2021-04-22 23:33:51 2844 1

原创快来装扮你的新标签页

前言写代码的日子里，总希望有点不一样。浏览器是我的一个好朋友，我希望它能够变得漂漂亮亮的。以 Google Chrome 为例。以下是我推荐的浏览器扩展。几枝几枝在新标签页上展示中国传统色的层叠波浪动画效果搭配经典诗词。尤其喜欢的是唯美的诗句配上意境的背景，我相信一定还有更多喜爱古诗词的程序猿~下载地址：Chrome Web Store 地址 | Firefox Add-ons 地址代码仓库：https://github.com/unicar9/jizhiMinimo优雅，简化

2021-04-01 22:22:56 117

原创【bpmn.js 使用总结】九、 Viewer 添加缩放、改色、拖动

为 Viewer 添加一些功能也许你只是需要只读，但是希望保留放大缩小以及调整位置。使用 NavigatedViewer 和 Modeler 显得不是那么灵活，因为需要禁掉多余的功能。new BpmnModeler({ additionalModules: [ { // 禁用左侧默认工具栏 paletteProvider: ['value', '']// 去不干净，还是默认生成空白 dom // // 禁用滚轮滚动 zoomScroll: [

2021-02-03 22:18:14 9367 7

原创部署网易云音乐API - Nginx反向代理Nodejs

不管是看博客还是写博客，听音乐必然是不可少的一个节奏但是吧，之前的网易云 API 是用的别人的这几天突然就用不了，所以就打算自己部署一个听首歌测试一下，快过年啦~ 三十的鞭炮太响啦，提前祝朋友们新年快乐~送上我非常喜欢的两首歌, 两首歌都非常嗨 ❤在 CSDN 没有音乐，只能来我家听了~???? ლ(❛◡❛✿)ლ 上车开始准备首先得有个服务器，然后搭上 Nginx，为了方便点，我绑定了域名 http://cloud-music.pengliang.online/将网易云API

2021-01-28 21:02:22 2302 6

原创 JavaScript new 理解

前言JavaScript 的 new 运算符干了啥？自己写一遍加深一下。用法function Car(make, model, year) { this.make = make; this.model = model; this.year = year; return { abc: "js", };}const car1 = new Car("Eagle", "Talon TSi", 1993);console.log(car1.abc);// exp

2021-01-21 21:00:34 123

原创使用 class 实现 Promise

说明使用 class动手实现了一遍 Promise模仿： https://github.com/ydiguo/Promise （内含大量注释????）使用 promises-aplus-tests 检验通过仓库： MyPromise代码const PENDING_STATE = "pending";const FULFILLED_STATE = "fulfilled";const REJECTED_STATE = "rejected";const isFunction = functi

2021-01-19 23:02:12 682

原创【bpmn.js 使用总结】八、自定义规则

自定义 Rules为 Bpmn 加上新的规则约束。开始1. 创建相关文件老规矩，准备好文件。这里直接从 bpmn-js-examples 中的custom-modeling-rules建立自定义规则的相关文件，结构如下| -- rules |-- CustomRules.js |-- index.js2. 修改index.jsimport CustomRules from './CustomRules'export default { __init__: ['cu

2020-11-20 22:51:17 3974 1

原创【bpmn.js 使用总结】七、指定 Palette 容器

指定 Palette 容器开始之前需要了解一下自定义 Palette开始去除默认工具栏 // 去除默认工具栏 const modules = BpmnModeler.prototype._modules const index = modules.findIndex(it => it.paletteProvider) modules.splice(index, 1) this.bpmnModeler = new BpmnModeler({.

2020-11-07 20:27:25 1743 1

原创【2020-11-07】使用 vue 模仿 camunda 的 BPMN 部分

使用 vue 模仿 camunda 的 BPMN 部分点击预览网页截图其中实现了多种对齐方式、设置颜色、上传下载图片、文件、小地图、属性面板等等功能代码地址点击这里

2020-11-07 20:25:08 1411

原创【bpmn.js 使用总结】六、自定义线条颜色

设置颜色官方提供了 4 中方法官方 demo我这里推荐两种一、官方 APIconst modeling = this.modeler.get('modeling')modeling.setColor(element, { fill: 'blue', stroke: 'red'})二、通过 css 自定义连线和箭头的颜色NavigatedViewer、Viewer、Modeler三种模式都适用配合自定义渲染加上不同的类名，能够达到每条线有不一样的颜色或者遍历链路获取节点的颜色，

2020-11-07 20:15:59 5728 5

原创【2020-11-03】文件流乱码、axios responseType 不生效

事件后端接口返回的二进制流，竟然乱码？一开始，我是以为本来就长这样，然后我就熟练的 new Blob()…总说我文件损坏，好吧，是我比较菜，方法可能不正确各种百度转 blob，生成 URL当然还是失败告终捣鼓了大半天，axios 配置也看了一遍,可是咋就是不行呢。。this.axios.get(url, null, {responseType: 'blob'})大半天后找到同样遇到这个问题已经解决的大佬， mockjs 真是藏得好深啊~~mock模块会影响原生的ajax请求，使得服

2020-11-03 23:14:17 1319 2

原创【2020-10-31】vue项目中使用pdf.js预览pdf文件

起因项目中需要前端来解析.zip\ .image\ .pdf 并预览图像，并且需要在图形上绘制。所以我的整体解决方法是，在解析生成的图形的基础上，覆盖一层 Canvas。zip 使用了 jszip 直接将其中的图片取出来image 可以直接使用 <img />展示没问题pdf ：本来上面两步使用 <img />可以解决了，但是 pdf 不能够使用呀，在网上查找了资料，最后打算将 pdf 转换成 canvas ,使用的是 pdf,js开始先看看最终完成效果...

2020-10-31 16:46:06 1822 1

原创【bpmn.js 使用总结】五、自定义内容面板 contextPad

自定义 contextPad在自定义 contextPad 的基础上继续修改案例代码在这里取：customContextPad开始自定义 contextPad 和自定义 Palette 步骤差不多1. 创建相关文件建立自定义内容面板的相关文件，结构如下| -- contextPad |-- CustomContextPad.js |-- index.js这里比较方便直接去官方的 Demo 中取代码bpmn-js-example-custom-elements接下来

2020-10-19 21:44:18 6722

原创【bpmn.js 使用总结】四、自定义渲染 Renderer

自定义 Renderer在 [自定义 Palette] 的基础上继续修改案例代码在这里取：customRenderer开始由于画布中的图形为 SVG，不像 Palette 是使用 HTML，所以需要学习 SVG 的基础知识并且需要用到 BPMN 提供的一个 SVG 库 tiny-svg1. 创建相关文件建立自定义渲染的相关文件，结构如下| -- renderer |-- CustomRenderer.js |-- index.js这里比较方便直接去官方的 Demo 中取

2020-10-19 21:43:53 4021

原创【bpmn.js 使用总结】三、自定义工具栏 Palette

自定义 Palette[了解 BPMN 内部】后，对一些模块以及它们之间的配合应该有了一定的概念，下面开始动手尝试修改一下 palette 工具栏案例代码在这里取：customPalette开始你可以实现通过配置生成工具栏自定义工具栏样式、布局可指定工具栏容器为了理解更简单自定义工具栏样式、布局 (非必须，后续实现)可指定工具栏容器(非必须，后续实现)注意：标记 ???? 的地方为重点1. 创建相关文件建立自定义工具栏的相关文件，结构如下| -- palette

2020-10-19 21:43:17 9984 4

原创【bpmn.js 使用总结】二、了解 bpmn-js 内部

介绍bpmn-js 是 BPMN 2.0 呈现工具包和 Web 建模器。它是用 JavaScript 编写的，将 BPMN 2.0 图表嵌入到现代浏览器中，并且不需要服务器后端。这样可以轻松将其嵌入到任何 Web 应用程序中。该库以既可以查看器又可以是 Web 建模器的方式构建。使用 viewer 将 BPMN 2.0 嵌入到您的应用程序中，并用您的数据丰富它。使用 modeler 在应用程序内部创建 BPMN 2.0 图表。了解内部之前先了解下外观：下面介绍库内部的一些见解，即有助于其高度模块化

2020-10-19 21:42:41 16447

原创【bpmn.js 使用总结】一、基础使用

基础使用Viewer BPMN 图表查看器NavigatedViewer 包含鼠标导航工具的图表查看器Modeler BPMN 图表建模器Viewer 功能最简单，仅用来展示NavigatedViewer 在 Viewer 上扩展了导航和缩放功能Modeler 融合了 Viewer 和 NavigatedViewer,并拥有工具栏、属性面板等，实现建模能力快速上手(Vue)安装依赖npm install bpmn-js -Shtml<div ref="canvas" cl

2020-10-19 21:41:46 5017 1

原创 vue 在样式中使用背景图片

vue 在样式中使用背景图片代码如下：width: 100%;height: 100vh;background: url('~@/assets/404.png') no-repeat center;~ 为 Less 的转义字符补充vue 常用的图片引入直接在 html 中使用 <img src="@/assets/404.png" alt="">动态 src当路径的文件名需要拼接变量的时候，可使用 require() 引入在 template 的:src 或者

2020-10-08 16:13:53 2631

原创 vscode中设置vue代码片段

vue 碎片{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"${1}\">\n", " </div>", "</template>\n", "<script>", "export default {", " data () {"

2020-10-07 15:06:50 510

原创解决 el-table 自定义表头视图不更新

使用 slot="header",导致自定义表头视图不更新v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。在这之前我一般使用 v-if 解决这个问题，但是 v-if 的副作用????‍♂️，虽然知道 slot="he

2020-09-26 11:55:14 3056 3

空空如也

datav 轮播表滚动影响外部滚动条

web怎么实现多个客户端同时观看一个视频？