酷酷的Nian-CSDN博客

转载 Vue子组件调用父组件的方法

1、this.$parent.event 调用父组件的方法// 父组件<template> <div> <child></child> </div></template><script> import child from '~/components/dam/child'; export default { components: { child }, me

2021-05-21 11:48:47 472

原创 2021 - $set \ $forceUpdate() 解决改变数组、对象中的值，不能实时渲染更新！

其实是这样的，当你改变数组或者对象中的值的时候，因为他们都是引用类型，都指向的是地址，所以他们不算真正的改变了，因为引用地址都没有改变，那么vue就不会及时的渲染更新！解决办法：$set(list, index, data) // list 想要改变的数组、对象// index 想要改变的下标// data 改想要改变的值...

2021-05-03 11:28:37 314

原创 echarts图标不显示的问题

你可以在echarts绑定的dom标签上添加 style=“height:100%; width:100%;” 即可显示！有时echarts的init初始化绑定的dom只有用Id才可以绑定，class绑定后不显示图标，那么设置宽高100%即可展示

2022-05-08 10:51:38 1869 1

原创 el-scrollbar解决固定表头出现样式问题

1.普通添加滚动条<div class="box"> <el-scrollbar> <div v-for="item in 100">{{item}}</div> </el-scrollbar></div>// css.box{ height: 200px; // 最外层要设置盖度，才能限制它出滚动条呀}.el-scrollbar{ h

2021-06-11 16:20:57 936 1

原创 require.context 实现 “去中心化“ 管理

公司的电信大型项目，200多个路由，那么其中二级路由非常之多，我们首先会想到可以模块化封装子路由，然后循环引入children数组中，如下：// 路由{ path: '/home', name: 'home', component: () =>import('@/views/home.vue'), children: [] // 这里放的是guest这个子路由}// 循环引入children中function pushRouter(name, t

2021-06-09 19:31:35 498 1

原创 js科学计数法转为正常计算结果

// 科学计数法转化数组 handleNum(param) { let strParam = String(param) let flag = /e/.test(strParam) if (!flag) return param // 指数符号 true: 正，false: 负 let sysbol = true if (/e-/.test(strPara

2021-05-24 09:38:11 404

原创 sort数组排序 - 双重排序

需求，前端对其做排序，根据num的值来从小到大排序，但是如果num的值相同时，则id小的排在前面，后台返给的值如下：[ {id: 1, num: 5}, {id: 2, num: 3}, {id: 3, num: 3}, {id: 4, num: 6}, {id: 5, num: 3}, {id: 6, num: 4}, {id: 7, num: 1},]let arr = [{...},{...},{...},{...},{...}...] // 这里arr

2021-05-18 23:07:34 692

原创 2021 - 前端切换Tab的实现 - 标签上自定义属性的获取方法(data-type)

实现1、<div> <button :class="[num == 1 ? 'active':'']" @click="num = 1">按钮1</button> <button :class="[num == 2 ? 'active':'']" @click="num = 2">按钮2</button></div> 实现2、<div> <button id="a" data-type="a"

2021-05-17 10:50:11 792

原创 2021 - vue注册自定义全局组件

1、main.js中注册自定义的全局组件import Loading from './components/Loading.vue'// 注册全局组件 - loadingVue.component('loading', Loading)2、挂载到vue实例Vue.prototype.$http = axios//全局可this.$http调用

2021-05-11 19:05:03 122

原创 2021 - JS精确计算(math.js库)

js计算时,会将十进制转换成二进制,再进行计算,但有些小数转换成二进制时候,出现了无限循环,由于位数有限,所以就出现了截取,所以就导致了再转化成十进制后结果的不精确.所以就出现了: 0.1+0.2 !== 0.3了解math.js.1、安装npm install mathjs --save2、引入import * as math from 'mathjs'3、操作let type1 = math.bignumber(0.1) // 使用math.js转换数据类型，才可

2021-05-11 11:20:23 3404

原创 2021 - 限制 input只能输入纯数字(replace替换方法解决)

限制 input 输入框只能输入纯数字oninput = "value=value.replace(/[^\d]/g,'')"说明：oninput监听value值，如果不是数值，直接变为空链接: 点我了解replace原理.

2021-05-10 11:03:19 1857

原创 2021 - sass预处理器版本问题

用这个版本“node-sass”: “^4.7.2”,“sass-loader”: “^7.0.3”,

2021-04-22 18:56:14 142

原创 2021 - 导入谷歌地图

1、google开发者中申请密钥(YOUR_API_KEY)2.引入在线google map js<script src="https://maps.googleapis.com/maps/api/js?key=yourkey"></script> // yourkey是3、html给容器显示地图<div id="googleMap" style="width:100%;height:380px;"></div>4

