莫宛-优快云博客

原创 element的upload组件，自定义http-request，将文件内容与其他内容一起上传

自定义http-request上传函数，保存文件数据与表单其他内容一同提交（定义http-request为什么不生效）。文件el-upload必填校验，文件名格式，文件类型，文件大小校验。当接口数据需要以multipart/form-data格式上传时，前端应当如何处理。

2022-09-29 15:17:04 5413 1

原创封装element穿梭框，包含前端分页，查询，全选所有，全选当页，反选功能

利用element组件封装了一个包含前端分页，查询，全选所有，全选当页，反选功能的穿梭框。当前设置穿梭框最小宽度为680px，最大宽度由box-width定义的宽度决定。

2022-09-29 14:53:49 1533 1

原创在vue项目中使用百度地图api，报错BMapGL is not defined

在vue项目中使用地图api，报错BMapGL is not defined

2022-08-02 14:36:59 6686

原创 vue+js实现复制文字到剪贴板功能

使用javaScript实现复制内容到剪贴板功能

2022-07-29 15:39:36 788

原创淡入淡出多卡片切换vue

通过vue transition及css3实现的卡片淡入淡出切换功能

2022-06-10 09:52:55 829

avue表格因页面缩放导致错位问题解决一、前置知识avue错位问题可以通过重新渲染解决this.$refs.originPlace.refreshTable();参考:Avue使用心得页面缩放的监听方法window.onresize 1. 尝试在vue中使用window.onresize 时不生效，采用addEventListener方式书写才能生效；参考：vue中window.onresize无效的解决方案2. 在mounted中设置对resize的监听即可实现监听页面尺寸改变；

2022-04-14 11:19:33 3001 3

原创启动项目时遇到node-sass版本不匹配问题

一、错误信息Syntax Error: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)原因：当前node环境与node sass版本不匹配，更换对应版本的node或node-sass即可二、node与node-sass版本的对应关系https://github.com/sass/node-sass三、更换node可以

2022-01-11 14:01:54 3996 1

原创 Vue Router路由的params传值与query传值

1.query 2.params 一、query： 1. <router-link :to="{name: 'detail',query:{ id:123 }}">点击</router-link> 2. this.$router.push({name: 'detail',query:{ id:123 }}) 二、params： 1. <router-link :to="{name: 'detail', params:{ id:123 }}">点击</router-link>三、两者的区别

2021-12-30 15:28:33 1708

原创不使用HBuilder在uni-app项目中引入uni-ui

文章目录下载uni-ui，将其中要用的组件放在src/components目录下1. 下载依赖2. 在node_modules文件夹下找到下载的uni-ui3. 粘贴到src/components目录下4. 在页面中使用5. 效果下载uni-ui，将其中要用的组件放在src/components目录下uni-ui符合easycom规范传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下或uni_modules

2021-12-30 09:30:56 2339

原创微信小程序的缓存

web中本地存储与小程序中本地存储的区别： 1.存 // 方式一 wx.setStorage // 方式二wx.setStorageSync 2.取 // 方式一 wx.getStorage // 方式二 wx.getStorageSync 3.删 // 方式一 wx.removeStorage// 方式二 wx.removeStorageSync 4. 设置过期时间

2021-12-29 17:47:56 766

原创 package.json和package-lock.json

一、package.json 开发者在下载依赖包时使用–save 命令，package.json就会记录该依赖包的依赖信息【如npm install axios --save】因此，package.json中只会保存开发者想要保存的依赖包。二、package-lock.json 文件会保存node_modules中所有包的信息（包括精确版本version和下载地址resolved以及依赖关系dependencies等）三、版本号的含义

2021-12-28 14:17:05 1268

原创微信小程序的生命周期（小程序生命周期，页面生命周期，组件生命周期，页面切换时生命周期状态变化）

1.小程序生命周期 2.页面生命周期 3.小程序生命周期与页面生命周期的关系 4.页面间切换时生命周期状态 5.通过redirectTo或navigationTo方法从页面A跳转到页面B 6.通过navigationBack或navigationTo方法从页面B跳转回页面B 7.组件生命周期

2021-12-23 18:13:26 871

原创微信小程序-页面bindtap绑定点击方法，传递当前被点击的数据信息（如id等）

文章目录介绍wxml代码 bindtap绑定handleCheckbox方法js代码通过e接收接收数据详细示例wxml页面代码js代码接收到的数据介绍可以通过在wxml页面标签内添加data-id="{{item.goods_id}}"属性，来向绑定的方法传递数据，通过方法的e.currentTarget.dataset.id获取。**注意：**标签中的属性名定义为data-id，则dataset中的属性名为id；如果标签中属性名定义为data-goodsId，则dataset中的属性名为goo

2021-12-13 09:00:26 6201

原创微信小程序每次打开某页面都会触发的生命周期方法

