向着光芒的女孩-优快云博客

2021年2月份有学习完一个SCSS系统教程，现在回顾复习一下当时学习的记录总结。基础入门笔记总结目录1.sass和scss的区别2.声明变量3.嵌套4.混合5.继承6.import 和 partials7.注释8.数据类型9.运算10.数字函数11.字符串拼接12.颜色13.列表14.map类型15.布尔值16.interpolation17.控制指令 @if,@each,@for,@while18.用户自定义函数19.警告和错误目录1.sass和scss的区别(1)可以看作scss是sass的

2022-07-04 23:47:29 1929

原创【小程序】微信小程序页面跳转笔记

微信小程序页面跳转不生效排查，原来设置了TabBar的需要用switchTab来进行跳转。

2022-06-26 17:18:45 1274

原创【前端笔记】HBuilderX通过微信开发者工具预览打开不了探索过程

第一次通过HBuilder运行到微信开发者工具预览发现失败，原来关键有两步需要设置，记录探索过程，方便后期查阅。

2022-06-24 16:35:04 2841

原创【前端笔记】vue-router获取所有路由getRoutes()调用报错_router.default.getRoutes is not a function

调用getRoutes方法报错_router.default.getRoutes is not a function

2022-06-20 15:21:21 10090 4

原创【前端笔记】 Vue 报错: Do not use built-in or reserved HTML elements as component id: a

vue组件的命名不要与html的原生标签名字一样

2022-06-15 16:13:34 945 1

原创【vue 】element配置全局或单个Dialog点击遮罩不关闭

在很多编辑信息弹框，尤其后台管理系统，如果一点击遮罩关闭弹窗，再次点开弹窗又做了重置表单的操作会导致用户操作数据丢失，可以设置点击遮罩不关闭弹窗。

2022-02-10 15:55:57 4677 2

原创【CSS】画优惠券锯齿边框样式

通过css就可以画锯齿的优惠券样式，这样画出来的优惠券背景非常高清。

2022-02-08 18:13:32 2619

原创【前端笔记】微信开发者工具npm构建报 SyntaxError: Invalid number (312:30)

解决历程：在npm安装完东西后，点微信开发者-工具-构建npm时发现报错，之前是npm安装依赖命令有写错，因为我是初始化项目，所以把node_modules文件夹和miniprogram_npm文件夹删除了，我把package.json也删除了（旧项目谨慎删除），再重新npm init生成package.json,敲正确命令安装完依赖后，再点npm构建发现没报错了。总结：可能是因为安装依赖时命令敲错了，导致生成的node_modules文件夹有点问题，最终导致微信开发者工具构建npm失败，先总..

2022-01-11 13:07:50 3127

原创【前端笔记】微信开发者工具 unable to get local issuer certificate 解决记录

公司电脑老是报这个，如果不解决这个问题，就以为着没法工作了，最后终于给解决能刷出二维码了。

2022-01-09 15:30:26 1258

原创【夯实基础】 js获取的clientHeight、offsetHeight和scrollHeight的区别

clientHeight、offsetHeight和scrollHeight的区别clientHeight = content + padding, 不加溢出内容的高度，返回整数offsetHeight = content + padding+border, 不加溢出内容的高度，返回整数scrollHeight = content + padding+溢出内容的高度，不加border，返回整数MDN建议获取精确的通过 element.getBoundingClientRect() 函数亲测

2021-12-31 18:32:38 546

原创【Angular】文本溢出鼠标移上去时显示全部的气泡卡片组件

在使用ng-zorro-ant的table时，发现并没有自带element那种单元格文本溢出显示，element的table设置这个show-overflow-tooltip就能轻松使用。1.新建一个组件more-popovermore-popover│ more-popover.component.css│ more-popover.component.html│ more-popover.component.spec.ts│ more-popove.

2021-12-30 18:21:57 1850 1

原创【夯实基础】创建10个点击能弹出对应的下标的标签元素

方法一：通过闭包实现，弄个立即执行函数保存变量值var i ; // 通过var声明时没有块级作用域for(i = 0 ;i < 10; i++){ (function(i){ var a = document.createElement("a"); a.innerHTML = i + "<br>"; a.addEventListener('click',function(){ alert(i)

2021-12-27 22:19:28 355

原创【夯实基础】总结js中哪些值转换为Boolean类型为false?

