CCG_fighting-CSDN博客

原创 WebSocket在vue项目中的使用

1、使用背景：项目前端需要实时渲染后台传回的消息。2、WebSocket 的定义是：是一个对象，用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据。WebSocket 对象经常使用到的属性有一下这些：WebSocket.onopen：用于指定连接成功后的回调函数WebSocket.onmessage：用于指定当从服务器接受到信息时的回调函数WebSocket.o...

2019-12-03 21:46:18 1517

原创使用 Element-UI 的 navMenu 组件实现无限级下拉导航菜单并实现路由跳转和默认当前路由高亮样式

看过Element-UI的导航菜单组件的文档的同学应该了解到文档的demo都是有限级的菜单，然而现实场景业务通常有可能是这样子：（1）菜单由后台接口返回；（2）前端写死，但是业务需求是不定级别的导航菜单。下面就为实现无限级下拉导航菜单献上code！一：实现无限级下拉的思路是：递归菜单数组数据。二：实现操作是：组件调用自己本身从而达到实现递归菜单数据。（1）父组件：menu.vue// ...

2019-08-27 20:26:07 2665 1

上周有一个长按某一块文本弹出一个弹窗的需求，关于这个长按的姿势想到了使用vue的自定义指令来进行开发这个需求，因为报告中很多页面都要使用到这个长按的姿势，所以自定义指令是最佳解决方法的首选。刚好借此机会学习自定义指令。官网提供的全局自定义和组件自定义的例子，都很简单明了了告诉我们怎么使用：官网自定义例子链接下面主要讲解我全局自定义指令的整个流程，整体思路与官网的一样，但是一般实际项目开发中要...

2018-09-19 21:18:55 2481

原创区别apply、call与bind

（一）apply、call与bind都是函数对象的一个方法，主要作用都是改变函数体内部this的指向。下面用一个例子来说明三者的作用：function animals() {}animals.prototype = { name: 'dog', say: function() { console.log(`My name is ${this.name}`) }}...

2018-09-03 20:39:49 339

原创 ES6中Set（）的使用——javaScript

记录一波今天在项目中实践使用ES6中的Set()的数据结构，感觉特别帅气！！！ Set()可以实现在返回的一串数据的数组中挑选出满足你条件的数据。最大的关注点就是：去重！！！使用场景：后台返回一个数组（所有场景的图片）：里面包含了全景图与非全景图（字段下面根据imageType）来区分，货架分为主货架与非主货架（而全景图只在主货架中展示），但是主货架又有多个。//计算属性subJob...

2018-06-14 22:26:06 2871

原创父与子组件之间的传值--Vue

父组件与子组件之间的传值是最基本的vue知识。下面干脆利落介绍一下父组件与子组件的传值。方法一：父向子组件使用props。子组件向父组件使用emit。是的，就是这么简单！！！//父组件<father-component :value-first="abc" :valueSecond=1234 @watchValueStatus="setValueStatus"></fa...

2018-05-15 15:20:47 815

原创周记JS篇（一）filter、encodeURIComponent、模板字符串

这周在开发中使用到了遇到了filter()，之前有见过，但是没仔细了解过，这次进行了学习，记住了。 1、filter()：创建一个新的数组，新数组中的元素通过检查指定数组中符合条件的所有元素，而且次函数不会改变原数组例子：//JS原生写法var age = [32, 22, 10, 40];function checkAdult(age) { return age>=18}f

2018-02-03 18:44:49 529

原创周记JS篇（一）—— Object.assign、JSON.parse、JSON.stringify

