shidouyu-CSDN博客

原创低代码设计器的栅格布局和绝对定位布局对比

而绝对定位的自由布局适用于需要精确控制和更自由的设计需求。绝对定位的自由布局：绝对定位的自由布局是通过设置元素的位置属性和偏移量来实现的，可以将元素精确地放置在页面的任意位置。栅格布局：栅格布局是一种基于网格系统的布局方式，通过将页面划分为等宽的列，然后将元素放置在这些列中，以实现页面的布局。精确控制：绝对定位可以精确地控制元素的位置和大小，适用于一些需要特定布局效果的场景，如特殊效果、层叠布局等。自由度高：绝对定位可以让设计师更加自由地布局页面，没有网格的限制，可以实现更加创新和独特的设计效果。

2023-10-27 09:47:24 180

原创 js中的new方法

4，若构造函数返回的是一个对象则返回此对象，若非，则返回新创建的对象；1，创建一个新对象，将新对象的proto属性指向原对象的。此过程完成了创建对象、对象继承、属性初始化过程，被称为隐式原型继承；new方法的作用：创建一个实例对象，并继承原对象的属性和方法；2，构造函数执行环境中的this指向新对象；3，执行构造函数中的代码；

2023-10-17 21:08:37 677

原创 HTML渲染过程

3，设置成display为none的元素，不会进入渲染树，对于那种具备复杂逻辑的元素，可以优先隐藏它，等它计算完成后再显示，这样可以减少重排的次数，只在显示和隐藏的两个点进行重排，只会有两次；2，将需要多次触发重排的样式操作，改成绝对定位和固定定位，这样可以脱离文档流，它的改变不会改变其他元素的重排，比如动画操作时，设置成绝对定位；JavaScript 引擎：js可以修改网页的内容、css信息，目的是将代码的逻辑对应到dom元素和css中，形成新的布局，改变渲染的结果；1，将多次改变样式的行为合并成一次；

2023-10-17 14:50:46 465

原创原型和原型链

2，原型：被继承过来的对象叫原型，继承的属性可通过构造函数的prototype对象找到。js的继承机制：原型对象的所有属性和方法，都可被实例对象共享，不仅节约内存，体现了实例对象间的联系。对象的原型属性是用来继承属性的，原型属性在实例创建之初就设置好的，通过对象直接使用Object.prototype作为他们的原型。对象不仅是具备自有属性，还可以成为原型继承过来的属性，分为两大类：继承属性、自有属性；每个js对象都和另一个对象相关联，另一个对象便是它的原型，每个对象都从原型继承属性。

2023-10-16 22:00:53 499

原创云资源上传的审核机制

需要注意的是，审核机制应该是一个综合的、多层次的过程，结合自动化和人工审核的方法，以尽可能减少误判和漏判的情况。同时，应该建立相应的申诉和处理机制，以处理用户对审核结果的异议或投诉。持续监测：建立持续监测机制，对已上传的资源进行定期或实时的监测，以确保资源的合规性。人工审核：对于无法通过自动化检测的资源，可以进行人工审核。这可以由专门的审核团队或者多个审核人员进行，以确保资源的合规性和安全性。规则和策略：制定明确的规则和策略，明确禁止上传的内容类型和行为，如暴力、色情、违法等。

2023-10-07 13:48:37 156

原创 nginx配置websocket配置

nginx的配置中需要加上：

2023-08-24 14:49:24 106

原创 vue 路由缓存

使用两个 router-view 标签分别作为缓存和不缓存的路由出口在路由配置的时候只需要给要缓存的页面加上 meta 属性然后添加 keepAlive 属性设置为 true 即可。同样直接用 keep-alive 标签包裹 router-view 标签然后使用 include 指定需要缓存的页面的 name 名称。直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了。注意是缓存页面的 name 名称而不是缓存页面路由的 name 名称。

2022-12-12 14:55:40 1453 1

原创 entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...productionSourceMap: false, // 生产环境是否生成 sourceMap 文件。assetsDir: "static", //放置生成的静态文件目录（js css img）config["performance"] = {//打包文件大小配置。outputDir: 'dist', // 输出文件目录。publicPath: './', // 基本路径。

2022-10-28 09:00:07 6366

转载 vue展示.md文件

将md文件作为组件导入，注意：class的值必须包含 markdown-body ，否则样式无法生效！链接：https://www.jianshu.com/p/a84f8ddf0b04。需求：在vue项目中导入并展示markdown文件（使用的vue-cli3）安装 vue-loader 、vue-template-compiler。安装 github-markdown-css、highlight.js。在vue.config.js中配置webpack。安装 vue-markdown-loader。

2022-10-08 10:43:11 912

转载正则表达式中，如何获取括号中的内容，不包含括号和单引号

正则表达式中，如何获取括号中的内容，不包含括号和单引号

2022-09-27 08:42:08 6215

原创 vue中model命令的三个特殊用法

vue中model命令的三个特殊用法

2022-08-19 08:59:10 214

原创报错Unknown custom element: ＜组件名＞ - did you register the component correctly?的原因及解决办法