情形-0，0 或 NaNundefinednull空字符串false本身参见：ECMA标准 | ToBoolean ( argument )

2021-12-23 10:50:39 520

原创【Angular】离开页面怎么使用destroy钩子函数来触发

不想每次都找其他文件的代码，整理一下以便后期查阅。1.在对应的component.ts文件引入import { Component, OnInit, OnDestroy } from '@angular/core';2.在对应的component.ts文件export处export class detailComponent implements OnInit,OnDestroy {}3.在对应的component.ts代码里面使用export class detailCompone.

2021-12-22 15:09:19 1590

原创【js】0 == null 和 0 == undefined 转换结果为什么false

记得0转换为布尔类型的值是false，众所周知null == undefined是为true，本以为 0 == null 和 0 == undefined也为true,但答案结果却为false。0单独在if语句是会转换为false的if(0){ console.log('0在if语句转换true');}else{ console.log('0在if语句转换为false');}打印结果如下：百思不得其解故查询了一下，得到了网上的答案：相等运算符用于比较两个值，返回true或.

2021-12-21 14:34:50 2193

原创【Angular】ng-zorro-ant跟后端接口交互使用loading加载

经常需要在表格获取后端接口数据时显示loading,获取完成或者失败时loading结束，用table来进行总结一下，成功和失败隐藏loading只需要在一个地方配置。

2021-12-20 17:18:34 1348 4

原创【Angular】ng serve开服务器后通过局域网ip访问不了解决方案

