- 博客(66)
- 收藏
- 关注
RSS订阅原创 记录一个commonJS转ES工具
该工具是cjs-to-es6全局安装安装好之后在需要转ES的模块下打开cmd然后记得要备份，它修改的是原js
2022-12-07 14:01:40
1228
1
原创 vue3使用render渲染demo
vue3中提供了一个h函数用来渲染demo首先引入定义函数渲染 h函数存在三个参数第一个为标签名称，第二个为对象及标签上的一些基本属性，第三个为标签内容如果说div标签下存在子节点（标签）若是存在并层子节点则h函数第三层为数组使用elementPlus组件或是自定义组件第一个参数为组件名称无需带引号，以elementPlus的button为例首先需要引入该组件第二步使用插槽渲染以elementPlus中的ElTooltip为例子，改组件存在一个content提示插槽（悬浮内容出现的提示），还
2022-12-06 15:29:55
1658
原创 根据项目自动生成eslint等规范
首先下载 1.右键cmd管理员运行，全局下载npm install web-norm -g。如果报错提示 Delete '␍’eslintprettier/prettier。改插件会根据项目自动配置eslint规范以及git上传。2.在项目中cmd 中输入web-norm。需要用到web-norm插件。
2022-09-06 15:17:09
312
原创 本地搭建小型静态服务
通常在做小程序或需要用到某些线上资源但是后端还没有将改资源部署，可以先在本地搭建一个小型的服务器模拟静态资源得获取。1.首先使用node全局安装anywhere。输入anywhere -v 及启动成功了。然后在对应的目录下cmd打开命令窗口。...
2022-08-12 15:35:19
199
原创 unipp
动态计算rem是通过获取屏幕元素来计算的rem但是小程序不生效，因为小程序不存在dom。在H5上正常运行，在app打包测试或者真机测试会出现白屏问题，这个时候需要配置基础路径。text标签为文本标签，如果在text标签内写图片，会出现图片无法正常展示。调用微信授权（该任务必须是要用户点击手动授权，不可自己执行）调用微信分享（该任务必须是要用户点击手动授权，不可自己执行）uniapp图片显示需注意问题。uniapp设置多端兼容。............
2022-07-22 15:28:37
446
原创 echarts报错 Unkown series surface
echarts引用3d图形首先需要引入echarts其次在引入echarts-gl如果渲染3d报错 Unkown series surface是因为未知系列曲面需要引入该3d对应的包，例如3d柱状图则还需要引入
2022-06-14 16:49:51
8623
15
原创 父盒子设置flex布局子元素设置高和宽不生效问题
这是因为定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性就是是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度和高度即设置的高度和宽度不生效。当flex-shrink设置为0时，表示大家都不缩小适应即设置的高度和宽度可以生效。所以，倘若给父元素设置了flex布局后，若要其子元素的width和height有效果，必须给子元素设置flex-shrink为0。...
2022-06-10 14:21:12
3914
原创 css中使用TTF文件
在这里插入代码片// 声明字体@font-face { font-family: mFont; src: url('/public/font/FZZZHONGJW.TTF');}url为TTF文件路径最好引入全局样式 font-family: mFont;
2022-04-22 11:19:00
1081
原创 vue3+vite配置兼容ie11
下载插件cnpm i @vitejs/plugin-legacy -S引入import legacy from '@vitejs/plugin-legacy'在vite.config.ts中配置 plugins: [ vue(), legacy({ targets: ['ie >= 11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'] }) ],...
2022-04-15 16:32:53
7064
4
原创 项目主题背景切换
首先再全局css文件中定义变量:root { --varColor: #00e0ff; --varSxColor: #1f334a; --selectHoverColor: rgb(13, 58, 99); --bgBlockStyle: #0c1d36; //基础的主色调 --varinputBorderColor: #3d4a5e; --varInputBackground: #10253f; --tableTopColor: #31495e; //表头颜色 --mod
2022-03-29 15:30:53
283
原创 ts入门详解
发现一个大佬写的特别好的一篇文章，记录一下https://juejin.cn/post/7066964816107143198#heading-29
2022-03-23 17:26:23
124
原创 后端返回数据流，前端通过该接口实现预览效果
首先需要下载一个插件docx-preview 页面中引入import * as docx from "docx-preview";然后通过调用接口 axios({ method: "get", responseType: "blob", //注意 url: url, //后端返回的数据流接口地址 }).then(({ data }) => { docx.renderAsync(data, dome.value); // 渲染到页面 dome.val
2022-03-23 11:37:45
1907
3
原创 echarts再次渲染，渲染失败
需求是有一个页面展示数据图表但是第一次进入该页面是正常渲染的，但是在这个页面跳出来，在进入的话依然是调用的echarts初始化的图标，导致页面渲染不成功，即不渲染图标原因是：由于容器上已经有 echarts_instance ，还是上次的，所以Echarts是不会重新初始化的，需要手动将DOM上的 echarts_instance 属性移除， 再次进行初始化， 然后setOptio即在离开给页面的时候清空一下echarts_instance属性写法document.getElementByI
2022-03-21 10:47:32
1676
原创 项目中导入docx文件实现预览效果
首先需要用到docx-preview组件在页面中全部引入该组件import * as docx from "docx-preview";import * as docx from "docx-preview";import { onMounted } from "vue";const docxOptions = Object.assign(docx.defaultOptions, { debug: true, experimental: true,});onMounted(() =
2022-03-14 13:55:11
1878
原创 element 表格打包部署报错Cannot read properties of null (reading ‘insertBefore‘)
原因可能是el-table-column渲染时报错 <el-table-column align="center" v-for="(item,index) in tableTitle" :key="TableKey+index" show-overflow-tooltip :label="tableTitle[index]" >
2022-03-08 09:59:08
2540
1
原创 echarts箱型图数据
// 箱型图数据let optionss = { title: [ { text: "Michelson-Morley Experiment", left: "center", }, { text: "upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR", borderColor: "#999", borderWidth: 1, textStyle: {
2022-03-01 15:31:36
958
原创 饿了么弹窗，设置弹窗不关闭，点击外面弹窗抖动效果
1.首先设置全局的动画css.bounce { -webkit-animation-name: bounce; animation-name: bounce;}.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}.animated.infinite { -web
2022-02-24 16:50:40
1139
原创 使用饿了么表格滚动条x轴与y轴交界处样式修改
::-webkit-scrollbar-corner { background-color: var(--bgBlockStyle);}
2022-02-24 10:17:41
631
原创 vue3跨组件传值（爷孙组件传值）
在父组件中通过provide来传递provide('data':要传递的值)在下面的子组件或孙组件中通过let ecorData: any = inject("data");接收需要注意这样传递值在通过 inject 接收的页面通过watch监听是监听不到的
2021-11-18 17:11:32
1268
原创 拼写xml文件格式
首先需要下载一个插件x2js在页面引入import x2js from "x2js";然后开始拼接xml文件格式 obj.SampleSpace = { SampleSpaceInfo: { SchemeName: ExperimentName, GenerateTime: new Date().toLocaleString() }, SampleSpaceItems: { }
2021-11-18 15:58:37
237
原创 g6基本配置
export function treeVisualization(graph: any, clickTreeData: any, treeDom: any, Treedata: any) { //初始化定义 graph.value = new G6.TreeGraph({ container: "container", //容器 width: 1300, //显示树的内容区宽度 height: 1000,//显示树的内容区高度
2021-11-11 16:16:13
1520
4
原创 maplibre
maplibre学习api官网：https://maplibre.org/maplibre-gl-js-docs/api/map/#map#getsource文档:https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/实时画图:https://geojson.io/#map=6/38.831/39.331GeoJson规范https://www.oschina.net/translate/geojson-spec?cmp&p=
2021-11-05 14:11:00
914
原创 记一下vue3中使用element-plus的弹框dialog组件实现拖拽效果
使用hook封装拖拽方法let draging = false;let dragDom: HTMLElement | null;let dragpoint: { x: number, y: number };function handleMouseUp() { draging = false; dragDom = null;}function handleMousemove(ev: MouseEvent) { if (draging) { let _dr
2021-11-04 13:19:10
2164
2
原创 vue3+vite在vite中配置跨域
在vite.config.js中配置import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path';// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], base: "./",//打包路径 resolve: { alias: { '@': p
2021-10-29 13:13:48
10958
原创 js解析xml文件
首先我们将拿到的据转成base64的格式，可以使用插件’js-base64‘cnpm i js-base64 -S下载插件，页面import { Base64 } from 'js-base64'export default function (xmlString: string) { const createObj = (xmlString: string) => { console.log(xmlString); let xmlDoc =
2021-10-28 16:11:33
3114
原创 vue打包清除console.log
在Vue项目中build文件夹下webpack.prod.conf.js中 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger:true, //打包之后关闭debugger drop_console: true // 打包之后关闭console.log }, sourceMap: true }),
2021-10-14 14:18:23
96
原创 记一下在react中input通过defaultValue绑定值输入之后切换绑定值不更新问题
在react中通过input的defaultValue绑定的值是可以输入的，但是输入之后，切换绑定的值，通过e.target可以看到input标签上的value绑定值时发生改变的，但是页面不更新这里可以使用react中的ref来绑定值首先通过const TemplateNameInput:any=React.createRef()创建ref（在ts中是需要声明类型的，不然在input中ref会报红）在input中 <input ref={TemplateNameInput} onBlu
2021-10-09 17:39:23
1301
原创 iframe属性即使用
iframe通常使用其来嵌套一个网页，插入项目中通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了 <iframe src="192.168.2.11:8890/#/"></iframe>该标签还可配置其他，即属性都有iframe常用属性:1.frameborder:是否显示边框，1(yes),0(no)2.height:框架作为一个普通元素的高度，建议在使用css设置。3.width:框架作为一个普通元素的宽度，建议使用css设置。4.
2021-10-08 17:27:53
529
原创 element ui中el-cascader设置默认值，可选中但是input框不显示默认值的原因
在做一些后台的时候，可能需要用到element-ui组件中的级联选择器的多选框的回显首先 给el-cascader组件通过v-model绑定一个变量在进入页面前通过接口获取id来进行回显，有的时候我们会出现那种input下的列表被选中了，但是input框中的值没有进行展示因为我们一般进行赋值的时候是在mounted获取值来进行回显的，当时页面已经挂载好了，所以将其放到created中或者beforeMount即可通过id来进行回显...
2021-09-24 10:59:03
5350
7
原创 基于electron打包exe文件中main.js配置
用Electron开发的应用程序本质是一个Node.js应用程序，但它专注的不是Web服务器端，而是桌面应用，即用Web页面做界面。你能把它看作成一个被JavaScript控制的，精简版的Chromium浏览器。import { app, BrowserWindow, globalShortcut } from 'electron'import * as path from 'path'import { format as formatUrl } from 'url'// import { elec
2021-09-22 11:35:21
1453
原创 记一下结构树两个UI库
x6 https://x6.antv.vision/zh/docs/api/graph/graph标签多了性能不好2.g6 https://g6.antv.vision/zh/examples/tree/compactBox性能好一点
2021-09-18 10:54:57
64
原创 记一下一个用来打包exe文件的库Electron
文档地址https://www.electronjs.org/docs/api/frameless-window官网地址https://www.electronjs.org/一个exe架子 git地址https://github.com/electron-userland/electron-webpack-quick-start第一次打包可能需要很久，打包好一次就快了...
2021-09-18 10:51:43
49
原创 记一下react跳转路由
react跳转路由是通过react内置props中的history，即export default function (props) { const upRputer=()=>{ props.history.push({pathname:'/home',query:{ids:4444}}) } return ( <div> <h1 onClick={upRputer}>2222222222222
2021-09-09 14:18:12
101
原创 react配置代理跨域
react配置代理跨域有两种方法1.可以直接在package.son中直接配置例如如果后端只有一个端口可直接在package.json中写"proxy":"http://后端地址/后端的ip+端口"2.创建一个setupProxy.js在其中写import proxy from "http-proxy-middleware";module.exports = function (App) { App.use( proxy('/api', {
2021-09-08 11:52:06
954
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人