- 博客(55)
- 收藏
- 关注
RSS订阅原创 vue3.x全局toast、message、loading组件
vue3.x全局toast、message、loading组件Toast组件loadingToast组件在 src/components下创建toast文件夹，并依此创建index.vue和index.js1、index.vue一般toast会有如下功能：背景色、字体颜色、文本、停留时间<template><div class="toast-box" > <p class="toast-value" :style="{background: backgr
2022-03-14 11:56:21
3724
原创 单点登录（SSO）
什么是单点登录？单点登录的来源单点登录技术实现Cookie的属性详细介绍Koa Cookie 的设置与获取利用Node.js koa异步中间件——用户登录验证拦截器
2022-01-26 15:08:58
23110
原创 React 项目开发问题积累
React 开发问题积累1. 修改antd的组件样式2. antd级联选择框（后台数据渲染）1. 修改antd的组件样式问题：直接修改样式好像不起作用，直接在组件上加style行内样式也不生效方案：用 :global样式穿透全局样式直接使用:global{ .antd-list{ ... }}局部修改样式可以在组件外层的容器加上类名.box{ :global{ .antd-list{ ... } }}2. antd级联选择框（后台数据渲染）问题：将后台返回
2021-09-15 19:31:41
580
原创 前端 进阶
JavaScript 进阶文章目录JavaScript 进阶前言1. JS内置数据类型前言1. JS内置数据类型1.1 【可选】 基本类型: 当你访问一个基本类型时，直接操作它的值。JavaScript 的数据类型有下图所示：
2021-08-24 13:03:28
739
2
原创 前端开发问题记录
小程序开发问题记录多行省略（小程序）image 图片底部留白单元素如何实现：文本、边框渐变；且边框满足移动端细边框效果（小程序）在util.js中使用getApp()这个函数，打印显示undefined多行省略（小程序）image 图片底部留白原理：图片的 display 属性默认是 inline，这个属性的vertical-align的默认值是baseline。所以图片底部会出现一个小留白区域。解决：方法1：设置图片为块状元素 display:block;方法2：修改 vertical-al
2021-07-06 16:37:54
111
原创 移动端适配（必须要知道的，亲测有效）
web移动端最强适配（亲测有效）视口(viewport)适配rem单位适配flexible方案长屏短屏布局适配ios安全区域(Safe Area)适配横竖屏适配CSS Media Querieswindow.orientation软键盘的弹出-影响横竖屏判断的情况游戏接入h5页面强制竖屏时遇到的问题横竖屏旋转canvas需要重新绘制常见问题1px问题图片模糊问题全屏背景参考文档视口(viewport)适配meta元素 元数据信息。 告诉浏览器如何解析页面。借助meta元素的viewport来帮助我们设
2021-05-28 16:08:36
2390
原创 js rem 单位适配（手机、平板、PC）？
js rem单位适配<script type="text/javascript"> // 设备区分 （安卓、火狐、平板、PC） var os = function() { var ua = navigator.userAgent, isAndroid = /(?:Android)/.test(ua), isFireFox = /(?:Firefox)/.test(ua), isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAn
2021-04-26 09:42:13
1055
1
原创 css媒体查询（手机、平板、PC）
css媒体查询PC端按屏幕尺寸整理?通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度1024 1280 1366 1440 1680 1920超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器(≥992px)大屏幕 大桌面显示器 (≥1200px)/* 超小屏幕（手机，小于 768px） */@media (max-width: 768px) { ... }/* 小屏幕（平板，大于等于 768px） */@media (min-w
2021-04-25 11:55:47
3358
1
原创 css-如何对每行中最后一个元素删除边距？
文章目录前言一、负边距一、nth-child()系列)前言如何从最后一列的每个元素中删除边距？在元素宽度不确定的情况下，或者如果屏幕很小或用户调整浏览器大小，则每行排列的个数就不确定因此，在任何情况下，最后一列中出现的任何元素(可以是一个或多个然后是一个)。我想删除margin-right。除非您确切知道每行有多少个元素(通过选择器的nth-child()系列)，否则无法使用纯CSS在每行的特定元素上删除或添加样式。<ul> <li>item 1</li&g
2021-02-26 14:55:13
4084
2
原创 Vue组件强制刷新（重新渲染）的四种方案对比
文章目录前言一、刷新整个页面二、使用v-if标记三、forceUpdate四、key-changing五、应用场景vue具有缓存的页面的强制刷新进入页面输入框自动聚焦前言Vue的双向绑定属于自动档；在特定的情况下，需要手动触发“刷新”操作，目前有四种方案可以选择：刷新整个页面（最low的，可以借助route机制）使用v-if标记（比较low的）使用内置的forceUpdate方法（较好的）使用key-changing优化组件（最好的）一、刷新整个页面router.go(0)二、使
2021-02-22 15:17:11
26456
1
原创 CSDN Markdown编辑器编辑教程
目录快捷键文字样式设置（字体, 大小, 颜色, 高亮底色）内嵌HTML表格定义列表代码块脚注数学公式UML 图:离线写博客常见颜色@[TOC](目录)快捷键- 加粗 `Ctrl + B` - 斜体 `Ctrl + I` - 引用 `Ctrl + Q` - 插入链接 `Ctrl + L` - 插入代码 `Ctrl + K` - 插入图片 `Ctrl + G` - 提升标题 `Ctrl + H` - 有序列表 `Ctrl + O` -
2021-01-28 11:31:14
173
1
原创 小程序、vue 新闻上下轮播
小程序、vue 新闻上下轮播vue小程序红色部分：相当于放映机，也就是容器，overflow：hidden绿色内容：相当于胶片，也就是domvuevue的核心之一，数据驱动模版，循环播放映射的数据上就是 [1,2,3,4,5,6] —》[2,3,4,5,6,1] —》 [3,4,5,6,1,2]动画是数据调整一次就执行一次<ul :class="{'comm__qa-transitoin':animate}"> <li v-for="item in list" :key="
2020-12-07 18:16:30
540
1
原创 HTML中各种 div 位置距离关系
HTML中各种 div 位置距离关系一. 盒模型图片展示：二. 位置距离计算属性三. 经典例子一. 盒模型图片展示：二. 位置距离计算属性offsetWidth, offsetHeight获取盒子的宽度/高度（包括盒子的border，padding和内容width/height）,不包括外边距offsetLeft获取盒子当前位置(左上角)距离自己最近定位的父元素左侧的距离，如果没有最近的定位的父元素，则相当于HTMLoffsetTop获取盒子当前位置距离自己最近定位的父元素顶部
2020-11-18 10:50:50
8022
1
原创 买房攻略整理
买房需谨慎买房动机（咋决定的买房？）1. 动机方向：投资、早晚刚需、立马刚需买房心得（没了解这些，你就敢买房？）1 城市的选择2 首付买房需谨慎（先了解别人都有哪些套路，免得掉坑）买房动机（咋决定的买房？）1. 动机方向：投资、早晚刚需、立马刚需1 ）投资：过去买房的人都赚了，有些人还是觉得房子会涨价，股票理财风险太高，把钱房进银行吧还嫌利率太低。于是就想着买房子赚钱，搞房地产投资友情提示：并不是房子涨价了就赚钱。首付用来买房子就错失了这笔钱的机会成本，把钱放银行利率再低也是钱。200万存银
2020-11-16 16:15:04
344
1
翻译 Fiddler 抓包详细使用教程
主要抓包工具介绍与对比（一）Fiddler介绍（二）Fiddler与其他工具对比（三）工作原理（四）下载安装（五）Fiddler界面概述1 主菜单说明2. 快捷菜单说明3.会话列表说明4. 右侧选项卡1）Statistics 请求的性能数据分析2） Inspectors 查看数据内容3）AutoResponder 重新定向，允许拦截指定规则的请求4）Composer 自定义请求发送服务器5）Fiters 请求过滤规则6）Timeline 请求响应时间（六）pc端浏览器、window软件、手机移动端进行抓包1
2020-10-22 18:23:24
3129
翻译 小白如何从零开始运营微信公众号？
一、公众号定位，名称，头像第一步公众号定位，最重要。如果你自己都讲不清楚自己是干嘛的，还有谁愿意来关注你呢？无论是旅游攻略还是美妆种草，成长干货还是养生健康，你想做哪一类型的博主，一定要先想好，想好了再去注册。如何定位：1、你的偏好——做你感兴趣的东西2、你的优势——做你擅长的东西3、用户的需求——用户来你这里想获得什么最后一点，是我在运营期间发现的最重要的一点。用户的需求：公众号的种类千奇百怪，只有想不到，没有搜不到，但是能够真正活下来的公众号却没有那么多。我们在选择定位的时候，要避.
2020-09-16 15:45:51
15179
2
原创 Vue模板语法详解
双大括号（Mustache语法，又叫胡子语法）动态赋值语法<div id="app"> <h2>{{message}}</h2> <h2>{{message+message}}</h2> <h2>{{m*2}}</h2> <h2>{{m > 100 ? '大于100' : '小于100' }}</h2></div><script src
2020-08-17 17:34:17
1751
2
原创 Vue项目搭建流程
基础流程1.安装node主要用于使用npm包管理器，配置npm的环境变量安装包下载官网地址：https://nodejs.org/zh-cn/（推荐使用长期LTS版，长期支持，稳定）注意下载的位数，默认是win10的64位，下载mac，win7，32位等可点击官网顶部的下载。直接一直下一步安装即可，可以更改安装路径，但还是建议默认路径安装。2.全局安装脚手架只需安装一次即可，两者都安装执行安装3.X版本安装npm install -g @vue/cli低版本安装npm in
2020-08-14 11:13:45
238
1
原创 Vue开发规范
规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档命名规范为了让大家书写可维护的代码，而不是一次性的代码让团队当中其他人看你的代码能一目了然甚至一段时间时候后你再看你某个时候写的代码也能看css命名规范遵循bem命名规范（bem命名规范官方文档）1）块：具有独立意义的实体（eg: header、container、menu、form、input）2) 元素：块的一部分，没有独立意义，与块语义相关3）修饰符：块、元素的修饰标志，使用修饰符更改某些外观、行为
2020-08-07 16:25:03
434
1
原创 评论 展开|收起
1）根据判断字符串长度区分是否做收缩处理特点：简单，有空行隐患<template> <!-- 话题 简介 组件 --> <div class="intro"> <div ref="introContent" class="intro__content" :class="{'intro__content-close': this.intro.length > 100 && !isOpen}">
2020-08-03 18:27:28
1567
1
原创 vue开发问题积累
mounted钩子中使用$refs出现undefined原因：如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的。**解决方法：**如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段。在update阶段使用this.$refs.xxx，就100%能找到该DOM节点。...
2020-07-28 09:19:09
224
原创 前端字符串内HTML标签无效的处理方式
1）将元素的innerText 赋值成 元素的 innerHTML。即可避免转义的问题，将字符串中包含的 HTML标签生效。<div ref="introContent" class="intro__content">{{intro}}</div>mounted() { // let text = this.$refs.introContent.innerText; // this.$refs.introContent.innerHTML =
2020-07-24 09:26:45
1806
原创 html2canvas生成海报的各种问题
基础写法<div @click="handlePoster()" class="btn">生成海报</div><div id="weeklyPoster" ref="weeklyPoster" class="poster"> <h1>poster content</h1> <img class="poster__logo" src="./assets/img/share-logo.png" alt="" crossOrigin="an
2020-07-15 15:36:50
2808
原创 gulp+PC前端静态页面项目开发
前言：现在单页面很流行，但是在 PC 端多页面还是常态，所以构建静态页面的工具还有用武之地gulp构建前言：很多时候我们在写静态页面的时候也希望能和后台模板一样，将导航、页头、页脚等公用的部分分离出去，然后引入页面中。单纯的静态页面不具备这种功能，而使用 gulp 插件可以很容易的完成，比如 gulp-file-include 插件。gulp构建基础入门：创建初始化项目：node --version //检查node，npm和npm是否正确安装npm rm --global gulp //
2020-07-03 10:46:41
676
原创 vscode 开发常用
设置缩进空格：2个| 4个文件–》首选项–》设置代码缩进对齐 ：Ctrl + [ 和 Ctrl + ] 实现文本的向左移动或者向右移动；Shift + Alt + F 实现代码的对齐
2020-07-02 11:10:19
76
原创 JavaScript 函数循环、延时、节流、防抖
函数循环(setInterval)间隔指定的毫秒数不停地执行指定的代码<button onclick="myStartFunction()">开始</button><button onclick="myStopFunction()">停止</button><script>var myVar = null; //全局function myTimer(){ var d=new Date(); var t=d.toLoc
2020-06-28 15:41:16
245
原创 git教程
Git创建关联远程分支git checkout -b my-test //在当前分支下创建my-test的本地分支分支，并切换到新分支（-b）git push origin my-test //将my-test分支推送到远程git branch --set-upstream-to=origin/my-test //将本地分支my-test关联到远程分支my-test上 git branch -a //查看远程分支 ...
2020-06-15 14:25:53
240
原创 前端公共reset.css模板
简介学习地址： https://meyerweb.com/eric/tools/css/reset/重置样式表的目的是减少浏览器在默认行高，标题的边距和字体大小等方面的不一致。重置样式特意是非常通用的/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1,
2020-06-12 10:54:44
458
原创 vue 按A-Z字母排序数据
<template> <!-- 选择游戏 --> <div class="game" :class="{'game__spacing': selectedGame.length > 0}"> <!-- 搜索 --> <div @click="searchGame" class="game__search"> <div class="game_
2020-06-11 14:18:57
2565
原创 vue 输入框获取焦点
<input @keyup="searchGame" ref="searchInput" v-focus class="game__search-input" type="text" placeholder="搜索" v-model="searchGameName"> <div @click="handleKey" class="game__pop-key-search"></div>&
2020-06-11 12:04:10
7066
原创 vue Method 事件
简介vue事件监听通过v-on指令配置在HTML中，相当于原生的addEventListener。所有的vue事件处理方法和表达式都严格绑定在当前视图的ViewModel上，采v-on指令有如下好处：1）通过查看HTML模板便能轻松定位对应的方法2）ViewModell和DOM完全解耦，易于测试3）当一个ViewModel被销毁，所有的事件处理器都会自动删除如何绑定内联方式：//绑定单击事件处理器click<div v-on:click="greet">点击问候</div&
2020-06-02 22:53:54
6555
原创 GItHub--Makedown语法学习（快速入门）
段落支持两种标题的语法：Setext 和 atx 形式Setext形式：利用 = （最高阶标题）和 - （第二阶标题）标题1===标题2---Atx 形式：在行首插入 # 即可。可以增加一级标题、二级标题、三级标题、四级标题、五级标题和六级标题代码块使用 email 形式的 ‘>’ 角括号> Markdown 支持两种标题的语法，Setext 和 atx 形式> Markdown 支持两种标题的语法，Setext 和 atx 形式> Markd
2020-05-18 17:16:56
373
原创 Javascript 对象二（Number、String、Boolean、Array、Date、Math、RegExp）
Number 数字 对象JavaScript中 数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型。有 JavaScript 数字均为 64 位精度：整数最多为 15 位，小数的最大位数是 17八进制：前缀为 0。绝不要在数字前面写零，除非您需要进行八进制转换。十六进制： 前缀为 0 和 “x”输出16进制、8进制、2进制的方法：使用 toString() 方法var myNumber=128;myNumber.toString(16); // 返回 80myNumber
2020-05-14 11:48:58
360
原创 动画 自制弹框上滑+渐显效果
<view class="mask {{showShare ? 'slidefadeUp' : 'slidefadeDown'}}" wx:if="{{showShare}}" catchtouchmove="false"></view>/* 上滑+渐显效果 */.slidefadeUp { animation: slidefadeUp 0.5s 1 ease forwards; -webkit-animation: slidefadeUp 0.5s 1 eas
2020-05-09 10:53:18
226
原创 小程序 开发经验
项目目录理解components自定义组件库config一个公用的数据配置images本地、上传的图片放置pagespages目录存储小程序的每个页面，每个页面包含四个文档.json为配置文件.wxml 为模板文件，相当于HTML模板.wxss 为样式文件，相当于HTML的CSS样式表.js 为JS 脚本逻辑文件，相当于HTML的js脚本utils一个共用程序逻辑库公共的js函数文件，通过module.exports的方式暴露pages下的每个页面使
2020-05-09 10:51:17
293
1
原创 小程序 省市区县三级联动选择器（caseCade）
picker组件<view class="section"> <picker mode="region" bindchange="bindRegionChange" value="{{region}}"> <view class="picker"> 省市区选择: {{region[0]}} {{region[1]}} {{region[2]}} </view> </picker></view>.
2020-05-09 10:25:44
361
原创 小程序 获取当前用户地址及地图显示
步骤使用 wx.getLocation来获取当前位置：注意;当用户取消位置获取授权之后,再次点击获取位子按钮小程序不会再提醒用户是否授权,这个时候最好自己弹出提示框让用户去设置页面开启授权设置.wx.getLocation({ type: 'wgs84', //wgs返回 gps坐标， gcj02返回可用于wx.openLocation 的坐标 altitude: 'false' //true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度 success (res) { /
2020-05-09 10:22:55
521
原创 小程序 获取当前用户城市信息（省市区）
步骤使用 wx.getLocation来获取位置授权：获取到设备当前的地理位置信息，这个信息是当前位置的经纬度使用其他第三方地图服务的API：获取当前位置是处于哪个国家，哪个城市等信息（eg：腾讯地图、百度地图）。以腾讯地图为例 去腾讯地图开放平台注册一个账号，然后在它的管理后台创建一个密钥(key)。在我们的代码中调用这个API。该API可以通过JSONP的方式调用，也可以在服务器端发起调用。具体步骤知识参考：https://lbs.qq.com/guides/startup.html代码
2020-05-09 10:16:47
3521
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人