YoHoo-2020-CSDN博客

原创开发日志：修改Element-UI组件里Slider滑块的样式变成尺子

这是实现的尺子效果。实现代码如下：export default { data () { return { slider: [1, 2], marks: {} } }, created () { this.initSliderMarks(); }, methods: { /** 初始化范围选择器的标志显示 */ initSliderMar

2021-12-15 18:39:52 1220

原创开发日志：修改Element-UI组件里计数器的Icon图标

Element-UI提供了这样一个计数器组件，可以做数量的加减，很方便，但是样式可能是不适合自己的应用的。这是项目的设计效果：下面是我实现的效果：要实现这样的效果，只需要几行css样式替换掉计数器组件的icon就可以了。 .el-input-number { &__increase, &__decrease { background-color: transparent; border: 0 !important; }

2021-11-30 18:35:52 2056 1

原创开发日志：select下拉选择框自定义样式

目标是做可以按下鼠标拖动实现连续选择的一个选择框。使用了原生的select加上属性multiple来做了，但它的样式并不符合设计，所以需要修改一下。方法：使用attr属性加伪类before实现自定义样式具体代码：/*修改option的样式*/.box option::before { content: attr(data-content-before); position: absolute; left: 0; top: 0; z-index: 1; width: 100%; h

2021-05-16 14:05:20 1688

原创学习记录：js深拷贝、浅拷贝

js 的数据类型有两种，一种是基本数据类型（String、Number、Boolean、Null、Undefined、Symbol），一种是引用数据类型（Object、Array、Function）。基本数据类型是放在栈内存的，而引用数据类型是存放在堆内存的，它会在栈内存里面存放一个指向堆内存的指针。所以，浅拷贝只复制指向某个对象的指针，而不是复制对象本身，新旧对象还是共享同一块内存，深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。// 如果只是简单的数组对象，

2021-03-10 22:41:08 109

原创学习记录：vue双向数据绑定

Vue.js 是采用数据劫持结合发布者-订阅者模式的方法，通过 Object.defineProperty() 方法来劫持各个属性的getter和setter，数据发生变动时发布消息给订阅者，触发相应的监听回调。具体步骤：对需要观察的数据对象进行递归遍历，包括子属性对象的属性，都加上 getter 和 setter。当给这个对象的某个值赋值时，会触发绑定的 settter，那么就能监听到数据变化用 Compile 解析模板指令，将模板中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点

2021-03-10 13:36:01 78

原创学习记录：微信小程序页面栈

页面栈存放数为5，超过后不会入栈！navigateTo：不会将旧页面出栈；redirectTo：将旧页面出栈，再将需要跳转到的页面入栈；navigateBack：则是将页面栈最后一个元素出栈，因此倒数第二个元素会成为最后一个元素，即变成「当前页面」...

2021-03-05 14:42:15 153

原创学习记录：批量重命名文件

批量重命名文件：新建 .bat 文件：dir . /b >list.txt双击运行 bat 文件复制 list 文件的内容新建 excel 表格，粘贴到 A把重命名后名称，放置到 B在 C1 输入：=“ren “&A1&” “&B1&””双击右下角的黑色小十字自动填充复制 C新建 rename.bat 文件：黏贴 C双击运行！...

2021-03-05 14:15:55 123

原创开发日志：iView的table导出自定义的数据

this.$refs.table.exportCsv({ filename: '表格', columns: this.columns.filter((col, index) => (index > 0 && index < this.columns.length - 1)), data: this.labelData.map((data) => { const target = Object.assign({}, data)

2021-03-05 14:03:22 441

原创开发日志：css属性书写习惯

css书写习惯：位置：position、bottom、top、left、right、z-index、float、display大小：width、height、margin、padding版式：line-height、text-ailgn、letter-spacing、font、color、背景：background边框：border阴影：box-shadow其它：animation、transition...

2021-03-05 13:59:07 86

原创学习记录：元素居中

水平居中：行内元素，父级元素设置 text-align: center;块级元素，如果已设置宽高，设置 margin: 0 auto;flex布局，display: flex；justify-content: center;transform属性，元素设置 position: absolute; left: 50%; transform: (-50%, 0);绝对定位，有固定宽度，position: absolute; left: 0; right: 0; margin: 0 auto;垂直

2021-03-05 13:51:23 60

原创学习记录：px、em和rem

px、em、rempx：绝对单位，页面按照精确的像素值来展示，浏览器默认字体大小为 16pxem：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 则按自身来计算，整个页面内1em 并不是一个固定的值rem：相对单位，可理解为 “root rem”，相对于根节点 html 的字体大小来计算，css3新增属性，IE8-不支持em特点：em 的值并不是固定的em 会继承父级元素的字体大小rem特点：相对于根元素计算，可用于响应式的页面...

2021-03-05 13:39:12 76

原创学习记录：css盒子模型

CSS 基础框盒模型介绍可以把 html 里的元素都看成一个盒子，盒子包括 content 内容，padding 内边距，border 边框，margin 外边距四个部分。盒子模型的模式可以通过 css 样式属性 box-sizing 进行设置。box-sizing: border-box || content-box || inherit;一般盒子模型有两种模式：标准模式（W3C）和怪异模式（IE）标准的盒子模型：width = content，height = content。css 属性

2021-03-05 13:17:36 114

原创开发日志：调整富文本图片大小

convert () { let htmlText = '<img style="border: 0px; width: 537px; display: block;">' let str = htmlText.replace(/<img[^>]*>/gi, function (match, capture) { // return match.replace(/(<img[^>]*)(\/?>)/gi, "$1width='1

2021-03-05 12:24:42 349

原创学习记录：JavaScript判断数组

1. instanceofMDN上的解释为：instanceof 运算符用于检测 constructor.prototype 是否存在于参数 object 的原型链上。语法为: object (某个实例对象) instanceof constructor(某个构造函数)let arr = [1, 3];console.log(arr instanceof Array); // true// 值得注意的是：Array是Object的子类，下面也会输出trueconsole.log(arr

2021-01-08 00:32:33 70

原创学习记录：wampserver设置MySQL数据库编码格式

打开my.ini，该文件一般在MySQL的安装目录下，这里我安装在了D盘，文件是在 D:\wamp64\bin\mysql\mysql5.7.24 下。在[client]下添加default-character-set=utf8在[mysqld]下添加character_set_server=utf8在[mysql]下添加default-character-set=utf8...

2021-01-07 23:44:57 240

原创开发日志：生成json格式的日期数据

在项目中，因为使用的插件 mPicker.js 的限制，写了一段生成日期 json 的代码，在此记录一下。生成格式如下，年 child 里有12个月的 child 下有对应的日：代码可以生成前49年、后50年和当前年，一共100年的日期：function getDateJson() { var _prevY = [], _nextY = [], _allY = [], _allM = [], _allD = []; var def = new Date()

2021-01-07 18:03:39 462

原创开发日志：微信公众号网页开发的调试工具

在这里记录一下开发时有用到的一些工具：VConcole调试工具<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script><script> new VConsole();</script>H5调试工具：http://debugx5.qq.com...

2021-01-07 17:14:14 746

原创学习记录：Git提交信息规范（参考Angular团队）

规范为：<type>(<scope>):<subject> #header// 空一行<body> // 空一行<footer> 1. Header 部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）。type 用于说明本次 commit 的类别，只允许使用下面7个标识：feat：新增功能（feature）fix：修补bugdocs：修改文档（documentation）style：

2021-01-07 16:37:43 189

原创看书笔记：Git的一些常用操作

首先可以检查电脑有没有安装gitgit –-version有安装的就会打印 git 的版本信息使用命令行创建文件夹mkdir <filename>进入文件夹cd <filename>初始化仓库git init创建文件touch <filename>查看本地仓库的状态git status查看本地仓库的修改git diff #可以看当前工作树和暂存区的差别git diff HEAD #可以查看本次提交和上次提

2021-01-06 02:14:49 111

原创开发日志：微信小程序太阳码传入参数解析

通过二维码进入小程序的时候，可以在 onload 函数里面获取参数。onLoad(options) { console.log(options)}这个是打印出来的结果。所以，在这里我们需要用到的是 options.scene。第一步，使用 decodeURIComponent 解析一下，就可以得到传入的参数。post_id=74413&category_id=360但这是字符串，不方便后面的取值、存值。第二步，可以将 options.scene 里面的普通字符串拼接修改成 j

2021-01-04 21:16:36 1767 1

YoHoo的博客