码农之家 - 前端
type: channel
link: http://www.liyx.fun/index.php/category/前端/
items: ureport2 查询条件日期格式添加年、月支持
items: dependency-check 使用方法
items: form-generator 添加 iframe组件 若依
items: uniapp 使用 jsencrypt.js 打包后报错
items: jQuery支持图片放大缩小查看效果
items: 上传图片检验类型并预览
items: mui.js 及 examples 下载
items: mui-collapse 折叠后不见 mui-scroll 滚动到顶
items: JS layer关闭弹窗

ureport2 查询条件日期格式添加年、月支持
type: item
date: 2023-12-19T12:45:00+08:00
description: ureport2的日期控件是基于 bootstrap-datetimepicker，需要修改3个文件首先报表设计页面，在设置查询条件日期控件的格式里添加年、月ureport\ureport2-js\src\form\property\DatetimeProperty.js 其次报表设计页面，在渲染日期控件时添加年、月支持ureport\ureport2-js\src\form\instance\DatetimeInstance.js 最后在输出报表页面的时间控件里添加年、月支持ureport\ureport2-core\src\main\java\com\bstek\ureport\definition\searchform\DateInputComponent.java

dependency-check 使用方法
type: item
date: 2023-07-15T11:58:00+08:00
description: Dependency-Check是OWASP（Open WebApplication Security Project）的一个实用开源程序，用于识别项目依赖项并检查是否存在任何已知的，公开披露的漏洞。我们可以使用这个应用来进行相关依赖包的扫描。https://github.com/dependency-check-team/dependency-check有两种扫描方式，应用扫描和插件扫描参考：https://www.jianshu.com/p/3af30f4b73f2应用扫描1、扫描工具使用依赖包扫描工具.zipbin 目录为执行脚本scan 目录为扫描目录out 目录为报告输出目录将要扫描的项目文件放到scan目录，执行bin目录下 启动 - 不扫描js.bat，到out目录查看生成的报告。可以扫描jar、dll的漏洞2、扫描js使用方法使用 启动 - 扫描js.bat ，可以扫描js、jar、dll的漏洞注意事项：js的漏洞档案文件经常下载不了，会报错。此时可以把 data 目录下的 jsrepository - bak.json 文件的内容复制到 jsrepository.json ，即可以扫描。不要重命名 jsrepository - bak.json 文件，文件修改日期不是当前日期还是会执行更新过程。3、修复漏洞可能需要用到的网站：漏洞库：OSCS：https://www.oscs1024.com/hl阿里云：https://avd.aliyun.com/jar包版本库：mvnrepository：https://mvnrepository.comnexusrepository：https://maven-us.nuxeo.org/nexus/

form-generator 添加 iframe组件 若依
type: item
date: 2023-06-29T16:24:00+08:00
description: form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。本文是在 RuoYi-flowable 的基础上修改的，如果是在RuoYi原版本上修改也是差不多的，找到对应的文件就行。一、全局注册ifarme组件，src/main.js// iframe组件 import iFrame from "@/components/iFrame/index" Vue.component('iFrame', iFrame) 二、将组件添加到表单设计器config.js，src/utils/generator/config.js，在文件最后添加// iFrame组件 【左面板】 export const iframeComponents = [ { __config__: { label: 'iframe组件', showLabel: false, changeTag: true, tag: 'i-frame', tagIcon: 'row', defaultValue: undefined, span: 24, layout: 'colFormItem', document: '#' }, style: { height: '300px', width: '100%' }, height: 300, } ] 三、组件属性的可视化修改，/src/views/tool/build/RightPanel.vue <el-input :value="setDefaultValue(activeData.__config__.defaultValue)" :placeholder="activeData.__config__.tag !== 'i-frame' ? '请输入默认值' : '请输入链接地址(src)'" @input="onDefaultValueInput" /> // 导入添加iframeComponents import { inputComponents, selectComponents, layoutComponents, iframeComponents } from '@/utils/generator/config' // tagList() 添加iframe组件 computed: { tagList() { return [ { label: '输入型组件', options: inputComponents }, { label: '选择型组件', options: selectComponents }, { label: 'iframe组件', options: iframeComponents } ] }, } 四、生成html代码，/src/utils/generator/html.js// iframe组件生成html代码时带上src，非必要，在编辑表单页面点击运行按钮生成的html代码会带上src const layouts = { colFormItem(scheme) { const tagDom = (config.tag === 'i-frame' && config.defaultValue) ? `<${config.tag} :src="${config.defaultValue}" />` : tags[config.tag] ? tags[config.tag](scheme) : null } } // 添加iframe组件的html输出 const tags = { 'i-frame': el => { const { tag } = attrBuilder(el) const src = `:src=""` return `<${tag} ${src} />` }, } 五、json渲染表单添加iframe组件支持，src/components/render/render.jsfunction vModel(dataObject, defaultValue, config) { // iframe组件设置src if (config.tag === 'i-frame') { dataObject.attrs["src"] = defaultValue; return; } } 参考：https://github.com/JakHuang/form-generator表单设计器 · 开发教程.vue代码生成器 · 开发教程表单解析器 · 开发教程

