- 博客(88)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 Vue3 基础 – 快速上手 & 常用指令
a.在调用函数时，可以提供一个对象作为配置参数const app = createApp({ /*配置对象*/ })b.如果想提供要渲染的数据，可以在步骤1的配置对象中，通过data// 2.1 注意：data 节点是一个函数data() {// 2.2 在 data 函数内部，return 的这个对象，就是数据对象，// 要渲染的数据，可以直接写到这个对象中，例如 return { name: 'ls' }return {}})c.在步骤2的 data 节点中，定义一个名为name。
2023-09-19 09:23:51
500
原创 vue项目获取当前地址栏参数（非路由传参）
项目中遇到一个需求，就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面，后再初始化查询数据，参数以地址栏的形式传入管理系统：打开新地址let obj = { id: 21, name: "测试传参" };window.open("http://localhost:8080/loginM?obj=" + JSON.stringify(obj),"_blank");pc项目获取地址栏参数：export function getUrlKey(name){ retu
2022-04-07 14:37:16
2191
原创 element-ui 隐藏组件 滚动条组件 ＜el-scrollbar＞
elementUI 中有一个隐藏组件<el-scrollbar>，用来修改滚动条的样式；1.组件的名称是 <el-scrollbar></el-scrollbar>2.修改默认样式 ，最好在前面加上：class名/id名，用来区别.page-component__scroll .el-scrollbar__wrap { overflow-x: hidden;}3.一种情况用于高度固定：<div style="height:600px;"
2022-04-07 14:31:18
751
原创 vue+element-ui 实现上传文件、下载模板、批量导入、导出
在后台管理系统的项目开发中，为了系统使用更加方便，通常页面中会有批量导入，导出，上传文件，下载模板等功能。刚好最近做的项目中，有这些功能，正好借此机会做个总结。页面上的功能如上图所示。1 下载模板下载模板的功能比较简单，主要是后台提供的一个下载模板的接口，前端使用的是element-ui中的el-link这个组件，这个组件类似于前端常用的a标签，herf属性指向后端提供的接口即可。2 导出3 批量导入使用的elemet-ui中的el-upload组件...
2022-04-06 15:35:10
2430
原创 element UI table表格的多选框 如何根据条件隐藏显示
最近在做项目的时候遇到一个问题，使用的是table组件中的多选，需求要求的是，列表数据除了状态为待审核的可选之外，其他状态前的复选框不可选择。看了下文档结合一些朋友的建议，总结可以使用如下的方法来解决。通过添加相应类来控制样式，设置 display: none ,达到隐藏 checkbox 的目的。利用Table Attributes 属性里面的 cell-class-name 属性，添加单元格的class<template> <el-table :ce
2021-12-01 09:50:16
5089
2
原创 element-ui select组件change事件传递多个参数的方法
在使用element-ui框架开发项目时，select组件应该是经常用到,默认@change="changeEvent"不传递参数，才会把选中的值带过去。但是有时候，我们不仅仅需要选中的值，还需要传递额外的值，比如id之类的参数怎么办呢，下面有两种方法可以解决方法1@change = changeEvent(event,args)；event,args)；event就是选中的值，args就是额外要传递的参数；接收的时候也要用两个参数去接收changeEvent(value,args)...
2021-12-01 09:43:39
14252
原创 layui中laydate日期动态赋值最大和最小值
由于laydate.render无法重复渲染，当laydate.render对应一个elem已经渲染过一次之后，我们是无法通过再次渲染来修改其中的max值与min值的。可以通过 starDate.config.max和 endDate.config.min 来更改，注意它是一个对象，不是一个 字符串，需要对其一一赋值如下：var starDate = laydate.render({ elem: '#stardate', valu...
2021-09-24 10:29:24
1905
原创 js中url 传递参数(特殊字符)解决方法及转码解码
有些符号在URL中是不能直接传递的，如果要在URL中传递这些特殊符号，那么就要使用他们的编码了。下表中列出了一些URL特殊符号及编码十六进制值1. + URL 中+号表示空格 %2B2. 空格 URL中的空格可以用+号或者编码 %203. / 分隔目录和子目录 %2F4. ? 分隔实际的 URL 和参数 %3F5. % 指定特殊字符 %256. # 表示书签 %237. & URL 中指定的参数间的分隔符 %268. = URL 中指定参数的值 %3D解决...
2021-09-24 10:26:39
10129
原创 git 提交merge request合并请求
1. 创建一个新分支，用来修改代码创建完成后可以在新分支修改bug。代码修改完成后开始提交：进入gitlab界面点击右上角mergeRequests，进入到merge请求视图点击创建新的merge request分别待提交版本作为source branch,主线版本作为target branch，然后进入下一步，查看两个版本对比结果，选择审核人提交即可...
2021-09-24 10:13:24
10231
原创 vue中watch的常见用法
在Vue开发项目的过程中，使用watch来响应数据的变化。watch的用法主要有以下几种：1 基本用法<input type="text" v-model="userName"/>new Vue({ el: '#root', data: { userName: 'shanghai' }, watch: { userName(newName, oldName) { } } })直接写一个监听处理函数，当每次监听到us
2021-09-24 09:23:02
464
原创 vue项目开发中.sync 修饰符的作用
官方解释如下：在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。其实这个修饰符就是vue封装了 子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法，但是子组件emit时要加上update。代码如下:这里父组件，要给子组件传一个title的值<template> <div> <t-title..
2021-05-14 10:36:41
251
原创 Vue中watch的用法
前言：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。用法如下： data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听，可监听到对象、数组的变化 handler(val
2021-05-14 10:31:13
214
原创 vue v-for循环的key值使用注意事项
vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错.使用方法:1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key。2.使用template作为循环语句的元素时,key值添加在template内的第一级子元素上.例如: <template v-for="item
2021-05-14 10:28:42
1658
原创 微信小程序rpx及样式的用法
微信小程序中css的尺寸单位是rpx单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素。微信小程序尺寸单位rpx标准微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。建议：设计稿使用设备宽度750px比较容易计算
2021-03-31 10:11:10
1469
原创 微信小程序页面跳转传参，参数过长报错解决办法
在微信小程序的开发中，页面之间的跳转传参是非常常见的。一般参数较少的时候，这样的传参方式很简单。但是有的时候，我们需要传递的参数可能是一个对象，但是这个对象属性很多， 通常的做法是需要先转成字符串（使用用JSON.stringify()转换成字符串）B页面在用JSON.parse()再转换回对象。但是这样的传参方式遇到一个问题，对象数据长度过大时B页面在用JSON.parse()会报错。Unexpected end of JSON input解决办法也很简单如下：A页面传参时：encodeURI
2021-03-31 10:06:07
3062
原创 微信小程序父子组件之间传值
一： 父组件传值给子组件1.在父组件中引用子组件（json文件中）2.在子组件的json文件中把自己定义为子组件3.在父组件中，子组件的引用处，绑定一个属性( text )，并传递想要给子组件的值( parentParam )4.在子组件中的js中使用 properties 获取值，这样就可以在子组件中用 this.data.text 获取到这个值二 子组件传值给父组件1. 子组件在需要传值时，使用triggerEvent传给父组件一个事件( myevent ），并传
2021-03-29 14:40:51
423
原创 微信小程序页面动态修改导航栏标题文字内容
在实际的项目开发中，一般我们页面导航栏的标题文字都不是固定的，而是根据场景需要动态设置的，这个如何实现呢。微信官方提供的方法如下：1.设置动态的onLoad: function (options) {wx.setNavigationBarTitle({ title: options.name })//options.name表示上个页面传过来的文字},2.直接设置onLoad: function (options) {wx.setNavigationBarTitle({...
2021-03-29 14:28:00
2094
原创 微信小程序如何获取openId
微信小程序的开发过程中，有时前端需要获取到openId来使用。那究竟如何获取呢，方式很简单，获取用户OpenID,用wx.login就可以。如下：wx.login({ success: function (res) { console.log(res) if (res.code) { console.log('通过login接口的code换取openid')； wx.request({ .
2021-03-29 14:21:33
2860
8
原创 VSvode插件离线安装方法
我们在开发过程中，如果无法联网，但是还需要给自己的VScode编辑器安装一些代码插件的话，可以使用如下的方法，亲测有效，有需要的可以试试。一、插件下载1、打开 VSCode 插件市场网址Extensions for the Visual Studio family of product，输入你想要的插件名称2、点击进入插件主页，点击右侧的Download Extension链接，得到下载下来的离线安装包，以.vsix为扩展名结尾。例如我要安装微信小程序开发助手插件：3....
2021-03-24 14:58:55
597
原创 vant使用时覆盖默认样式
在我们使用vant的时候，有时候一些组件的默认样式并不能满足我们项目的需求，这个时候我们可以使用下面的办法，覆盖掉默认样式，亲测有效。 // vant覆盖默认样式的写法 ::v-deep .van-cell:not(:last-child)::after { left: 0px !important; }...
2021-03-15 14:51:26
1731
1
原创 移动端H5调试-vconsole安装
在开发H5中当需要调试页面时，有时候我们还需要在手机端进行调试，vconsole就是这样一个工具。vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。vconsole使用起来也比较方便，你可以通过npm或者cdn等方式引入，然后初始化vconsole就可以了1 npm方式安装npm install vconsole2 CDN的方式引入BootCDN提供了不同的版本引入，地址：https://www.bootcdn.cn/vConsole/这样我们在移动端调试
2021-03-15 14:46:25
1295
原创 微信小程序上传图片时校验所选图片是否为身份证图片
在小程序的开发中，有时需求会有上传身份证照片，一般如果没有特殊要求的话，这块可以直接调微信小程序提供的API来实现，但是如果在上传图片的同时还要求校验图片是否为身份证照片时，这就需要做一些处理了。小程序的官方也提供了解决办法，可以使用扩展能力中的0CR插件。官方文档小程序插件文档OCR 支持使用步骤如下：首先打开小程序的后台，点开设置，选择第三方设置。然后找到插件选项，打开并添加ocr支持插件。添加完成后 ，需要领取免费额度，是一天100次。多了就需要购买。链接挂下方https:
2021-03-08 10:53:09
2115
2
原创 微信小程序上传图片（从相册选择或者拍照）
在平时的项目开发中，小程序图片上传应该是经常用到的，话不多说，直接开始。上传图片主要用到的是小程序官方提供的两个API:一个是wx.chooseImage，一个是wx.uploadFile 有不懂的小伙伴可以直接去看官方文档，上面解释的很清楚。下面贴出我项目代码片段，仅供参考。 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], sourceType: ['album
2021-03-08 10:42:19
5281
原创 jQuery对象和js对象的区别与转换
1.什么是Dom对象(js对象)使用js的方式获取到的元素就是js对象2.什么是jQuery对象使用jq的方式获取到的元素就是jq对象3.jq对象和js对象的区别JS对象，是一个名值对的无序集合。jquery对象，是jquery特有的对象，只有调用jquery框架才存在。其实jquery对象，也是一种js对象。jquery对象和js对象可以相互转换，例如$("#div").get(),即可以把一个jquery对象转换为js对象。js对象上的方法，不能直接用在jquery对象上，如果
2021-01-19 15:23:23
499
原创 css实现单行文本截断和多行文本截断显示省略号
在平时的项目开发中，经常会遇到单行文本超出隐藏显示...或者多行文本超出隐藏显示... ,具体实现的方式如下：单行文本.box{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }多行文本.box{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-
2020-12-30 10:54:12
521
原创 理解js中对象的浅拷贝和深拷贝
浅拷贝：只拷贝对象的基础属性值，对属性值为对象或数组的属性则拷贝指针。深拷贝：拷贝对象的所有属性作为一个全新的对象。拷贝前后的对象互不影响。浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。一、对象引用对象引用容易理解，直接赋值，修改复制后的数组，原对象会随之改变。//对象引用var boy = { age:18}var girl = boy;console.log(boy === girl);//truegirl.age...
2020-12-29 15:47:38
266
原创 深入理解js闭包
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。如下：var n=999;function f1(){ alert(n);}f1(); // 999另一方面，在函数外部自然无法读取函数内的局部变量。如下：
2020-12-29 10:44:15
164
原创 html引入公共的头部和底部
我们在做项目的时候经常会遇到一样的头部和底部，如果每个页面都复制一遍，不仅工作量大而且万一需要修改一下文章就更麻烦了，这时候就需要我们把公共部分提取出来，等需要的时候再引入页面。在网上找了好久，也尝试了几次，觉得对前端来说最好的方法就是使用jQuery的load函数，/*导入头部和尾部*/$(document).ready(function(){ $(".footer").load("page/footer.html");});但是注意，此时的footer.html不需要是完整的H.
2020-12-29 10:33:26
976
1
原创 jQuery事件命名空间
event.namespace命名空间是event对象上的一个属性官网栗子：使用场景我们知道在JavaScript中对同一DOM元素使用传统的绑定模型绑定事件，后绑定的事件会覆盖先绑定的事件，也就是某个类型的事件只能有一个处理函数；而使用jQuery则可以绑定多个事件，无论前后绑定的事件都能被触发。(使用原生js，现代绑定方法也可以，addEventListener)例：<button id="button1">按钮</button>JavaScri
2020-12-29 10:27:44
362
原创 移动端rem自适应（最简单的解决方案）
今天主要介绍的是在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局。什么是rem？rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px =
2020-12-29 10:11:25
2573
1
原创 js事件循环机制(Event Loop)
javascript从诞生之日起就是一门 单线程的 非阻塞的 脚本语言，单线程意味着，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务，非阻塞靠的就是 event loop（事件循环），本文就讲解下事件循环。event loop它最主要是分三部分：主线程、宏队列（macrotask）、微队列（microtask）js的任务队列分为同步任务和异步任务，所有的同步任务都是在主线程里执行的，异步任务可能会在macrotask或者microtask里面宏队列（macrot...
2020-12-25 11:49:46
225
原创 js预编译
大家都知道，javascript是解释性语言，主要特点为解释一行执行一行。而在js运行时会进行三件事：1.语法分析 2.预编译 3.解释执行语法分析会在代码执行前对代码进行通篇检查，以排除一些低级错误 预编译发生在代码执行的前一刻 解释执行就是执行代码预编译的作用：1、函数声明整体提升；即写出一个函数声明，不管写在哪里，系统总会将其提升到逻辑最前面。2、变量声明提升例如：document.write(a);var a = 123;//undefinde;即相当于：
2020-12-25 11:07:16
2224
原创 css3设置边框颜色渐变的两种实现办法
很多时候在开发网页的时候，可能因为一些原因需要为边框设置颜色渐变，那么该如何设置颜色边框渐变？本篇文章将为大家介绍使用css3设置边框颜色渐变的方法。我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么两个属性如何设置边框颜色渐变。首先来看border-image属性实现的简单css3边框颜色渐变的例子：第一种：border-image设置边框颜色渐变示例说明：上述代码中你会发现给border-image加了li.
2020-12-25 10:46:10
6156
1
原创 vue项目动态修改网页title(标题)
1 安装npm install vue-wechat-title --save 或 npm install vue-wechat-title -S2使用，在main.js中引用插件import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)3在路由router文件 index.js 中给每个路由添加 titleexport default new Router({ routes: [ {..
2020-12-25 10:24:42
1140
原创 vue H5项目手机端查看控制台console打印
1.安装vconsole 调试：cnpm install vconsole2.在当前页面引入，chorme调试或者手机端调试就能看到Vconsole了，如下图import VConsole from 'vconsole';let vConsole = new VConsole();谷歌浏览器手机模拟器显示如下：真机上显示如下：...
2020-12-17 14:35:42
2051
原创 日期处理类库moment.js 的基本用法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- 脚本 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></scrip.
2020-12-15 17:39:43
322
原创 微信扫一扫扫描二维码跳转到小程序指定页面
1微信公众平台-开发-开发设置-扫普通链接二维码打开小程序2点击添加3设置二维码规则，选择测试范围4 保存后，可根据测试连接生成二维码，通过微信扫一扫功能进行测试跳转5在跳转页面的onLoad中获取二维码中的参数如下：onLoad: function (options) { const {q} = options; if (q) { let urlStr = decodeURIComponent(q); } }...
2020-12-10 17:40:38
7509
2
原创 微信小程序线上根据Source Map文件快速定位错误代码
不废话，直接上流程1 先登录自己的微信小程序后台将Source Map文件下载到本地；2 解压下载的文件，可得到以下目录该目录对应的就是我们小程序分包也就是说，如果我们的页面在packageDynamic包下，我们定位的时候就要使用packageDynamic下的文件如果我们的小程序没有分包的话下载下来直接解压可看到下面如下目录点击解压后的文件夹出现的就是下面的这个图片。3添加一个定位页面，代码入下，copy过去直接运行即可 <!DOCTYP.
2020-12-10 17:29:42
2089
4
Beyond Compare 4.zip(文件及文件夹对比工具)
2022-04-07
fiddler.rar
2022-04-07
PowerShell-7.0.3-win-x64.zip
2020-08-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人