今天开始决定每周记录一次JS新学到的知识，统一汇总到JS篇。 1、Object.assign(): 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象。语法：Object.assign(target, …sources) 例子：const object1 = { a: 1, b: 2, c:3 }const object2 = Object.assign({}

2018-02-03 18:01:05 1784

原创 Table的row-class-name无效与动态高亮显示选中行背景色

Element UI 的Table组件踩坑记：（1）参数row-class-name无效的坑：官方文档给出了如下代码：但是我使用后并没有出现预初想要第一行高亮的效果，然后console.log(row, rowIndex)，发现控制台输出的值均为undefined。最终解决方案是只要传入row或者rowIndex即可，然后根据自己所要的数据而进行处理，后来我修改代码为如下：tabl

2018-02-03 15:41:31 27308 12

原创 JQuery学习之路（jQuery选择器二）

（一）jQuery选择器之基本筛选选择器：（二）****jQuery选择器之内容筛选选择器（1）:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素（2）如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。（3）:parent与:empty是相反的，两者所涉及的子元素，包括文本节点（三

2017-12-02 12:00:38 320

原创 JQuery学习之路（样式篇_选择器）

（一）jQuery选择器之id选择器: $(“#id” ) <script type="text/javascript"> //通过原生方法处理 var div = document.getElementById('ccg'); div.style.border = "3px solid blue"; </script> <scri

2017-11-29 18:17:51 282

原创 Jquery学习之路（入门）

（1）jQeury使用：*$(document).ready* 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。<body> <div></div></body><script src="https://code.jque

2017-11-29 15:53:59 335

原创去掉input边框的原有属性和去掉a标签样式的方法

（一）平时我们敲表单时总会想自己用css定义表当输入框的样式：（1）去掉默认的input边框样式的解决方法，在CSS文件中添加：border:none; （2）去掉input获得焦点后边框变黄效果的解决方法：outline:medium; （3）向input输入框里面输入内容获取焦点居中排列的方法：text-align:center;input{ border:none; width

2017-09-07 10:12:30 2322

原创阴影box-shadow详解

（一）box-shadow的基础语法：给块元素设置阴影。（1）h-shadow为负值代表左边框设置阴影；若为正值代表右边框设置阴影；若为0则代表左右两边都设置阴影。（2）v-shadow为负值代表顶部设置阴影；若为负值代表底部设置阴影；若为0则代表顶部和底部两边都设置阴影。（3）blur：只能取非负值，取值为0时代表阴影不具有模糊效果，取值越大代表代表阴影边缘越模糊。（4）spr

2017-09-06 00:15:58 1848

原创阿里巴巴矢量图icon引用方法和与文字对齐的解决方法

平时写界面时经常要引用阿里巴巴矢量图icon（http://www.iconfont.cn/），（一）引用icon有两种方法：（1）直接在html里面添加i标签（效果图如下）： <div class="active-focus"> <i class="icon iconfont icon-eye"></i> <p>23</p> <i class="

2017-09-05 00:01:20 6637

转载一劳永逸地搞定flex布局

寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: cen

2017-08-19 10:49:04 368

转载 css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器的支持

px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。(另外需注意chrome强制最小字体为12号，即使设置成 10px

2017-08-17 16:54:54 699

原创谷歌浏览器默认最小字体的解决方法以及各浏览器对字体大小的支持

（一）谷歌默认的最小字体是12px,但是通常由于页面的需求我们需要使用更小的字体，解决方法如下：（1）使用transform.scale()属性，需加上谷歌前缀：-webkit- /这里的数字0.8，是缩放比例，可以根据情况变化。/注意：sacle()只会缩放给定宽和高的元素，若元素有背景的话，则其背景也会随着scale(0.8)缩放为原来的0.8倍大小的背景，为使其背景不发生变化，可以在元素

2017-08-09 23:34:58 3240

原创单行、多行文字超出用省略号表示

（一）当行文本超出用省略号表示：（二）多行文本超出显示省略号（三）更多多行文本超出显示省略号兼容问题可参考：http://www.css88.com/archives/5206

2017-08-09 17:53:23 502

原创 webstorm常见自动补全方法和常用快捷键

一：标签自动补全：（1）纯标签补全例：输入h1,按Tab键，（2）纯标签+地址“id” 例：输入h1#ccg,按Tab键，（3）纯标签+类“class” 例：输入h1.ccg,按Tab键，（4）标签+子标签+子标签个数例：输入div>p*6,按Tab键，（5）标签+类+子标签+子标签个数+子子标签+地址+}HTML} 例：输入ul.menu>li*6>a[href=

2017-08-09 17:31:43 6633

CCG_T的博客