微信小程序页面每次展示都执行的方法介绍onShow() 生命周期函数–监听页面显示每次显示当前页面，都会调用onShow()方法使用案例每次访问购物车页面，都应当重新获取一次最新的购物车数据。在onShow中调用对应的获取数据方法this.getCartList()。Page({ /** * 页面的初始数据 */ data: { // 购物车商品列表 cartList: [] }, /** *

2021-12-10 17:42:42 6965

原创点击页面其他部分关闭当前下拉框

点击页面其他部分关闭当前下拉框步骤监听admin模块的点击事件，并设置每次点击时检查当前下拉框部分是否展示，是则改为隐藏，否则改为展示。dropDown.style.display == "none"时设置dropDown.style.display = "block";dropDown.style.display == "block"时设置dropDown.style.display = "none";阻止该点击事件冒泡userBox.onclick = function

2021-11-29 09:16:40 2023

原创 node express项目中将静态资源公开

一、node express项目中将静态资源公开步骤代码二、为什么使用express的app.use()将静态资源公开了还是读取不到文件。相对app.js寻找public；相对运行node命令的终端路径寻找public；建议使用`__dirname`来拼接，得到绝对路径，避免出错

2021-11-23 17:52:46 1535

原创通过node和art-template实现服务端渲染

通过node和art-template实现服务端渲染一、实现内容描述二、知识补充服务端渲染介绍art-template模板渲染的步骤三、项目目录结构四、项目初始化五、项目入口文件编写编写步骤app.js文件代码六、页面编写index.html页面代码七、启动项目

2021-11-15 10:00:15 1490

原创服务端渲染SSR与客户端渲染

一、服务端渲染和客户端渲染的区别服务端渲染SSR是指：在服务端对页面进行渲染，把请求得到的数据插入页面html结构。客户端渲染是指：在客户端对页面进行渲染，在客户端解析页面js，遇到ajax就异步请求数据，并插入页面html结构。二、使用服务端渲染（SSR）的利弊服务端渲染可以被爬虫抓取到，客户端异步渲染很难被爬虫抓取。更利于首屏渲染。服务端压力较大。三、实际应用应用原则真正的网站会采用两者结合的方式来实现。需要seo时，采用服务端渲染。侧重效率和用户体验时，采用客户端渲染，ajax异步刷新

2021-11-05 10:29:27 792

原创通过nodejs搭建HTTP服务器

文章目录通过nodejs搭建HTTP服务器前提搭建步骤实例启动服务器通过nodejs搭建HTTP服务器nodejs是一个用于解析执行javaScript代码的环境（它不是语言，不是框架），通过nodejs，javaScript可以完全脱离浏览器运行，也可以用于搭建服务器。前提安装好nodejs搭建HTTP服务器，我们需要Nodejs提供的API搭建步骤加载nodejs提供的API—http，此模块的职责就是创建并编写服务器通过http.createserver()方法创建一个web

2021-11-03 18:44:43 6079

转载 vscode的git工具中，文件后面的标记是什么意思

一、标记如图二、这个标记其实就是git标识'' = unmodefied 未修改M = modified 已修改A = added 已添加D = deleted 已删除R = renamed 已重命名C = copied 已复制U = updated but unmerged 已更新但未融合三、参考链接VSCode中的git管理工具中，每一个文件右边的字母标记什么意思https://segmentfault.com/

2021-10-26 16:19:22 2332

原创 ES6--generator概念及写法(含yield与next执行机制分析)

一、Generator概念二、写法、特征三、yield与next、运行逻辑实例讲解、yield与return的异同四、Generator函数状态的遍历、在一个Generator函数内遍历另一个Generator函数的状态yield*介绍五、Generator数据传递1. 由内向外传递2.由外向内传递六、return、throw与next的区别

2021-10-25 13:27:25 792

原创 web Components---shadow DOM

一、Shadow DOM简介（通过浏览器查看input、video的Shadow DOM）二、Shadow DOM与DOM树三、在Web Components中的基本用法四、使用Web Components和shadow dom实现简单功能Shadow DOM能够将一个隐藏的、独立的DOM附加到一个元素上。它可以保证元素功能的私有，这样就可以作为一个组件被其他页面引用，而不与外部发生冲突。

2021-10-22 14:26:26 1016

原创某元素设置了opacity，覆盖在它上面的元素怎样不透明

一、问题描述为某元素设置了opacity:0.4; 覆盖在它顶层的元素也半透明。二、让下拉部分不透明的方法 position: absolute;background-color:#fff;z-index:10; 三、方法缺陷两元素嵌套情况下的解决办法仅设置背景半透明，通过rgba()设置。

2021-10-09 15:11:46 1551

原创 js隐式类型转换规则

本文介绍了隐式类型转换（强制类型转换）发生的原因及部分情况下的转换规则。如正号、负号、==、||或、&&与等。

2021-09-24 09:01:52 3232

原创 Web Components简单用法介绍

目录Web Components使用方法一、自定义元素自定义元素的方法：1. 自定义UserCard类2. 使用浏览器原生的`customElements.define()方法`，告诉浏览器``元素与该类相连二、自定义元素的内容1. 通过JS添加2. 通过 ``标签添加三、添加样式四、自定义元素参数五、shadow DOM六、组件的扩展添加监听事件组件的封装参考链接Web Components浏览器原生组件，不用加载外部模块，代码量小。它允许用户创建可重用的定制元素，并在web应用中使用它们。使用方法

2021-09-17 13:45:51 776

莫宛的博客