vue
文章平均质量分 64
_pengliang
这个作者很懒,什么都没留下…
展开
-
【部署】Docker + Github Aciton 自动化部署 vue 项目
在网上搜索了很多资料,都是不成功的,,或者说都是打包好再推送过去。那么我的思路是代码直接推到Github,让它1、自动帮我打包成镜像,推到我的远端仓库;2、连接我的服务器,拉取镜像更新,生成容器;原创 2022-10-24 00:51:43 · 1224 阅读 · 1 评论 -
【web-music】vue3 网易云音乐
一个网易云音乐 与 YouTube Music 的在线音乐网页旨在学习 vue3+vite+pinia+ts+element-plus,欢迎大家一起交流网易云音乐及技术。原创 2022-08-28 21:35:17 · 536 阅读 · 0 评论 -
[md-loader]使用md来编写vue组件库文档
- 当前项目公共组件比较多,需要一个文档来描述- 希望轻量化,没有额外资源部署一个文档项目,即内嵌在开发项目中原创 2022-08-28 17:17:45 · 1847 阅读 · 0 评论 -
【问题记录】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 · 2478 阅读 · 1 评论 -
【问题记录】vue部署后报错,Composition API语法失效
最近一直在使用 Vue2 + 开发项目。所以对于当看到 正式版的发布的时候,是开心的。Vue 2.7 从 Vue 3 向后移植了一些最重要的功能等等…,十分接近 但是第二天我的项目部署线上的时候,就突然一直报错。编译时没有报错,但是到了线上就报错,如也就是 语法失效了。定位了很久发现是vue2.6自动更新为2.7了,导致 无效。最后锁定版本号即可。去掉......原创 2022-07-06 21:33:40 · 2688 阅读 · 1 评论 -
【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 · 3973 阅读 · 20 评论 -
部署网易云音乐API - Nginx反向代理Nodejs
不管是看博客还是写博客,听音乐必然是不可少的一个节奏但是吧,之前的网易云 API 是用的别人的这几天突然就用不了,所以就打算自己部署一个听首歌测试一下,快过年啦~ 三十的鞭炮太响啦,提前祝朋友们新年快乐~送上我非常喜欢的两首歌, 两首歌都非常嗨 ❤在 CSDN 没有音乐,只能来我家听了~???? ლ(❛◡❛✿)ლ 上车开始准备首先得有个服务器,然后搭上 Nginx,为了方便点,我绑定了域名 http://cloud-music.pengliang.online/将 网易云API原创 2021-01-28 21:02:22 · 2419 阅读 · 6 评论 -
【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 · 4265 阅读 · 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 · 1905 阅读 · 1 评论 -
【2020-11-07】使用 vue 模仿 camunda 的 BPMN 部分
使用 vue 模仿 camunda 的 BPMN 部分点击预览网页截图其中实现了 多种对齐方式、设置颜色、上传下载图片、文件、小地图、属性面板等 等功能代码地址点击这里原创 2020-11-07 20:25:08 · 1454 阅读 · 0 评论 -
【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 · 6708 阅读 · 5 评论 -
【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 · 1905 阅读 · 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 · 7268 阅读 · 0 评论 -
【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 · 4474 阅读 · 0 评论 -
【bpmn.js 使用总结】三、自定义工具栏 Palette
自定义 Palette[了解 BPMN 内部】后,对一些模块以及它们之间的配合应该有了一定的概念,下面开始动手尝试修改一下 palette 工具栏案例代码在这里取:customPalette开始你可以实现通过配置生成工具栏自定义工具栏样式、布局可指定工具栏容器为了理解更简单自定义工具栏样式、布局 (非必须,后续实现)可指定工具栏容器(非必须,后续实现)注意:标记 ???? 的地方为重点1. 创建相关文件建立自定义工具栏的相关文件,结构如下| -- palette原创 2020-10-19 21:43:17 · 11426 阅读 · 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 · 17148 阅读 · 0 评论 -
【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 · 5378 阅读 · 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 · 2676 阅读 · 0 评论 -
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 · 546 阅读 · 0 评论 -
解决 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 · 3248 阅读 · 3 评论 -
Elementui Popover点击拖动滚动条关闭
场景在非固定列表格中使用 Popover 弹出框,并且 el-popover中还有 Select 选择器 和 TimePicker 时间选择器 等 Popover 弹出框,正常点击页面的时候会同时消失,但是拖动点击非固定列的滚动条的时候不消失且不跟随表头移动,因为 Popover 默认是以 body 为基准。解决方法使用监听与 Popover无关的滚动条事件,模拟鼠标事件关闭它。document.body.click()document.dispatchEvent(new CustomEvent(原创 2020-06-16 22:50:34 · 3012 阅读 · 1 评论 -
【 vue-next-demo】尝鲜 vue 3.0
最近好奇 vue-next 新版本的 api,自己动手实现了下。原创 2020-06-02 23:26:50 · 404 阅读 · 0 评论