<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[mrsun_web]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/mrsun_web</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; mrsun_web]]></copyright><item><title><![CDATA[Antv-G6的基础使用]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/132561190</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/132561190</guid><author>mrsun_web</author><pubDate>Tue, 29 Aug 2023 14:52:33 +0800</pubDate><description><![CDATA[注：nodes 数组中包含节点对象，唯一的 id 是每个节点对象中必要的属性，x、 y 用于节点的定位；edges 数组中包含边对象，source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。G6 是一个图可视化引擎，它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力，旨在让关系变得透明，简单。]]></description><category></category></item><item><title><![CDATA[Vue3中watch监听的坑和基本使用方法]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/131407450</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/131407450</guid><author>mrsun_web</author><pubDate>Mon, 26 Jun 2023 23:40:34 +0800</pubDate><description><![CDATA[【代码】Vue3中watch监听的坑和基本使用方法。]]></description><category></category></item><item><title><![CDATA[CSS鼠标悬停增加底部边框后内容位置会发生变化，简单的解决方法]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/127259297</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/127259297</guid><author>mrsun_web</author><pubDate>Tue, 11 Oct 2022 10:49:08 +0800</pubDate><description><![CDATA[CSS鼠标悬停增加底部边框后内容位置会发生变化，简单的解决方法]]></description><category></category></item><item><title><![CDATA[Vue-cli脚手架始终是2.9.6，无法卸载及更新]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/124443850</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/124443850</guid><author>mrsun_web</author><pubDate>Wed, 27 Apr 2022 09:57:41 +0800</pubDate><description><![CDATA[问题描述：
遇到一种情况，就是使用vue -V 查看版本始终是2.9.6，安装命令是npm install @vue/cli ,按理说是最新版本，但是还是显示旧版，使用vue create 【项目名称】 提示是要卸载脚手架在安装，但是安装后还是2.9.6
原因：
其实导致这个原因是从vue-cli 3.0版本开始原来的npm install -g vue-cli 安装的都是旧版，最高到2.9.6，安装新版必须是新的命令npm install -g @vue/cli 这就导致了，如果我们再2.9.6版本还存在]]></description><category></category></item><item><title><![CDATA[router.back与router.go的区别]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/123517787</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/123517787</guid><author>mrsun_web</author><pubDate>Wed, 16 Mar 2022 09:05:56 +0800</pubDate><description><![CDATA[go(-1): 原页面表单中的内容会丢失；

this.$router.go(-1)：后退+刷新；

this.$router.go(0)：刷新；

this.$router.go(1) ：前进

back(): 原页表表单中的内容会保留；

this.$router.back():后退 ；

this.$router.back(0) 刷新；

this.$router.back(1)：前进



...]]></description><category></category></item><item><title><![CDATA[websocket 的minxi基本用法和socket.io的区别]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/122039963</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/122039963</guid><author>mrsun_web</author><pubDate>Mon, 20 Dec 2021 17:06:56 +0800</pubDate><description><![CDATA[1，websocket的基础使用方法


var ws = new WebSocket("wss://192.168.1.102:8080");  //需要连接的服务器端的URL  注意： ws或者wss一定要有 两者就是http协议和https协议的区别

ws.onopen：function() { 
  console.log("WebSocket连接成功"); 
  ws.send("Hello WebSockets!");  //向服务器端发送数据的方法
};

ws.onmessage:func]]></description><category></category></item><item><title><![CDATA[Vue中websocket的使用方法]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/121999526</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/121999526</guid><author>mrsun_web</author><pubDate>Fri, 17 Dec 2021 16:36:37 +0800</pubDate><description><![CDATA[&lt;template&gt;
  &lt;div class="test"&gt;

  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    name : 'test',
    data() {
      return {
        websock: null,
      }
    },
    created() {
      this.initWebSocket();
    },
    de.]]></description><category></category></item><item><title><![CDATA[vue中mixins的使用方法]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/121995216</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/121995216</guid><author>mrsun_web</author><pubDate>Fri, 17 Dec 2021 14:27:13 +0800</pubDate><description><![CDATA[vue中的解释语言枯燥所以我们跳过，直接用一个简单的例子进行演示

1，先定义一个混入对象



2，把混入对象引用到当前的组件中



3，组件1中的参数num进行+1的操作



4，组件2中的参数num未进行操作



5，分别打印组件1中的值和组件2中的值



大家可以看到，我在组件1里改变了num里面的值，组件2中的num值还是混入对象里的初始值Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

6，如methods...]]></description><category></category></item><item><title><![CDATA[Vue项目前端或后台实现导出报表]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/121740928</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/121740928</guid><author>mrsun_web</author><pubDate>Mon, 06 Dec 2021 10:37:21 +0800</pubDate><description><![CDATA[Vue项目前端或后台实现导出报表]]></description><category></category></item><item><title><![CDATA[Echarts中文文档手册]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/121074265</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/121074265</guid><author>mrsun_web</author><pubDate>Mon, 01 Nov 2021 09:34:57 +0800</pubDate><description><![CDATA[官网链接：http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html
https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
theme = {
    // 全图默认背景
    // backgroundColor: 'rgba(0,0,0,0)',
    
    // 默认色板
    color: [.]]></description><category></category></item><item><title><![CDATA[Ant Design of Vue表单自定义验证validator]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120890226</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120890226</guid><author>mrsun_web</author><pubDate>Thu, 21 Oct 2021 17:10:21 +0800</pubDate><description><![CDATA[1.表单验证



1.1rule用法

注意：表单必须绑定rules验证规则才能生效



在data中声明rules校验规则，具体规则可以查询文档，这里重点说下自定义校验validator



1.2validator用法

validator验证器，可以对格式进行复杂限制，跟rule一样需要设置对应表单项的prop属性，然后绑定validator，validator绑定验证规则变量（注意验证规则变量是处在data的return外面）。且需要注意的是callback回调函数一定要被调用


&l...]]></description><category></category></item><item><title><![CDATA[高德地图缩放marker位置变化，及设置offset偏移]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120782754</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120782754</guid><author>mrsun_web</author><pubDate>Fri, 15 Oct 2021 14:37:16 +0800</pubDate><description><![CDATA[一些朋友在往地图上添加标注的时候，往往会发现，图片的尖尖角对不上具体的点。比如，我要在上海东方明珠上扎一个点。


var marker = new AMap.Marker({ //添加自定义点标记
        map: map,
        position: [121.499809,31.239666], //基点位置
        offset: new AMap.Pixel(0, 0), //相对于基点的偏移位置
        draggable: true,  //是否可拖动
    ]]></description><category></category></item><item><title><![CDATA[使用AXIOS的ONUPLOADPROGRESS制作上传进度条--以及ONUPLOADPROGRESS的源码解读]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120721546</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120721546</guid><author>mrsun_web</author><pubDate>Tue, 12 Oct 2021 13:20:57 +0800</pubDate><description><![CDATA[1，从名字就可以看出来，这是允许为上传处理进度的事件。他是axios的请求配置之一。


axios({
        method: 'post',
        url: this.uploadurl,
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data' // 文件上传
        },
        //文件上传进度值
        onUploadProgre]]></description><category></category></item><item><title><![CDATA[css实现文本超出单行或两行显示省略号...]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120707518</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120707518</guid><author>mrsun_web</author><pubDate>Mon, 11 Oct 2021 17:21:08 +0800</pubDate><description><![CDATA[两行超出：


.warp2{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
      }


单行超出：


overflow:hidden;
text-ove..]]></description><category></category></item><item><title><![CDATA[用Ui组件样式不生效，样式穿透的使用方法和区别]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120705304</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120705304</guid><author>mrsun_web</author><pubDate>Mon, 11 Oct 2021 16:05:53 +0800</pubDate><description><![CDATA[在写一些vue项目时候，经常会引入一些UI组件。无论是自定义组件还是引入的外部组件。style标签上都有scoped属性。防止影响到其他页面上的样式。但是又是需要在父组件更改自组件的样式。就要用到组件穿透（也叫深度修改css）

1：&gt;&gt;&gt;

如果项目使用的是css 原生样式,那么你可以直接使用 &gt;&gt;&gt; 穿透修改即可

2： /deep/

项目中用到了预处理器 scss 、sass、less 操作符 &gt;&gt;&gt; 可能会因为无法编译而报错 。可以使用 /de]]></description><category></category></item><item><title><![CDATA[Ant Design of Vue-Cascader级联选择器options报错]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120704894</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120704894</guid><author>mrsun_web</author><pubDate>Mon, 11 Oct 2021 15:59:18 +0800</pubDate><description><![CDATA[错误提示：Invalid prop: custom validator check failed for prop "options



查找错误代码：





查找options数据：发现子数据为null所以数据类型不对出现的报错



解决办法：对子数据为null的数据更改为数组类型即可






...]]></description><category></category></item><item><title><![CDATA[Ant Design时间选择器实现禁用时间]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120621518</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120621518</guid><author>mrsun_web</author><pubDate>Wed, 06 Oct 2021 09:41:23 +0800</pubDate><description><![CDATA[最终实现按效果如下：即实现时分秒时间段的选择，结束时间要大于开始时间



使用了disabledHours、disabledMinutes、disabledSeconds来实现禁用时间


完整组件代码如下：可直接引用运行查看效果
&lt;template&gt;
    &lt;div class="select-range-time"&gt;
        &lt;a-row style="line-height:40px;width:400px;"&gt;
            &lt;a-co]]></description><category></category></item><item><title><![CDATA[this.$set()进行强制更新]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120360245</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120360245</guid><author>mrsun_web</author><pubDate>Sat, 18 Sep 2021 08:35:24 +0800</pubDate><description><![CDATA[对象操作：

三个参数：this.$set('改变的对象'，'改变的对象属性'，'值')

数组操作：

三个参数：this.$set('数组'，'下标'，'值')

写一个小的demo: 为data中的某一个对象添加一个属性


&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;button @click="setMessage"&gt;添加属性&lt;/button&gt;
    {{ student.name }}
    &lt;input ]]></description><category></category></item><item><title><![CDATA[Moment.js查询当前小时天月年之前的时间]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120328214</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120328214</guid><author>mrsun_web</author><pubDate>Thu, 16 Sep 2021 14:30:37 +0800</pubDate><description><![CDATA[let time=moment().format('YYYY-MM-DD HH:mm:ss') //获取当前时间
let time=moment().add(-1,'year').format('YYYY-MM-DD HH:mm:ss')); //前一年时间
let time=moment().add(-1,'month').format('YYYY-MM-DD HH:mm:ss')); //前一月时间
let time=moment().add(-1,'week').format('YYYY-MM-DD.]]></description><category></category></item><item><title><![CDATA[AntDesign的select组件placeholder不显示问题]]></title><link>https://blog.youkuaiyun.com/mrsun_web/article/details/120265157</link><guid>https://blog.youkuaiyun.com/mrsun_web/article/details/120265157</guid><author>mrsun_web</author><pubDate>Mon, 13 Sep 2021 13:06:38 +0800</pubDate><description><![CDATA[问题：select组件同时绑定了v-model和placeholder，select绑定的placeholder属性不显示。


&lt;a-select v-model="level" placeholder="选择日志级别"&gt;
          &lt;a-select-option value="info"&gt;1&lt;/a-select-option&gt;
          &lt;a-select-option value="warn"&gt;2&lt;/a-select-opti]]></description><category></category></item></channel></rss>