博客园 - 七度丢失的梦
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=73823
2022-02-14T15:10:15Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
feed.cnblogs.com
https://www.cnblogs.com/bobo1/p/15878234.html
CSS实现鼠标移上去按钮表面光影划过特效 - 七度丢失的梦
初始状态 鼠标移上去时,光影表面掠过 代码如下 html部分 <header style="text-align: center;"> <h1 class="btn">标题</h1> </header> css部分 .btn { display: inline-block; width: 140px
2022-02-10T03:02:00Z
2022-02-10T03:02:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】初始状态 鼠标移上去时,光影表面掠过 代码如下 html部分 <header style="text-align: center;"> <h1 class="btn">标题</h1> </header> css部分 .btn { display: inline-block; width: 140px <a href="https://www.cnblogs.com/bobo1/p/15878234.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/15431852.html
vue使用element-ui中el-table实现点击表头或点击一列选中全列的功能 - 七度丢失的梦
现在有这么个需求,点击表格一列的表头或其中一列,选中全列,ux如下,默认选第一列 直接上代码 <!--表格--> <el-table :data="tableData" @cell-click="(row, column) => handleClick({column})"> <el-table-c
2021-10-21T01:31:00Z
2021-10-21T01:31:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】现在有这么个需求,点击表格一列的表头或其中一列,选中全列,ux如下,默认选第一列 直接上代码 <!--表格--> <el-table :data="tableData" @cell-click="(row, column) => handleClick({column})"> <el-table-c <a href="https://www.cnblogs.com/bobo1/p/15431852.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14998508.html
vue开发个性化select,带分页以及搜索功能的组件 - 七度丢失的梦
前提:必须先安装了element-ui 自定义开发带分页以及搜索框的select 用法 select.vue文件 <template> <div v-clickoutside="()=>visible=false" class="com-select" :class="{'is-disabeled'
2021-07-11T05:51:00Z
2021-07-11T05:51:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】前提:必须先安装了element-ui 自定义开发带分页以及搜索框的select 用法 select.vue文件 <template> <div v-clickoutside="()=>visible=false" class="com-select" :class="{'is-disabeled' <a href="https://www.cnblogs.com/bobo1/p/14998508.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14602380.html
GitHub搜索技巧 - 七度丢失的梦
in:name example 名字中有“example”in:readme example readme中有“example”in:description example 描述中有“example”stars:>1000 star>1000forks:>1000 fork>1000pushed:>
2021-07-03T03:42:00Z
2021-07-03T03:42:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】in:name example 名字中有“example”in:readme example readme中有“example”in:description example 描述中有“example”stars:>1000 star>1000forks:>1000 fork>1000pushed:> <a href="https://www.cnblogs.com/bobo1/p/14602380.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14755084.html
flex实现左中固定不变,右边自适应 - 七度丢失的梦
html结构 css样式 .tab1-main { display: flex; justify-content: space-between; align-items: stretch; .tab1-tree { width: 300px; padding: 10px; } .tab1-line
2021-05-11T06:17:00Z
2021-05-11T06:17:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】html结构 css样式 .tab1-main { display: flex; justify-content: space-between; align-items: stretch; .tab1-tree { width: 300px; padding: 10px; } .tab1-line <a href="https://www.cnblogs.com/bobo1/p/14755084.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14736546.html
JavaScript高级__原型继承+组合继承 - 七度丢失的梦
原型继承 1.定义父类型构造函数 2.给父类型的原型添加方法 3.定义子类型的构造函数 4.创建父类型的对象赋值给子类型的原型(关键) 5.将子类型原型的构造属性设置为子类型 6.给子类型原型添加方法 7.创建子类型的对象:可以调用父类型的方法 // 父类型 function Supper() {
2021-05-06T11:33:00Z
2021-05-06T11:33:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】原型继承 1.定义父类型构造函数 2.给父类型的原型添加方法 3.定义子类型的构造函数 4.创建父类型的对象赋值给子类型的原型(关键) 5.将子类型原型的构造属性设置为子类型 6.给子类型原型添加方法 7.创建子类型的对象:可以调用父类型的方法 // 父类型 function Supper() { <a href="https://www.cnblogs.com/bobo1/p/14736546.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14721472.html
JavaScript高级__深入了解闭包 - 七度丢失的梦
理解闭包 1.如何产生闭包 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时,就产生了闭包 2.闭包到底是什么 闭包是嵌套的内部函数 包含被引用变量(函数)的对象 注意:闭包存在于嵌套的内部函数中 3.产生闭包的条件 函数嵌套 内部函数引用了外部函数的数据(变量/函数) func
2021-04-30T03:43:00Z
2021-04-30T03:43:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】理解闭包 1.如何产生闭包 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时,就产生了闭包 2.闭包到底是什么 闭包是嵌套的内部函数 包含被引用变量(函数)的对象 注意:闭包存在于嵌套的内部函数中 3.产生闭包的条件 函数嵌套 内部函数引用了外部函数的数据(变量/函数) func <a href="https://www.cnblogs.com/bobo1/p/14721472.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14714329.html
JavaScript高级__执行上下文代码案例 - 七度丢失的梦
在栈内存中,后进先出 <script> console.log('gb:' + i) var i = 1 foo(1) function foo(i) { if (i == 4) { return } console.log('fb:' + i) foo(i + 1) console.log('fe
2021-04-28T07:29:00Z
2021-04-28T07:29:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】在栈内存中,后进先出 <script> console.log('gb:' + i) var i = 1 foo(1) function foo(i) { if (i == 4) { return } console.log('fb:' + i) foo(i + 1) console.log('fe <a href="https://www.cnblogs.com/bobo1/p/14714329.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14709381.html
JavaScript中的显式原型链 prototype 和隐式原型 __proto__ - 七度丢失的梦
直接上经典示图 原型prototype 我们平时在代码里所创建的每一个函数,解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象,这个对象就是我们所谓的原型对象 如果函数作为普通函数调用prototype没有任何作用,当函数以构造函数的形式调用时,它创建的对象中都会有一个隐式的属
2021-04-27T08:01:00Z
2021-04-27T08:01:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】直接上经典示图 原型prototype 我们平时在代码里所创建的每一个函数,解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象,这个对象就是我们所谓的原型对象 如果函数作为普通函数调用prototype没有任何作用,当函数以构造函数的形式调用时,它创建的对象中都会有一个隐式的属 <a href="https://www.cnblogs.com/bobo1/p/14709381.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14709203.html
谷歌强大插件收集,持续更新。。。 - 七度丢失的梦
Wappalyzer 一款功能强大的、且非常实用的chrome网站技术分析插件,通过该插件能够分析目标网站所采用的平台构架 Axhub 一键复制 Iconfont 图标到 Axure 一键同步原型到 Axhub 或团队服务器
2021-04-27T07:32:00Z
2021-04-27T07:32:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】Wappalyzer 一款功能强大的、且非常实用的chrome网站技术分析插件,通过该插件能够分析目标网站所采用的平台构架 Axhub 一键复制 Iconfont 图标到 Axure 一键同步原型到 Axhub 或团队服务器 <a href="https://www.cnblogs.com/bobo1/p/14709203.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14709165.html
js中~~和^= - 七度丢失的梦
直接看代码 ~~false 0 ~~true 1 ~~undefined 0 ~~!undefined 1 ~~null 0 ~~!null 1 ~~"" 0 ~~!"" 1 ~是按位取反的意思,计算机里面处理二进制数据时候的非,~~就是再转回来,利用两个按位取反的符号,进行类型的转换,转换成数字符
2021-04-27T07:27:00Z
2021-04-27T07:27:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】直接看代码 ~~false 0 ~~true 1 ~~undefined 0 ~~!undefined 1 ~~null 0 ~~!null 1 ~~"" 0 ~~!"" 1 ~是按位取反的意思,计算机里面处理二进制数据时候的非,~~就是再转回来,利用两个按位取反的符号,进行类型的转换,转换成数字符 <a href="https://www.cnblogs.com/bobo1/p/14709165.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14709124.html
vue自定义指令----directive - 七度丢失的梦
Vue中内置了很多的指令,如v-model、v-show、v-html等,但是有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候,我们就需要用到vue中一个很强大的功能了—自定义指令。 自定义指令里的钩子函数 options = { bind:function(el,bind
2021-04-27T07:21:00Z
2021-04-27T07:21:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】Vue中内置了很多的指令,如v-model、v-show、v-html等,但是有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候,我们就需要用到vue中一个很强大的功能了—自定义指令。 自定义指令里的钩子函数 options = { bind:function(el,bind <a href="https://www.cnblogs.com/bobo1/p/14709124.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14543438.html
VUE的UI框架集合 - 七度丢失的梦
国内的 PC端常用的 1.element-ui 官网地址:http://element-cn.eleme.io/#/zh-CNGitHub地址:https://github.com/ElemeFE/element 2.iView 官网地址:http://v1.iviewui.com/GitHub地址
2021-03-16T06:45:00Z
2021-03-16T06:45:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】国内的 PC端常用的 1.element-ui 官网地址:http://element-cn.eleme.io/#/zh-CNGitHub地址:https://github.com/ElemeFE/element 2.iView 官网地址:http://v1.iviewui.com/GitHub地址 <a href="https://www.cnblogs.com/bobo1/p/14543438.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14393595.html
配色网站收集(持续更新...) - 七度丢失的梦
1.根据鼠标移动随机生成颜色,单击鼠标锁定 https://colourco.de/ 2.Adobe出品工具很强大,拖动圆盘上面的任意一个点,系统都会自动计算出一个最优化的配色组合 https://color.adobe.com/zh/create/color-wheel 3.一共有四个功能可以使用
2021-02-09T09:24:00Z
2021-02-09T09:24:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】1.根据鼠标移动随机生成颜色,单击鼠标锁定 https://colourco.de/ 2.Adobe出品工具很强大,拖动圆盘上面的任意一个点,系统都会自动计算出一个最优化的配色组合 https://color.adobe.com/zh/create/color-wheel 3.一共有四个功能可以使用 <a href="https://www.cnblogs.com/bobo1/p/14393595.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14377736.html
VUE项目里个性化写个时间轴组件,带折叠效果 - 七度丢失的梦
最终效果图 直接看TheTimeLine.vue文件代码 <template> <div class="timeline-main"> <!--年月标题--> <div class="timeline-title"> {{ timeData.yearData }} <i :class="showCa
2021-02-05T06:55:00Z
2021-02-05T06:55:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】最终效果图 直接看TheTimeLine.vue文件代码 <template> <div class="timeline-main"> <!--年月标题--> <div class="timeline-title"> {{ timeData.yearData }} <i :class="showCa <a href="https://www.cnblogs.com/bobo1/p/14377736.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14377316.html
纯CSS画尖角符号 - 七度丢失的梦
ui设计图大概长这样↓ 因为这是在表格里展示的对应的样式的,我直接写成了一个组件 下面是一个.vue文件,可以直接使用 <template> <div class="column-row"> <!--#409eff--> <div class="one">{{ column[0] || '' }}<
2021-02-05T05:55:00Z
2021-02-05T05:55:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】ui设计图大概长这样↓ 因为这是在表格里展示的对应的样式的,我直接写成了一个组件 下面是一个.vue文件,可以直接使用 <template> <div class="column-row"> <!--#409eff--> <div class="one">{{ column[0] || '' }}< <a href="https://www.cnblogs.com/bobo1/p/14377316.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/14180768.html
一个数组先按照某个属性的大小排序,如果大小一样的就按照名称排序 - 七度丢失的梦
重写数组中的sort()方法 下面先以distance排序,如果相同以name排序 let arr = [ {distance: 3, name: 'jack'}, {distance: 1, name: 'tom'}, {distance: 5, name: 'abole'}, {distance
2020-12-23T11:58:00Z
2020-12-23T11:58:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】重写数组中的sort()方法 下面先以distance排序,如果相同以name排序 let arr = [ {distance: 3, name: 'jack'}, {distance: 1, name: 'tom'}, {distance: 5, name: 'abole'}, {distance <a href="https://www.cnblogs.com/bobo1/p/14180768.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/13914416.html
CSS内部div设置上min-height或max-height滚动条就会出现在父元素上 - 七度丢失的梦
<div id="body"> <div id="left"></div> <div id="right"></div> </div> 如上结构 如果#left的样式加上了min-height/max-height当里面内容超出对应高度时,滚动条会出现在#body上
2020-11-02T06:50:00Z
2020-11-02T06:50:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】<div id="body"> <div id="left"></div> <div id="right"></div> </div> 如上结构 如果#left的样式加上了min-height/max-height当里面内容超出对应高度时,滚动条会出现在#body上 <a href="https://www.cnblogs.com/bobo1/p/13914416.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/13382065.html
300行代码手写简单vue.js,彻底弄懂MVVM底层原理 - 七度丢失的梦
当我们对vue的用法较为熟练的时候,但有时候在排查bug的时候还是会有点迷惑。主要是因为对vue各种用法和各种api使用都是只知其然而不知其所以然。这时候我们想到可以去看看源码,但是源码太长,其实我们只要把大概实现流程实现一遍,很多开发中想不明白的地方就会豁然开朗。下面我们就来实现一个简单的vue.
2020-07-26T13:09:00Z
2020-07-26T13:09:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】当我们对vue的用法较为熟练的时候,但有时候在排查bug的时候还是会有点迷惑。主要是因为对vue各种用法和各种api使用都是只知其然而不知其所以然。这时候我们想到可以去看看源码,但是源码太长,其实我们只要把大概实现流程实现一遍,很多开发中想不明白的地方就会豁然开朗。下面我们就来实现一个简单的vue. <a href="https://www.cnblogs.com/bobo1/p/13382065.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/bobo1/p/13357058.html
JavaScript简单手写观察者模式 - 七度丢失的梦
有的人把发布 订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 其实他们还是有差别的,在发布订阅模式中,组件是松散耦合的,正好和观察者模式相反 发布订阅模式中,发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。 在观
2020-07-21T11:49:00Z
2020-07-21T11:49:00Z
七度丢失的梦
https://www.cnblogs.com/bobo1/
【摘要】有的人把发布 订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 其实他们还是有差别的,在发布订阅模式中,组件是松散耦合的,正好和观察者模式相反 发布订阅模式中,发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。 在观 <a href="https://www.cnblogs.com/bobo1/p/13357058.html" target="_blank">阅读全文</a>