2021-04-12 10:06:29 619

原创 2021 - vue解决刷新页面出现白屏的情况

在App.vue中<template> <div id="app"> <router-view v-if='isRouterAlive'/> </div></template><script> export default{ provide(){ return{ reload:this.reload } }, data(){ return{ isRouterAli

2021-03-25 15:30:15 1757

原创 2021 - 密码加密功能(md5)

//md5 引入import md5 from 'js-md5';Vue.prototype.$md5 = md5; // 引入全局// md5全局使用this.$md5('555555') // 注意，参数必须是字符串类型

2021-03-19 16:11:09 207

原创 2021 - 字符串转为二维码图片

下载qrcodejs2插件: npm install qrcodejs2 --save导入：import QRCode from 'qrcodejs2'使用：methods: { this.$refs.qrcode.innerHTML = '' // 清除上一次二维码图片，否则每次生成，图片会累加 qrcode () { let qrcode = new QRCode('qrcode', {

2021-03-19 09:36:21 1255

原创 require与import 的区别

1.import 是预编译加载，意思是在被编译的时候这个文件就会加载出来，就会被写入到内存当中，而require不会2.require 在从上到下执行的时候，才去加载

2021-01-13 13:53:08 83

原创 element-ui实现三级或多级导航菜单循环

<el-menu> <div v-for="(item,index) in submenuList" :key="index">  <el-menu-item :index="item.path" v-if="!item.menuList">{{item.title}}</el-menu-item>

2021-01-02 07:35:13 6870 3

原创 npm 源切换 - nrm的使用

npmnpm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）nrmnrm只是单纯的提供了几个常用的下载包的uri地址，并能够这让我们在这几个地址之间，很方便的进行切换，但是我们每次装包的时候，使用的装包工具都是npmcnpmcnpm类似于npm，也是一个服务器，只是此服务器在国内镜像服务器，下载包速度快，但是此服务器中的包也是从npm服务器中copy过来的，最终包都是npm上的包...

2020-12-14 07:44:49 1121

原创定位百分比问题——`top`、`left`...、‘translate‘的百分比参照谁？

top、left、right、bottom设置百分比基于父元素！首先定位之后,left、top、right、bottom 设置百分比的情况是因为在不同设备下，定位的元素宽高也是不同的，那么这个时候给出固定值显然是不对的。所以用到了百分比translate’的百分比参照自身遇到这个问题的时候，是因为我想把这个元素定位居中，可是我要居中的元素没有宽高，是内容撑起来的，那么我无法设置margin值来让他偏移！translate的作用派上了用场！在我设置top、left为50%的时候，设置translate

2020-11-09 10:52:49 812

转载 css固定定位如何基于父级来定为而不是视口

之前在项目中，遇到了一个场景，需要实现相对于父元素的fixed定位：在父元素内拖动滚动条时，"fixed"定位的元素不能滑动，在外层拖动滚动条时，父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位，不能直接实现我们需要的效果。我们想让特定子元素相对于父元素"fixed"定位，也就是说，剩余的子元素不定位。那我们可以分开来想，如果添加一个祖先元素assistor，有两个祖先元素，一个用于辅助定位，一个用于包裹不定位的内容，这个问题不就解决了吗。像这样实质上是c

2020-11-02 15:42:33 2232 2

原创文本溢出隐藏,最多显示3行

overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

2020-10-23 14:23:01 1261

原创 location对象的属性大全

说明：location 对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性1、location.href 返回当前加载页面的完整URL location.href 与 window.location.href等价2、location.hash

2020-08-07 06:39:55 3627 1

原创 inline-block对margin:0 auto无效

为什么inline-block元素使用margin：0 auto不起作用再次提到上面的考点，这7大属性的值加起来必须是元素包含块的宽度，这里我们假设其他属性均为0，那也就是margin-left + width + margin-right = 包含块的宽度。所以：对于块级元素，当width固定后，margin就能通过margin = (包含块的宽度 - width )/2获得取值而对于inline-block元素（包含行内替换元素比如img等），内容的宽度就是最终的宽度，没有margin-left

2020-06-19 06:57:28 711

原创 require引入的图片和直接引入的图片到底有什么区别？

require 是 node 中的一个方法，他的作用是 “用于引入模块、 JSON、或本地文件”。也就是说如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。而如果使用字符串的话，那么则是一个 string 类型的固定字符串路径。我们知道，src 中引入的图片应该为图片的本身路径（相对路径或者绝对路径），而 vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包

2020-06-07 15:18:10 7589

斜杠青年博客