模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。为了解决这个问题，我们需要给模块系统一个点，在那里“A 反正是需要 B 的，但是我们不需要先解析 B。第三种：检查引入的组件确定是否需要{} , import XXX from "...." 还是 import { XXX } from "...."假如有A,B两个组件，渲染A组件的时候，A组件中引入了B组件显示，在渲染B组件的时候又引入了A组件，会导致控制台一直报是否正确注册了组件的错误。...

2022-08-17 17:14:08 57558 3

原创 vue针对循环中slot的传参数

vue针对循环中slot的传参数

2022-06-20 11:14:17 957

原创 vue兼容谷歌48(含qiankun兼容)

控制台定位到相应插件的js，找到插件：1,在vue.config.js中配置：'transpileDependencies': ['@jiaminghi/*',],transpileDependencies为特别需要将es6代码翻译成es5的插件说明；2,css3的var兼容：npm install css-vars-ponyfill mutationobserver-shim —saveimport 'mutationobserver-shim'import cssVar

2022-04-26 09:17:51 2546

原创 html转成base64/blob/file

import html2canvas from 'html2canvas'async saveImage(divText, _this) { let canvasID = _this.$refs[divText]; let a = document.createElement('a'); return new Promise((resolve, reject) => { html2canvas

2022-04-20 14:38:34 1120

原创单文件vue.js组件化

<body style="background-color: #E7F1FF;height:100vh;"> <div id="loginhtmlshow"></div> <div id="loginhtml" class="height100 lglr flexbox"> <userdifine /> </div> <script type="text/javascript"&.

2022-03-17 19:54:08 240

原创 vue兼容谷歌48版本

控制台打开报错的文件，定位到相应的插件；在vue.config.js中配置：'transpileDependencies': [/[/\\]node_modules[/\\](.+?)?exceljs(.*)/, /[/\\]node_modules[/\\](.+?)?crypto-js(.*)/]css3不兼容：npm install css-vars-ponyfill mutationobserver-shim —savemain.js中配置：import 'mutatio

2022-02-22 13:49:39 1705

转载 Mac下 svn 的分支管理

背景对项目启新版版本，在原来基础上创建一个分支。由于在 mac 没有好的图形界面，只能选择命令行模式操作创建新分支svn cp -m "我的新分支" https://[email protected]/svn/mytest/iosApp/Glaucus https://[email protected]/svn/mytest/iosApp/xGlaucus 在任何目录下都进行这条命令，因为与本地工作目录没有任何联系这条命令执行后，会有这样的提示：Err

2022-01-17 08:55:49 515

转载前端预览 PDF 文件

PDF.js 是什么？PDF.js由 Mozilla 提供支持。目标是创建一个通用的、基于 Web 标准的平台，用于解析和呈现 PDF。预览 PDF使用 iframe、embed、新窗口打开测试地址，方案比较简单，属于看天吃饭，全靠浏览器爸爸赏。使用方式<embed src="https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE.

2022-01-12 15:53:03 728

原创 vue阻止重复点击preventReClick需改进

为实现统一的防止重复点击触发方法，查看了网上资料显示：一，引入preventReClick.jsimport Vue from 'vue' const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => { if (!el.disabled) {

2022-01-11 15:07:50 1214 1

转载 onClick 和 addEventListener 比较

JS事件绑定（addEventListener）和普通事件（onclick）有什么区别普通事件（onclick）普通事件就是直接触发事件，同一时间只能指向唯一对象，所以会被覆盖掉。代码如下：var btn = document.getElementById("btn");btn.onclick = function(){ alert("你好111");}btn.onclick = function(){ alert("你好222");}1234567输出的结果...

2022-01-11 14:21:17 219

原创 $event获取当前元素

<p @click="onClick">点击获取当前元素</p>分两种：// e.target 是你当前点击的元素// e.currentTarget 是你绑定事件的元素

2022-01-11 14:04:07 827

原创 require图片相对路径时，有些图片能显示，有些不能

let img = require(`../assets/images/index/icon_ku.png`) let img2 = require(`../assets/images/index/icon_DB2.png`) console.log(img) // 结果：/img/icon_ku.b259504f.png console.log(img2) // 结果：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAtCAYAAAD7na..

2022-01-06 10:38:10 1643

原创用js实现圆弧布局

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> #circle{ width: 300px; height: 300px;..

2021-11-25 08:36:34 889

原创 vue 刷新当前路由

<router-view v-if="isRouterAlive" />isRouterAlive:truereload() { this.isRouterAlive = false this.$nextTick(() => { this.isRouterAlive = true })}

2021-11-22 17:03:47 674

原创 JS向下向上取整等数字处理

只保留整数部分（丢弃小数部分）parseInt(5.1234); // 5向下取整（<= 该数值的最大整数，和parseInt()一样)Math.floor(5.1234); // 5 向上取整（有小数，整数部分就+1）Math.ceil(5.1234); // 6四舍五入（小数部分）Math.round(5.1234); // 5Math.round(5.6789); // 6取绝对值Math.abs(-

2021-10-19 10:16:51 524

转载前端组件库大合集-必备收藏

前端组件库搭建web app常用的样式/组件等收集列表(移动优先) 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for automating development workflow gulp – The streaming build system grunt – the JavaScript Task Runner F.I.S – 前端集成解决方案前端模块管理器 Bower – A p..

2021-09-18 17:53:49 12120

转载 element Form当el-input有焦点时，按下回车会发生页面刷新事件

问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。代码如下：<div class="password ft12"> <el-form> <el-form-item label="密码：" label-width="95px" prop="password" class="password"> <el-input clas...

2021-09-10 10:36:27 285

转载 vue之$emit返回值

vue之$emit返回值应用场景：子组件调用父组件的方法并获取到父组件方法的返回值// 父组件getdata(){ return data}// 子组件let data = this.$emit("getdata", bounds)return data这种写法是错误的，拿到的data是指向方法的this，无法获取到data正确写法：// 父组件getdata(bounds, callback){ callback(data)}// 子组件let d

2021-08-27 17:35:58 6028 1

转载同一浏览器下多用户登录问题解决

问题：在如果在同一个浏览器下只有一个用户登录的情况，在服务端可以使用 Session 存储用户登录信息。但是在项目中如果需要在同一个浏览器下允许多个不同的用户登录，这样做会存在问题，因为服务端区分不同用户是通过 Cookie 中存储的 JSESSIONID 区分的，如果 JSESSIONID 相同，那么他们在服务端将会使用同一个 Session 对象。而同一浏览器使用的 Cookie 是相同的，从而 JSESSIONID 也是相同的，无法区分不同的用户。当浏览器登录第一个用户后，用户信息写入到 Ses..

2021-08-05 09:57:25 5755

原创 Promise.all和Promise.race方法区别

Promise.all:1，有一个失败的请求，其他都失败；若需弥补这个缺陷，在每个Promise中增加Catch错误捕捉，且return出来；2，返回结果的顺序按照参数的顺序进行；Promise.race:1，根据第一个请求来返回结果，若第一个成功，全局都成功，第一个失败，全局都失败；2，返回结果的顺序，按请求时间顺序来，时间快的先返回；...

2021-07-19 11:00:28 1257

转载 Promise.all同时处理多个请求

需求：多个请求，不管成功或失败，都希望拿到这些请求的结果，比如，第一个请求失败了，后面的请求还是继续，请问怎么实现？初版将所有的异步请求的结果放入一个数组使用 Promise.all 来处理代码如下：// Vue.prototype.$http = axios data() { return { data: {}, ids:['https://cnodejs.org/api/v1/topics','https://cnodej

2021-07-19 10:46:15 1359

原创 vue中将元素加入body中

// 将弹框加入Body中 addRemoveDateWinToBody(type) { this.$nextTick(() => { const body = document.querySelector('body') if (type) { // 显示 let zDateWin = this.$refs.zDateWin let pTabName = zDateWin.paren...

2021-07-07 13:44:59 6153

原创 vue自定义组件库，49浏览器上报token...的错

由于业务需求，所以必须兼容49等IE老浏览器；然而，es6语法无法被兼容，所以需在打包时转成es5；通常用的都是babel插件，但是npm上对于babel的种类繁多，而且所引入方式也有所不同。1，本人最开始尝试的是babel-polyfill，但，并没有什么用，原因是babel-polyfill插件包中包含了core-js版本2，有提示说core-js3.3版本以下，已经不被官方所维护，所以在很多高版本的项目中，babel-polyfill已经无效；2，尝试使用"@vue/cli-plu

2021-07-02 14:46:34 327 2

转载 Vue】自定义loadmore指令实现下拉加载更多

使用自定义指令loadmore，实现下拉加载更多。首先是loadmore.js, el 为绑定的元素，通过el.scrollHeight - el.offsetHeight === el.scrollTop判断滚动条到达底部，这里引入了loadsash实现节流，以免每一次滚动到底部都加载数据（手抖或故意滚动），加入flag字段，控制首次触底后直接执行，后续的触底至少间隔一秒，不介意第一次会慢一点的可以直接在if语句内，调用fun()。// loadmore.jsconst _ = requir.

2021-06-30 10:00:14 1090

原创 vue 滑到底部，加载更多

html部分：<divref="biReportLayout"@scroll="scroll($event,item)"></div>js部分：// 滚动事件 scroll(ev, item) { const _this = this if (item.isPage && item.pageSize) { // 是否分页 let scrollTop ..

2021-06-30 09:43:26 302

转载 error Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager“

今天在做vue项目,切换私服nexus,npm login时,遇到了下面的问题error Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"我在网上搜索了一下,好像在登录和注册,还有发布的时候,都可能遇见这个问题.问题原因也很明确,就是权限验证没通过.下面是我把网上的解决办法整合了一下.第一种:就是信息输入不正确.仔细比对你输入的用户,密码,邮箱是否正确（不要使用网页记住的密码登录,因为很可能已经

2021-06-29 09:59:16 1349

微信小程序带未读数量的tabbar有选中效果

Android上拉下拉XListView及向左侧滑删除的整合

android+popwindow实现左侧弹出菜单层

java导出Excel的jar包

空空如也