<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[webDevelopSnail的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/webDevelopSnail</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; webDevelopSnail]]></copyright><item><title><![CDATA[vue2的html引入脚本加载问题]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/148710274</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/148710274</guid><author>webDevelopSnail</author><pubDate>Tue, 17 Jun 2025 10:31:03 +0800</pubDate><description><![CDATA[在vue2项目中使用 new Loca.LinkLayer 时通过index.html脚本引入，首次切换到当前页面时loca模块未加载导致无法使用此功能报错为: Loca.LinkLayer is not a constructor 重新刷新当前页面才正常使用，解决方案为Vue组件内部动态加载脚本，确保脚本加载逻辑放在组件的mounted钩子中或者在需要时手动触发加载。]]></description><category></category></item><item><title><![CDATA[vscode中多行序号增加]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/147397090</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/147397090</guid><author>webDevelopSnail</author><pubDate>Mon, 21 Apr 2025 16:28:54 +0800</pubDate><description><![CDATA[拓展使用]]></description><category></category></item><item><title><![CDATA[vue3中暗黑模式]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/142557727</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/142557727</guid><author>webDevelopSnail</author><pubDate>Thu, 26 Sep 2024 15:24:05 +0800</pubDate><description><![CDATA[【代码】vue3中暗黑模式。]]></description><category></category></item><item><title><![CDATA[js时间转换]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/134027644</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/134027644</guid><author>webDevelopSnail</author><pubDate>Wed, 25 Oct 2023 09:49:15 +0800</pubDate><description><![CDATA[时间转换]]></description><category></category></item><item><title><![CDATA[echarts倾斜标题]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/133158795</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/133158795</guid><author>webDevelopSnail</author><pubDate>Fri, 22 Sep 2023 09:58:20 +0800</pubDate><description><![CDATA[echarts倾斜标题。]]></description><category></category></item><item><title><![CDATA[reduce 平均数]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/128300495</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/128300495</guid><author>webDevelopSnail</author><pubDate>Tue, 13 Dec 2022 13:22:12 +0800</pubDate><description><![CDATA[【代码】reduce 平均数。]]></description><category></category></item><item><title><![CDATA[js获取本地id]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122713082</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122713082</guid><author>webDevelopSnail</author><pubDate>Thu, 27 Jan 2022 10:18:05 +0800</pubDate><description><![CDATA[function getYourIP(){
            var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
            if (RTCPeerConnection) (function () {
                var rtc = new RTCPeerConnection({iceSer..]]></description><category></category></item><item><title><![CDATA[vue的pc端分辨率自适应]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122712169</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122712169</guid><author>webDevelopSnail</author><pubDate>Thu, 27 Jan 2022 10:04:34 +0800</pubDate><description><![CDATA[方案

lib-flexible + px2remLoader
lib-flexible : 阿里可伸缩布局方案
px2rem-loader: px转rem

安装依赖
npm install px2rem-loader -D
npm install lib-flexible -S

引入依赖
// main.js 引入lib-flexible
import 'lib-flexible'

px 转换成rem
vue-loader的options 和其他样式文件 loader 最终由build/utils.]]></description><category></category></item><item><title><![CDATA[vue-slider组件]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122711961</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122711961</guid><author>webDevelopSnail</author><pubDate>Thu, 27 Jan 2022 09:08:39 +0800</pubDate><description><![CDATA[应用场景

使用文档：
https://nightcatsama.github.io/vue-slider-component/#/zh-CN/

]]></description><category></category></item><item><title><![CDATA[slider与input联动效果]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122689211</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122689211</guid><author>webDevelopSnail</author><pubDate>Tue, 25 Jan 2022 17:24:56 +0800</pubDate><description><![CDATA[应用场景

代码
// template 中
&lt;el-input-number
      :max="400"
      :min="0"
      @change="numberChange"
      v-model="valueNew[0]"
    &gt;&lt;/el-input-number&gt;
    &lt;!--  show-stops --&gt;
    &lt;el-slider v-model="value" range&gt;&lt;/el-slider&gt]]></description><category></category></item><item><title><![CDATA[数组去重排序]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122448896</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122448896</guid><author>webDevelopSnail</author><pubDate>Wed, 12 Jan 2022 10:59:34 +0800</pubDate><description><![CDATA[//数组去重且从小到大排序
      newArr(arr) {
        //去重
        arr = Array.from(new Set(arr)).map(item =&gt; {
          return Number(item)
        });
        let min;
        for (var i = 0; i &lt; arr.length; i++) {
          for (var j = i; j &lt; arr.l...]]></description><category></category></item><item><title><![CDATA[ES6模版字符串动态信息显示]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122172133</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/122172133</guid><author>webDevelopSnail</author><pubDate>Mon, 27 Dec 2021 15:01:21 +0800</pubDate><description><![CDATA[需求场景

echarts的tooltilp显示，根据日月年等选项展示的内容不同，有的含超标次数，有的不含，可以通过style控制其显示和隐藏，代码如下：
formatter: function (param) {
              console.log(param)
              let html = "";
               param.forEach((v, index) =&gt; {
                    html += `&lt;div s]]></description><category></category></item><item><title><![CDATA[el-table两个属性的合并显示]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/121153693</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/121153693</guid><author>webDevelopSnail</author><pubDate>Thu, 04 Nov 2021 23:11:58 +0800</pubDate><description><![CDATA[应用场景
起点桩号包含两个属性stakeStartMile和stakeStartMetre要显示在一个td中，就是下面K stakeStartMile+ stakeStartMetre

实现代码
 &lt;el-table-column label="起点桩号" align="center" prop="stakeStartMile,stakeStartMetre"&gt;
  &lt;template slot-scope="scope"&gt;K{{scope.row.stakeStartMile}}]]></description><category></category></item><item><title><![CDATA[element-table合并相同行]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/120691258</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/120691258</guid><author>webDevelopSnail</author><pubDate>Sun, 10 Oct 2021 20:15:49 +0800</pubDate><description><![CDATA[效果

实现步骤
// 1.template标签
&lt;template&gt;
    &lt;el-table id="tableVue" :data="dataSource" border stripe :span-method="objectSpanMethods" style="width:80%"&gt;
    &lt;el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" ]]></description><category></category></item><item><title><![CDATA[ES6展开运算符]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/120675502</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/120675502</guid><author>webDevelopSnail</author><pubDate>Sat, 09 Oct 2021 17:33:21 +0800</pubDate><description><![CDATA[ES6展开运算符的一些用法
合并数组
// 合并数组的方法有很多，比如
arr1.push(...arr2) // 追加数组末尾
arr1.unshift(...arr2) // 追加数组开头
// 整合两个数组并将某个数组放到另一数组特定位置
let arr1 = ["one","two"]
let arr2 = ["three",...arr1, "four"]
// 变成["three","one","two","four"]

拷贝数组
// 常用的是Arry.prototype.slice ,用展]]></description><category></category></item><item><title><![CDATA[vue中this.$set的用法]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/120669211</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/120669211</guid><author>webDevelopSnail</author><pubDate>Sat, 09 Oct 2021 13:59:47 +0800</pubDate><description><![CDATA[应用场景
官网：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新
当给对象添加一个属性，控制台可打印出来，但未更新到视图时使用
// 1.template标签的代码
  &lt;div v-for="(item,index) in list" :key=index&gt;
       {{item.name}}
     &lt;/div&gt;
     &lt;el-button @click="changValue" type="primary"&gt;我变了&lt;/el]]></description><category></category></item><item><title><![CDATA[el-dialog中handleClose]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/118918937</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/118918937</guid><author>webDevelopSnail</author><pubDate>Tue, 20 Jul 2021 00:45:17 +0800</pubDate><description><![CDATA[&lt;el-dialog
      :visible.sync="dialogVisible"
      width="100%"
      :before-close="handleClose"
    &gt;&lt;/el-dialog
    // 其中dialogVisible 这个局部变量控制着弹窗的显示隐藏,vue方法中
    handleClose(done){
        this.$confirm('确定关闭吗').then(() =&gt; {
          // ]]></description><category></category></item><item><title><![CDATA[vue中的css作用域、vue中的scoped坑点]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/118549861</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/118549861</guid><author>webDevelopSnail</author><pubDate>Wed, 07 Jul 2021 16:25:41 +0800</pubDate><description><![CDATA[vue中的css作用域及scoped坑点
最近项目调样式时遇到问题，自定义和组件样式冲突，导致改了这个影响那个，折腾半天，看了这篇文章，完美解决；
一、css作用域
之前一直很困扰css的作用域问题，即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。导致在css中需要加上对应模块的html的id/class 使用css选择器 保证css的作用域不会变成全局 而被其它模块的css污染。在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修]]></description><category></category></item><item><title><![CDATA[手写时间线及复选功能]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/116565903</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/116565903</guid><author>webDevelopSnail</author><pubDate>Sun, 09 May 2021 16:04:03 +0800</pubDate><description><![CDATA[最近项目接触大屏有对于时间刻度的筛选，由于时间线上可单复选且不能超过2个（2个是中间的时间间隔），查看element一些组件不符合要求，就手写一个，效果图如下：

代码附上：
1. html
    &lt;div class="timeLine"&gt;
      &lt;div
        class="item"
        v-for="(item, index) in items"
        :key="index"
        :class="hoursArr.include]]></description><category></category></item><item><title><![CDATA[uniapp文档常用整理]]></title><link>https://blog.youkuaiyun.com/webDevelopSnail/article/details/115594072</link><guid>https://blog.youkuaiyun.com/webDevelopSnail/article/details/115594072</guid><author>webDevelopSnail</author><pubDate>Sun, 11 Apr 2021 12:43:59 +0800</pubDate><description><![CDATA[1.环境判断
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

2.判断平台

编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码

// #ifdef H5
    alert("只有]]></description><category></category></item></channel></rss>