- 博客(40)
- 收藏
- 关注
RSS订阅原创 web Component - 技术指南
mdn 官方定义：Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。简单来说他是一组标准化的web技术，允许开发者来创建可重用的自定义标签，并且这些标签可以在不同的web应用中使用，并且可以封装内部逻辑和样式避免与使用页面的其他部门发生冲突。自定义标签以及行为Shadow DOM（影子 DOM）:提供DOM树与页面其余部分隔离的方法，确保样式不会泄露到全局。
2025-02-17 15:58:31
981
原创 深入布局- grid布局
display: inline-grid：表示把元素定义为行内块级网格元素，与其他行内元素同行;repeat(2, 20px 1fr 90px), 等价于 20px 1fr 90px 20px 1fr 90px。通过给元素设置：display:grid | inline-grid，可以让一个元素变成网格布局元素,以2行3列的布局为例：行高为100px, 第一列宽50px, 第二列为1fr, di三列为2fr。定义大小范围的属性，大于等于 min 值, 最大值可以设置为弹性系数fr, 最小值不行。
2024-10-30 15:44:21
1277
原创 深入布局-grid
显式网格（Explicit Grid）和隐式网格（Implicit Grid）是两种不同的网格生成方式。它们分别通过不同的方式定义和管理网格的结构显式网格（Explicit Grid)显式网格是指通过明确声明的方式定义的网格。您可以通过 grid-template 属性来定义显式网格。显式定义行和列：显式网格允许您明确地定义行和列的数量和大小命名网格线：您可以为网格线命名，以便更灵活地引用它们。固定的结构：显式网格的结构通常是固定的，除非通过媒体查询或其他方式动态调整。
2024-10-29 17:37:18
1040
原创 wangEditor 图文混合粘贴 word
2.支持直接复制微信公众号内容和图片混合粘贴（经调研由于微信图片的防盗链问题以及当前业务场景不做实现， 防盗链问题可参考另外一篇。现状描述： 目前直接复制一篇图文混合的word内容，只能粘贴进来文本， 图片需要一张一张的复制，工作效率很底。1.1 手动通过工具栏上传的图片配置 uploadImage来自定义上传图片实现。1.2 图文混合粘贴的图片， 通过自定义粘贴事件来实现。
2024-07-30 18:55:50
444
原创 记录：开发环境下lerna嵌套子包windicss样式无法正确加载？
1.原因： 启动主项目时， 子项目是通过软链接实现的，并没有经过windicss编辑（主项目中的windicss只对主项目范围的css进行处理, 所以子项目的windicss样式并没有打包进去。安装windicss到根目录，或每个子项目分别安装windicss。
2024-07-30 17:49:38
260
原创 微前端技术预研 - bit初体验
Bit 是可组合软件的构建系统。它使得由独立版本化组件组成的应用程序无缝且快速。核心思想是(组件驱动开发)。Component-driven development（组件驱动开发）是一种软件开发方法论，特别适用于现代前端开发领域，尤其是基于组件化框架（如React、Vue.js、Angular等）构建用户界面的应用程序。这一理念的核心思想是将UI设计和开发过程分解成一系列可重用的独立组件，并围绕这些组件进行迭代开发与测试。组件化管理。
2024-07-30 17:46:42
1252
1
原创 vue3 + element-plus 表格行内编辑，如何实现表单校验？
使用el-form表单自身的校验功能：通过el-from绑定对应表格行的prop， 实现校验。
2024-07-09 13:01:35
1504
原创 element-plus 树形表格懒加载时， 节点数据更新问题？
方法二： 保存每次请求的resolve实例， 当子节点数据改变时， 手动触发resolve更新（这种更新方式存在问题， 清空所有子集时不生效）如何不存在删除操作时可使用次方法。问题描述： 当前是一个无限层级的树形表格， 当删除或编辑test-0001时我期望仅更新test下面的所有子节点而不是刷新页面。
2024-05-22 14:50:09
635
1
原创 如何解决”此图片来自微信公众平台，未经允许不可引用“问题？
问题描述， 从微信公众号中拿到的图片url需要在前端页面中展示，看了许多资料大概：为了防止其他平台引入，特意做了类似防盗链的功能，即使是添加了业务域名，也是如此，效果如图。2.图片的img标签上添加 referrerpolicy="no-referrer"解决。1.header中添加(根据页面要求在.html中增加 meta)解决方案一：根据图片请求的头部的referer属性做来源判断，
2023-12-27 14:54:37
3690
原创 vue3 + windicss + css变量换肤以及主题适配
rgba：使用透明度时只能识别， 0, 0, 0 ，格式的颜色值， 所以定义css变量不能直接取16位颜色值（可使用方法转换颜色值得到数值： 转换方法附在文章末尾）定义 css 变量以及 多套主题 css 变量值： 覆盖需要替换的 vitepress 内置变量。windicss 使用主题变量， .md 案例中windicss 生效必须配置include。windicss 中使用css 变量：配置windi.config.ts。：以上方案可实现windicss使用css 变量实现 主题替换。
2023-12-07 15:57:32
955
原创 vue3 使用 monaco-editor 自定义代码补全。
*** 注册：自定义语法补全* @param language 语言类型* @param constValues 常量提示*/// 获取当前行数// 获取当前列数// 获取当前输入行的所有内容// 通过下标来获取当前光标后一个内容，即为刚输入的内容label: e,detail: '常量配置',}))//拦截到用户输入$，开始设置提示内容，同else中代码一致，自行拓展// 直接提示，以下为sql语句关键词提示label: e, // 显示的提示内容。
2023-04-17 14:09:38
8992
3
原创 vite 移动端项目搭建vue3+ts+vant3
这样在代码保存的时候， eslint就会自动检查并修复。（使用vite官方模板）,这里使用的是vue-ts版本。属性，设置该属性后，即可在对应的机型上开启适配。也可以添加到package.json中。配置完成后，可在组件中直接使用vant组件。也可以通过命令去运行eslint。： 增加windi.config.ts。安装后会在项目中生成对应的配置文件。tsconfig.json增加配置。vit.config.ts配置。：mian.ts 引入样式文件。Vant 中部分组件提供了。vue3对应的语法高亮插件。
2023-03-22 15:32:35
2579
原创 vue 实现 md文件预览
vue2中使用vue-markdown实现markdown文件的预览vue3 + vite + ts 项目中使用vite-plugin-md 来实现markdown文件的预览
2022-12-01 15:44:50
4208
6
原创 vue 解决钉钉h5微应用控制返回，并退出应用
2. 解决方案： 查看钉钉开发文档说明，backbutton 事件监听仅支持安卓端，ios端推荐使用setleft API来控制返回。1.情景：钉钉微应用，在首页点击返回按钮时，必须点击两次返回才能退出应用。
2022-09-29 10:23:39
4367
5
原创 vue 移动端页面拖动问题解决
移动端h5页面，拖动页面引起页面整体偏移，1.解决方案一：给当前页面添加css样式touch-action: pan-y， 2.解决方案二利用固定定位解决
2022-08-04 09:34:38
1344
原创 vite + vue3 配置使用环境变量
步骤一：项目文件夹根目录下创建生产和开发环境对应的.env文件步骤二：vscode 添加.env类型文档的高亮 1. 安装env插件 注意：该插件默认仅识别.env文件，其他名称的支持可参考插件介绍页的扩展方式（例如：.env.development） 步骤三：配置package.json步骤四： 组件中使用 方式一：存在缺陷：注意 Vite 默认是不加载 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子， 和 选项会影响加载行为。不过当你的确需要时，你可以使用
2022-07-01 17:33:41
5315
3
原创 Monaco Editor (vite/webpack + ts + vue项目使用)
微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的。VS Code(基于electron) 包含了文件管理、版本控制、插件等功能，是一款桌面软件。Monaco Editor （基于浏览器）可以看作是一个编辑器控件，只提供了基础的编辑器与语言相关的接口，可以被
2022-06-23 18:05:22
9046
6
原创 js 设置window.open打开新窗口的title
方法一：缺陷：打开的新链接非同源时，不生效const newWindow = window.open(url) newWindow.onload = () => { newWindow.document.title = fileInfo.appendixName}方法二缺陷：h5的android端不支持openWindow (url, title) { const newWindow = window.open('about:blank', title).
2022-05-28 17:37:56
3730
原创 Vue3.0 + vite + Ts + element plus体验
1.配置eslint + vue Language Features (Volar) (vscode 插件) 2 路径别名配置vite.config.ts3.sass: （css预处理器)4.引入element plus
2021-11-23 19:55:57
1693
原创 js 计算椭圆上的点
1.计算椭圆上的点（轨迹）// a 长半径， b 短半径， p 节点的间隔 ， cx, cy 圆心, getCPoint ({ a, b, p = 1, cx = 0, cy = 0, }) { const data = [] for (let index = 0; index < 360; index = index + p) { let x = a * Math.cos(Math.PI * 2 * index / 360) let y
2021-04-02 14:20:37
2216
原创 前端资源库整理
ui组件类：Echarts: 是一款基于js的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表.gojs:GoJS是一个JavaScript和TypeScript库，用于构建交互式图和图.提供了用于用户交互的高级功能,从简单的流程图和组织结构图到高度特定的工业图，SCADA和BPMN图，医学图（如基因图和爆发模型图），等等。GoJS使用可自定义的模板和布局使构建复杂节点，链接和组的图变得容易。tweenmax：是GreenSock 动画平台中的核心动画工具，可用来构建补间.
2021-03-01 09:35:22
324
原创 element 解决table高度自适应
1.表格高度自适应常见使用场景：table 区域需要表格撑满并且当表格内容超出时在table区域显示滚动条解决方式1：纯css解决黄色的content区域设置css 样式
2021-02-01 13:40:13
1479
原创 echarts中设置地图背景图片
1.geo设置背景(设置 color)官方属性说明实现效果：options配置： options: { tooltip: { triggerOn: `onmousemove`, trigger: `item`, // position: `top`, position: function (point, params, dom, rect, size) { .
2020-11-19 10:32:49
19381
2
原创 echarts中如何设置geo3D地图背景图片，以及geo3D中如何使用effectScatter属性
geo3D地图背景纹理属性 colorMaterial 官方详细介绍注意： 使用在colorMaterial属性仅在 shading属性为'color'时有效。geo3D: { map: `海南`, shading: `color`, colorMaterial: { detailTexture: this.bg, // 纹理贴图 格式支持（string, HTMLImageElement, HTMLCanvasE..
2020-11-19 10:30:42
12778
10
原创 echarts tooltip绑定点击事件并弹出弹框
1.问题描述实现如图效果，当鼠标悬浮/点击小脚位置时，弹出tooltip框，并且鼠标点击查看更多按钮弹出弹框。2. 实现步骤2.1问题汇总样式不生效（提示框设置样式必须为全局样式）按钮点击无响应（按钮样式增加 pointer-events:auto）按钮点击方法不执行（需增加全局作用域的样式， tooltip无法使用vue组件的方法， 必须定义windows全局上）tooltip字段主要配置如下 tooltip: { // 鼠标是否可以进入悬浮.
2020-11-18 18:45:31
14871
5
原创 vue + echarts 实现以中国为中心的世界3D地图
1.预期效果参考官方例子：注意事项：1.需要重新引入word.js 文件实现代码：/* eslint-disable */<template> <div class="container"> <div id="earth_map_3D"></div> </div></template><script>import echarts from 'echarts'import '
2020-10-16 14:35:28
6036
13
原创 ts 解决引入插件的类型文件不存在的问题
问题描述：在vue.ts的项目中安装dataV插件的时候，按照正常流程注册插件后报错：解决方式一：查看报错发现缺少插件的类型声明文件，于是根据提示安装对应的类型依赖。npm install @types/jiaminghi__data-view执行结果还是保存，类型文件不存在这里可以使用：typings search --xxxx 来查找库的类型文件是否村子解决方式二：根据报错提示添加一个包含“declare module”@jiaminghi/data-view“的.
2020-10-12 11:41:27
6325
4
原创 vue 中父组件如何监听子组件的生命周期
方法一：在子组件生命周期中使用$emit('callback')触发父组件中的方法// Parent<Child @mounted="doSomething"/> // Childmounted() { this.$emit("mounted");}方法二： 使用hook钩子函数// Parent<Child @hook:mounted="doSomething" ></Child>doSomething() { cons
2020-10-09 09:36:49
1376
原创 echarts 实现地图增加阴影及城市间线条
1.预期效果2.边框使用到的属性{ shadowColor: `#337495`, // 阴影颜色 shadowOffsetX: 8, // 阴影偏移 shadowOffsetY: 20, // 阴影偏移 borderColor: `#fff`, // 边框颜色 borderWidth: 10, // 边框宽度 shadowBlur: 1 // 边框阴影}3. 线条使用属性lineStyle: { normal: { .
2020-09-28 10:08:11
6533
原创 vue2.0+vuex实现全局对话框
vue+vuex+vuetify1.在文件夹components下新建文件夹Dialog.vue<template> <v-layout row justify-cneter> <v-dialog v-model="isShowFormDig" persistent max-width="680px"> <v-card&g...
2018-10-30 15:57:32
1008
原创 nodejs新手入坑（一）
1.2.基本模块fs: 文件系统模块，负责读写文件读文件：fs.readFile(文件名, 编码, 回调函数),fs.readFileSync(文件名, 编码)//不接受回调var fs = require('fs')//异步读取fs.readFile('test.txt', 'utf-8', (err, data) => { if (err) { c...
2018-10-29 15:28:49
235
原创 vue+ts 实现复杂级联选择
一：问题描述：用户购买课程，预期效果：二.级联选择器的需求1.vue+ ts 实现可复用组件2.已经购买的课程显示disabled且只读3.点击每级的checkbox实现子级的全选与取消全选4.点击每个tab显示子级的所有课程且添加背景5.子级未全选父级显示选一半状态三 .组件设计输入： isEditCourse控制级联选择的弹框显示，navTitles...
2018-10-26 14:56:51
1805
1
转载 javascript Array对象方法
1.Splice() 删除、插入、替换删除： splice（startIndex, n）删除从startIndex位置开始的n个元素 强调: 1. 直接修改原数组 2. splice会将删除的元素组成新的数组返回 3. 不考虑含头不含尾 简写: 1. 支持负数参数: 代表倒数第n个位置 其实自动用leng...
2018-10-11 10:41:27
169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人