<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[mysunli的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/mysunli</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; mysunli]]></copyright><item><title><![CDATA[vue使用el-table动态合并列及行]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/113260812</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/113260812</guid><author>mysunli</author><pubDate>Wed, 27 Jan 2021 18:35:34 +0800</pubDate><description><![CDATA[前两天项目中需要用到表单合并，特此记录，放便以后使用。

  首先我使用的element-ui中的el-table，文档中提供span-method方法可以实现合并行或列，大家不熟悉的可以去看看element文档地址，但是文档提供的例子很简单，不能满足复杂的页面，所以需要处理一下数据。

  如下代码：


getListDataForRowAndColumn(data){
            let self = this;
            self.rowAndColumn...]]></description><category></category></item><item><title><![CDATA[记vue使用Element UI分页出现的问题]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/111548603</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/111548603</guid><author>mysunli</author><pubDate>Tue, 22 Dec 2020 15:19:52 +0800</pubDate><description><![CDATA[最近在整理之前项目代码时，无意间发现了几个隐藏的bug，这bug藏得真深啊~~~

  先上代码：


&lt;template&gt;
    &lt;div&gt;
        &lt;el-row class="page_title"&gt;
            &lt;el-col :span="24"&gt;
                &lt;span&gt;操作日志&lt;/span&gt;
                &lt;hr&gt;
            ...]]></description><category></category></item><item><title><![CDATA[vue实现防抖、节流]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/111379328</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/111379328</guid><author>mysunli</author><pubDate>Fri, 18 Dec 2020 16:55:51 +0800</pubDate><description><![CDATA[序言

  好久没写博客，正好今天项目需要增加防抖功能，特此记录一下。网上有很多例子，我试试了，没一个成功的（要哭了~~~~），最后参考别人的写法写了个，成功了。。。废话不说了，正文来了。

防抖

  使用场景：如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，就会消耗很大的服务器资源。如果每次用户停止输入后，延迟超过一定时间时，才去请求服务器的话，会节省服务器资源，提升用户体验。

  原理：事件回调函数在一段时间（300毫秒）后才执行，如果在这段时...]]></description><category></category></item><item><title><![CDATA[使用element UI中的Progress定义排行]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/106722635</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/106722635</guid><author>mysunli</author><pubDate>Fri, 12 Jun 2020 20:37:47 +0800</pubDate><description><![CDATA[原型图如下：



  首先，这需要展示五条数据，每条的颜色都不一样，还要显示百分比，每条数据可分为上下两部分，上部分展示名字和百分比，下部分显示进度条。因为项目用的element，所以直接用它里面的Progress完成。

  用flex布局很容易实现这种布局，可以用v-for循环展示出内容：



progressData就是数据源，要修改它原有的样式

.el-progress-bar__outer{border-radius:0;background-color:#3a3e63}...]]></description><category></category></item><item><title><![CDATA[vue使用echarts做飞线图心得]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/106626862</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/106626862</guid><author>mysunli</author><pubDate>Mon, 08 Jun 2020 20:22:34 +0800</pubDate><description><![CDATA[最近在做大屏项目，其中要做飞线图。既然要做飞线图，当然要用echarts啦，不管你喜不喜欢，但是它的功能是十分强大的，关键还是开源的，用的非常爽。好了，开始走入正题。

  首先，你得把echarts引入到你的项目中来

  npm install echarts -S

引入就来就可以开始你的表演了（嘻嘻~~~~）

先来看下原型图



上面有图片和信息展示，看着还挺炫酷的

  先定义个chinaGeoCoordMap对象，用来放名字和地理坐标，如：

var chinaGeoC...]]></description><category></category></item><item><title><![CDATA[element-ui的el-select如何显示value对应的label值]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/104379363</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/104379363</guid><author>mysunli</author><pubDate>Tue, 18 Feb 2020 17:59:25 +0800</pubDate><description><![CDATA[在做项目当中遇到了如下图的情况：



想要的结果应该是这样的



怎样才能得到想要的结果呢，在网上一顿查找终于找到原因所在：由于得到的数据类型对应不上表单操作的数据类型。罪魁祸首在这啊，因为我从后台读取的数据类型时字符串，如下：



所以才会出现上述情况，知道原因所在，就很好解决了，把value的值改成number类型的就OK了。写的不好请多多见谅。
...]]></description><category></category></item><item><title><![CDATA[vue-cli3.0 脚手架搭建项目]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/104258531</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/104258531</guid><author>mysunli</author><pubDate>Tue, 11 Feb 2020 10:24:16 +0800</pubDate><description><![CDATA[1.安装vue-cli 3.0


npm install -g @vue/cli

安装成功后查看版本：vue -V（切记一定要大写）



如果遇到'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件。查看是否配置环境变量。

2.创建项目

在你新建的文件夹创建项目


vue create 你的项目名称



default 是 使用默认配置

Manually select ...]]></description><category></category></item><item><title><![CDATA['vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件。]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/103890990</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/103890990</guid><author>mysunli</author><pubDate>Wed, 08 Jan 2020 14:54:22 +0800</pubDate><description><![CDATA[今天再用vue-cli3构建项目时，在输入vue -v后，突然报'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件。瞬间蒙圈，这咋回事啊，怎么突然报这错了。没办法去问度娘呗，搜了好多方法，还是不行。明明npm install -g @vue/cli已经安装了，为啥没找到呢，那这个又安装在哪了呢？继续问度娘，有点眉目了（哈哈哈）

首先输入npm config list



哇哦，终...]]></description><category></category></item><item><title><![CDATA[vue中使用webVideoCtrl播放海康插件]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/103800229</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/103800229</guid><author>mysunli</author><pubDate>Thu, 02 Jan 2020 11:10:25 +0800</pubDate><description><![CDATA[最近公司有个监控视频的项目要用到webVideoCtrl插件来播放视频，研究了两天终于搞定。只需要传IP、用户名、密码、端口号即可播放，插件可在网上搜索下载。

  新建文件夹来存放webVideoCtrl插件，然后在index.html中引进，如图：



这样就把所需的插件引进去了，我们可以愉快的写代码了。注意要安装WebComponents.exe。

贴出完整代码，子组件

...]]></description><category></category></item><item><title><![CDATA[Vue项目中使用海康安全生产平台播放监控视频]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/103786766</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/103786766</guid><author>mysunli</author><pubDate>Tue, 31 Dec 2019 18:05:42 +0800</pubDate><description><![CDATA[最近一直在做有关海康监控视频的项目，闲下来写下这篇文章，加深一下印象，同时也和大家交流一下经验，以便更好提升自己。废话不多说，开始正题。。。。

  首先把海康插件引进到项目中来



然后在index.html中引进



最后把完整代码贴出来，不一一介绍了（懒~~~~）


&lt;template&gt;
    &lt;div class="video-player"&gt;
...]]></description><category></category></item><item><title><![CDATA[解决VM21248:1 Uncaught ReferenceError: xxx is not defined错误]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/101696877</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/101696877</guid><author>mysunli</author><pubDate>Sun, 29 Sep 2019 16:13:33 +0800</pubDate><description><![CDATA[今天在写项目的时候，遇到VM21248:1 Uncaught ReferenceError: xxx is not defined错误，特此记录，以便加深印象。

我是要写table行循环滚动。代码如下：



但运行的时候出现如下报错：



tableInterval()这函数已经定义了，却报出未定义，后来经过上网查找，终于找到问题所在。

原来是setInterval("tableInter...]]></description><category></category></item><item><title><![CDATA[初识Virtual DOM]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/88366279</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/88366279</guid><author>mysunli</author><pubDate>Sat, 09 Mar 2019 15:19:00 +0800</pubDate><description><![CDATA[vue和React都用到了Virtual DOM，出于好奇和对知识的渴望，就上网查了一下，并整理写篇文章增加记忆。

什么是Virtual DOM

本质上来说，Virtual DOM只是一个简单的JS对象，并且最少包含tag、props和children三个属性。不同的框架对这三个属性的命名会有点差别，但表达的意思是一致的。它们分别是标签名（tag）、属性（props）和子元素对象（childr...]]></description><category></category></item><item><title><![CDATA[js闭包的理解]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/88053773</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/88053773</guid><author>mysunli</author><pubDate>Fri, 01 Mar 2019 12:49:25 +0800</pubDate><description><![CDATA[什么是闭包

闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：
　　1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
　　2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
　　简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，...]]></description><category></category></item><item><title><![CDATA[js事件委托]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/88043794</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/88043794</guid><author>mysunli</author><pubDate>Thu, 28 Feb 2019 20:40:43 +0800</pubDate><description><![CDATA[什么是事件委托：

它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触...]]></description><category></category></item><item><title><![CDATA[JavaScript 运行机制]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/87810439</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/87810439</guid><author>mysunli</author><pubDate>Wed, 20 Feb 2019 17:49:28 +0800</pubDate><description><![CDATA[一、为什么JavaScript是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScri...]]></description><category></category></item><item><title><![CDATA[js延迟加载的几种方式]]></title><link>https://blog.youkuaiyun.com/mysunli/article/details/87800577</link><guid>https://blog.youkuaiyun.com/mysunli/article/details/87800577</guid><author>mysunli</author><pubDate>Wed, 20 Feb 2019 16:06:51 +0800</pubDate><description><![CDATA[  面试的时候遇到的，所以整理出来，方便记忆。

  js延迟加载有助于提高页面加载速度，一般有以下几种：defer属性、async属性、动态创建DOM方式、使用JQuery的getScript、使用setTimeout延迟方法、让js最后加载。

1.defer属性：

HTML 4.01 为 &amp;lt;script&amp;gt;标签定义了 defer属性。

用途：表明脚本在执行时不会影响页面的构造。...]]></description><category></category></item></channel></rss>