自己用局域网的ip访问自己开的服务器都不行，防火墙和代理都检查过了，又测试vue项目是可以的，查询了下angular项目要配置一下。所在的项目配置了一下package.json文件，start命令后加入 --host 0.0.0.0发现成功了，核心代码如下：{ "scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.config.json --open --host 0.0.0.0", "build.

2021-12-15 14:28:28 5489

原创【Angular】使用高德地图比例尺心得总结

项目里是使用的ngx-amap<ngx-amap [resizeEnable]="true" [center]="[116.397428, 39.90923]" [zoom]="13" class="map-container" (naReady)="onMapReady($event)">  <amap-tool-bar></amap-tool-bar></ngx-amap> .map-container

2021-12-09 11:36:08 1338

原创【Angular】在html和ts中引用图片路径前端笔记

在angular中使用图片发现出不来，尤其是echarts的配置中，后来就去研究了一下，记录笔记总结一下方便以后使用，如果你搜到本文也希望能给你提供帮助。图片方式1：相对路径<img src="../../../../../assets/img/dotted.png"> 图片方式2：assets路径<img src="assets/img/dotted.png" > 图片方式3：asset根路径<img src="/assets/img/dotted.p.

2021-11-24 15:36:59 2375

原创【js】es6 可选链 ? . 和空值合并 ? ? 运算符使对象多层判断更简洁

es6可选链?.1.在调用函数里使用如果我们多层的调用，直接调用当中间某层不存在时代码就会报错，如直接不判断调用 ref.componentRef.instance.ngOnDestroy()，当中间某一层如instance不存在时就会报错发现判断某个对象的函数存在才调用，通过使用es6的可选链非常方便，分享如下：ref?.componentRef?.instance?.ngOnDestroy?.();相当于if (ref && ref.componentRef &&a

2021-11-23 10:47:20 936

原创【Angular】angular2+中没有*ngShow/ng-show，取而代之的是hidden

场景之前写过angularjs，就是1版本的angular，用过ng-show，然后我在angular2中也想通过css样式来隐藏元素，结果发现根据*ngIf的惯性写*ngShow时报错，也没有ng-show，要想实现这个功能则要通过hidden属性关于hidden使用hidden时的逻辑跟ng-show或者vue里的v-show相反即可，如下：<h3 [hidden]="!favoriteHero"> Your favorite hero is: {{favoriteHero}

2021-11-22 17:40:03 3128

原创【Angular】如何让ng-zorro-ant菜单刷新时自动展开父结点和选中子节点

核心代码：<li nz-submenu [nzOpen]="rla1.isActive" #rla1="routerLinkActive" routerLinkActive> <span title><span class="nav-text"> 用户管理</span></span> <ul> <li nz-menu-item [nzMatchRouter]="true"><a routerLink=

2021-11-16 16:15:03 1780

原创【Angular】ng-zorro-ant表格切换pageSize页数选择器不生效解决方案

使用场景：发现在使用nz-table的过程中，当页数选择器选择10和10以下的表格数据条数会重新渲染，排查了好久发现，只要大于10就不生效了，一页最多总是显示10条看官方简单的使用例子也没发现问题所在：<nz-table #basicTable [nzData]="dataSet"> <thead> <tr> <th>Name</th> <th>Age</th> &l.

2021-11-09 14:59:23 1379

原创【前端笔记】js监听网络断开和网络恢复事件

核心代码 window.addEventListener("online", (function() { alert('网络连接上了') })); window.addEventListener("offline", (function() { alert('网络断开了'); }));测试方法通过浏览器调试器Network面板启动网络开启和关闭可进行测试关闭网络触发和提示测试开启网络触发和提示测试...

2021-10-12 10:42:52 1649

原创【vue-cli】使用es6的可选链?.操作符报错Module parse failed解决记录

使用场景：发现项目有些旧代码多层调用某个对象的属性，由于目标对象可能没那个属性，就导致报错，之前研究es6新特性时发现可以用?.来判断某个对象是否有某个属性来赋值。测试源代码：var a = { name: 'hello'}var b = a?.name;console.log('a',a,'b',b)在vue-cli中发现用不了：后面尝试去解决，成功后浏览器控制台能打印出来解决过程因为我们这个项目是用的vue-element-admin,我自己在另外一个vue-cli工程.

2021-07-30 15:08:51 14149 10

原创【vue】vue-cli3配置scss全局变量

由于想在vue文件中使用scss变量，所以想配置一下全局使得更方便使用和维护，package.json中对应的版本号是："@vue/cli-service":"3.5.3"、"sass-loader": "^7.1.0"1.配置在项目根目录下的vue.config.js中配置module.exports = { css: { loaderOptions: { // 没有分号会报错 sass: { data: `@import "@/assets/.

2021-06-30 12:26:07 1159 5

原创【html5】视频video标签自动循环播放设置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>榜样&

2021-06-06 12:25:54 7147 8

原创【前端笔记】es6入门学习记录

关于es6版本广义的es6指的是2015年发布es6之后的新版本，更细的划分：2015 es6 2016 es7 2017 es8 2018 es9 2019 es10 2020 es111.数值扩展1).Number.isNaN与isNaN的区别Number.isNaN不存在类型转换的行为，而isNaN会尝试将参数转换为Number类型。isNaN只是判断传入的参数是否能转换为数字，并不是严格的判断是否等于NaN数值；而Number.isNaN判断传入的参数是否严格等于NaN这个数值。参

2021-05-13 12:31:34 226 3

原创【vue】重置vue初始化声明的data的某个数据(附在线演示)

使用场景：在使用element和ivew的表单重置时，发现this.ref[′formData′].reset()，这种方法未将我们预期的数据全部还原为声明时的数据，导致有脏数据，vue的api通过ref['formData'].reset()，这种方法未将我们预期的数据全部还原为声明时的数据，导致有脏数据，vue的api通过ref[′formData′].reset()，这种方法未将我们预期的数据全部还原为声明时的数据，导致有脏数据，vue的api通过options可以拿到声明时的数据,如果在表单中清空

2021-04-27 20:22:58 3539

原创【前端笔记】js计算两个日期差多少天

只是粗略的计算，对差额的时分秒毫秒没有做更具体的处理，原理是通过时间戳计算两个时间点的毫秒差，再换算为天方式1：(new Date('2021/04/22').getTime() - new Date('2021/04/20').getTime())/1000/60/60/24 // 2方式2：function diffDay(lastDate,earlyDate){ return (Date.parse(lastDate) - Date.parse(earlyDate))/1000/6

2021-04-23 12:31:37 6456

原创【vue】封装下拉框option静态数据

之前在vue-cli中，有些静态下拉框数据都写在每个vue页面文件里，发现有些页面也会使用一样的，所以想着把它抽出来方便管理和查看思路总结1.创建一个js文件在src/libs目录(看项目目录结构灵活放)下创建 options.js , 先只写了一个，文件内容如下：export const userStatusOpt = [ { value: 0, label: '禁用' }, { value: 1, labe

2021-04-08 14:18:13 890

空空如也

空空如也