m0_60522381的博客

原创 加载本地的geojson文件并配置颜色

原创 vue3基于vue-office实现docx、excel、pptx、pdf的预览

我的需求时根据接口返回的流去渲染对应的类型文件，github的demo中pptx显示的时候样式是一个固定的宽高，这里我在页面上自己修改了需要的样式。最近项目增加docx、excel、pptx、pdf预览的需求，简单记录一下实现步骤。我的node版本是v18.20.3,vue的版本3.2.13。

原创 vue3 element-plus中关于el-dialog

场景是使用el-dropdown和el-dropdown-menu封装了一个组件，trigger为hover类型，el-dropdown-menu的内容是封装了一个组件其中包含一个设置按钮，点击设置按钮弹出一个dialog弹出框，弹出框单独封装了一个vue组件，在修改弹出框样式的时候发现只要下拉菜单收起来之后弹窗也就消失了，具体的底层问题没研究只记录一下解决方法添加了如下三个属性就解决了消失的问题。记录一下使用el-dialog遇到的问题。

原创 vue3 在方法中let数组然后向数组中push时报错的问题

记录只为让自己印象更深刻，顺便给遇到类似问题的童鞋一点思路，希望vue3大佬不要嘲笑😝。这是vue2改写vue3中遇到的小坑，vue3还有很多需要学习的东西。前提情况：在写vue3页面的时候在某个方法中重新定义一个数组变量。查阅资料发现vue3定义数组时需要加。这样再次运行代码就不会报错了。

原创 vue项目打包 opacity变为1%

vue项目打包 opacity变为1%

原创 根据视频的url获取时长

根据视频的url获取视频的时长

原创 vue2 项目启动一直卡在98%Starting development server...98% after emitting CopyPlugin

项目卡在98%

原创 vue3 引入monaco editor之后页面卡顿

vue3 引入monaco editor之后页面卡顿

原创 iview datePicker指定的范围内时间可选 其余禁用

父组件传过来的年份时间范围，例如时间范围是2001-2020年template：js：template： <DatePicker transfer :open="open" //是否显示组件的 :value="item.year" //可以显示传入的开始年份 :options="forbidDate" @on-change="handleChange" t.

转载 项目启动时自动打开浏览器 ——vue

只需要在package.json中添加--open就可以借鉴：vue 项目启动项目时自动打开浏览器 - 王多静 - 博客园第二种是我们项目自用的在vue.config.js中 配置 open：true即可

原创 ztree删除和编辑图标不显示以及添加自定义图标

setting中设置的了删除和编辑但是运行之后不显示图标自定义的addHoverDom也触发不了原因是没有导入jquery.ztree.all.js导入之后可以正常显示了还可以添加自定义图标哟 方法如上⬆️

原创 vue ---ztree 修改ztree的图标

由于数据量大简单的iview的tree或是el的tree加载数据造成页面卡顿，前端操作不流畅。基于vue-giant-ztree修改，添加类似图标⬇️获取icon代码方法--------借鉴大佬的经验拿到了自己项目所需的图标在ztree引用只需如下几个文件ztree对应的vue文件<template> <div id="z-tree" class="flex-col"> <div class="wrap flex-1"&..

原创 vue-highlightjs使用

简单的js代码高亮显示vue-highlightjs - npm强大的github真主安装：npm install --save vue-highlightjs在main.js中引入import VueHighlightJS from 'vue-highlightjs';import 'highlight.js/styles/atom-one-dark.css';Vue.use(VueHighlightJS);在.vue文件中引用<pre v-highligh.

原创 vue JsonEditor 编辑器

JsonEditor官网做后台管理系统需要展示可视化的Json，这样方便录入人员读取。如图所示⬇️安装步骤第一步：npm i bin-code-editor -S# or yarn add bin-code-editor第二步：在main.js中引入import CodeEditor from 'bin-code-editor';Vue.use(CodeEditor);第三步：在所需的.vue文件中<template> <div&...