uniapp 使用 jsencrypt.js 打包后报错
type: item
date: 2022-12-05T19:08:43+08:00
description: uniapp引入jsencrypt.js之后，浏览器调试没有问题，打包app之后就白屏，报错：Uncaught TypeError: Cannot read property ‘appName‘ of undefined原因是jsencrypt.js引用了一些浏览器独有的属性，需要修改适配一下。smysmile已经修改好了，到github下载就可以。https://github.com/smysmile/jsencrypt_lajsencrypt_la-main.zip

jQuery支持图片放大缩小查看效果
type: item
date: 2020-12-21T20:53:03+08:00
description: 查阅图片 来源：https://www.jq22.com/demo/jQuery-zoom-150311223641/

上传图片检验类型并预览
type: item
date: 2020-12-21T20:38:00+08:00
description: 上传图片检验类型并预览 请选择图片文件：PNG/JPG/JPEG/BMP/GIF

mui.js 及 examples 下载
type: item
date: 2020-02-19T12:01:00+08:00
description: 文件包含 mui.js及examplesHellomui.zip

mui-collapse 折叠后不见 mui-scroll 滚动到顶
type: item
date: 2020-02-19T10:32:00+08:00
description: mui-collapse 在折叠的时候，如果折叠的高度很大，会导致页面一片空白，其实是收缩到上方不可见区域了。需要监听.mui-collapse 元素的样式改变事件，把页面滚到顶部（或者根据实际情况滚动到当前点击对象的当前高度）mui-scroll 滚动到顶：$('.mui-scroll-wrapper').scrollTop(0); //这句是不起作用的mui('.mui-scroll-wrapper').scroll().setTranslate(0,0,100); //要用这个才行， 0，0 是位置，100 是滚动到位延迟时间代码如下：//监听折叠事件 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var elements = document.querySelectorAll('.mui-collapse'); var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.type == "attributes") { //如果当前元素不可见，则将页面滚动到顶部 if ($(mutation.target).offset().top < 0) { mui('.mui-scroll-wrapper').scroll().setTranslate(0,0,100); } } }); }); for (var i = 0; i < elements.length; i++) { observer.observe(elements[i], { attributes: true, //监听属性变动, attributeFilter: ['class'] //属性过滤器，只监听 class 改变 }); }

JS layer关闭弹窗
type: item
date: 2019-05-25T23:28:37+08:00
description: 1，残忍的方法：layer.closeAll(); //疯狂模式，关闭所有层 layer.closeAll('dialog'); //关闭信息框 layer.closeAll('page'); //关闭所有页面层 layer.closeAll('iframe'); //关闭所有的iframe层 layer.closeAll('loading'); //关闭加载层 layer.closeAll('tips'); //关闭所有的tips层 2，指定关闭：//当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index = layer.tips(); //正如你看到的，每一种弹层调用方式，都会返回一个index layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可 //如果你想关闭最新弹出的层，直接获取layer.index即可 layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的 //当你在iframe页面关闭自身时 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //再执行关闭 来源：http://www.cnblogs.com/lkzp123456/p/7484018.html