拾荒旧痕-CSDN博客

需求：增加顶部滚动条，方便查看表格里面隐藏在后面的数据1. el-table(elment-ui) 的实现方法table表格上面添加一个div,外层设置为100%，内层div(内容区域)设置为table内容宽度  <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrol

2022-05-20 11:27:56 2567 3

原创 el-upload上传多张图片可预览，图片上传做压缩element-ui

项目里面涉及图片上传的功能，要图片可以预览，上传的时候图片大了要做压缩图片上传以及预览<Form-item label="图片详情" prop="imageUrl"> // Form-item 做了图片必传校验；不需校验不用写 <el-upload class="avatar-uploader" :action="action" // 必选参数，上传的地址 :headers="headers" list-type="picture-c

2022-05-18 09:54:05 1357

原创 JS获取当前时间戳与时间戳转日期时间格式

一、获取当前时间的时间戳(三种方式)const t1 = new Date().valueOf() // 第一种，推荐const t2 = new Date().getTime() // 第二种，推荐const t3 = Date.parse(new Date()) // 第三种，不推荐，精度差一些注： new Date()得到的是一个时间对象const times = new Date() // Sat Apr 16 2022 11:07:38 GMT+0800 (中国标准时间)二、

2022-04-16 11:32:28 56726

原创 ES6的常规用法与便捷使用

一、解构赋值获取一个对象里面的属性的值const obj = { A:1, B:2, C:3, D:4, E:5,}const { A,B,C,D,E } = obj || {}注意：解构赋值的时候要保证obj不能为null，undefined,要不然会报错。一般的处理就是给它设置一个默认值 {}。解构赋值重命名var obj = { A: “libai”,};var { A } = objvar { A: A2 } = obj

2022-04-06 10:30:23 852 2

原创安装node-sass与node js 冲突

问题：报错提示node-sass与当前环境的node.js版本不符合，我这里的node js 版本是14.15.0我开始 yarn命令安装所有依赖的时候也报错了，也是提示版本问题，后面发现 node.js 14.15.0的版本其实没问题解决方案一首先在package.json里面移除"node-sass"和"sass-loader" (在devDependencies里)安装所有的依赖 yarn 或者 npm install单独重新安装 node-sass和sass-loader，ya

2022-03-25 16:56:30 1791 2

原创 yarn的安装与配置以及yarn命令无效的原因

下载与安装1. 官网安装yarn官网地址2. 使用npm命令安装在此之前必须已经安装了 node 和 npm( node 自带 npm)，NodeJS 安装及环境配置/*全局安装yarn*/ npm install -g yarn配置1、环境变量配置环境变量其实原理很简单，就是把你安装的文件目录添加到 Path 系统变量中，这样在执行的时候就能够找到这些文件。所以只需要把下面的路径（安装路径）添加到 Path 中即可。选中到bin目录即可。yarn命令无效的原因1、目录选择错误

2022-03-17 22:25:08 12833 1

原创 2022前端高频面试题（持续更新中）

一、HTML部分1、html5的新特性H5相关二、CSS部分1、盒子模型盒模型的组成，由里向外content,padding,border,margin。在IE盒子模型中，width表示content+padding+border这三个部分的宽度。在标准的盒子模型中，width指content部分的宽度。 box-sizing: content-box 是W3C盒子模型 box-sizing: border-box 是IE盒子模型...

2022-03-06 14:13:53 361 5

原创 JavaScript数组去重的方法

方法一：遍历数组( for of )，配合indexOf方法var list = [1,3,9,6,6,9] function quchong () { const newList = [] for(let value of list) { if(newList.indexOf(value) == -1){ newList.push(value) } } return newList } console.log(qu

2022-03-02 23:01:20 147

原创 VScode中自定义代码模板

文件 > 首选项 > 新建全局片段文件 > 文件取名2.配置模板，里面有三个属性不能乱改；prefix ，body，description3.最后在文件里面输入 prefix:属性对应的名字（我这里是 temp）,按下回车就是会显示模板内容了...

2021-10-21 18:02:15 209

原创表单自定义校验获取的value为undefined(element ui)

表单自定义校验先看一段官网代码(取了一小部分)：<el-form :model="ruleForm" :rules="rules"> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item></el-form> export default { data(

2021-09-06 16:49:34 7020 5

转载对象的key值进行排序(js)

function objKeySort(arys) {//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组var newkey = Object.keys(arys).sort();　　//console.log(‘newkey=’+newkey);var newObj = {}; //创建一个新的对象，用于存放排好序的键值对for(var i = 0; i < newkey.length; i+

2021-08-25 16:34:17 6602

转载 vue中的深度监听（监听一个对象的全部属性、监听一个对象的一个属性）

<div> <p>obj.a: {{obj.a}}</p> <p>obj.a: <input type="text" v-model="obj.a"></p></div> new Vue({ el: '#app', data: { obj: { a: 66, b:'总' } }监听一个对象的全部属性： watch: { obj:

2021-06-12 09:52:47 2698

转载 vue生命周期（超详解！）

在Vue官网上一篇讲到了Vue实例以及它的生命周期，这里我将实例生命周期的图截了下来如下：我们可以看到在Vue实例的整个生命周期中，会有八个生命周期钩子函数提供给我们，方便我们在不同时期进行不同操作，八个钩子函数如下：beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed先一起来看看下面代码的打印结果：<!DOCTYPE html><html>

2021-06-11 18:39:38 550

原创父子组件，非父子组件传值（组件传值必看！）

一：父组件向子组件传值：father：<template> <father> <son :message="msg"></son> (message动态绑定msg数据，必须v-bind:动态绑定) </father></template><script>export default { data(){ return { msg: "父亲" } }}&lt

2021-06-07 00:46:35 233

转载 CSS3新特性（面试必看！）

一、新选择器：E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应E：frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素E：empty 选择没有子元素的每个E元素E:target 选择当前活动的E元素::selection 选择被用户选取的元素部分属

2021-06-05 14:49:24 521

原创移动端布局px转化为rem

问题：为什么要将px转化为rem呢？因为在移动端，很多设备的宽度和高度是不一样的。所以呢我们就不能使用px把宽度大小写死。而rem是相对HTML根元素的font-size的大小而言的。所以我们就希望在不同的设备的里面，css的样式会有一样的效果。正文如下第一步：npm i postcss-plugin-px2rem --save官网：https://www.npmjs.com/package/postcss-plugin-px2rem第二步：在src目录同级创建setRem.js文件s

2021-05-06 16:54:23 568

空空如也

空空如也