<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[vscode_js的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/vscode_js</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; vscode_js]]></copyright><item><title><![CDATA[vue3.x + elementplus 设置el-tree指定节点展开]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/126014698</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/126014698</guid><author>vscode_js</author><pubDate>Wed, 27 Jul 2022 14:55:28 +0800</pubDate><description><![CDATA[vue3.x + elementplus 设置el-tree指定节点展开]]></description><category></category></item><item><title><![CDATA[vue滚动插件之 vue-srcollto]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/125996294</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/125996294</guid><author>vscode_js</author><pubDate>Tue, 26 Jul 2022 15:56:33 +0800</pubDate><description><![CDATA[vue-srcollto 适用vue2.x和vue3.x]]></description><category></category></item><item><title><![CDATA[vue2.x-echarts公共组件封装--简易篇（3d柱状图，炫酷仪表盘，折线，曲线图）]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/125913485</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/125913485</guid><author>vscode_js</author><pubDate>Thu, 21 Jul 2022 16:56:41 +0800</pubDate><description><![CDATA[vue2.x-echarts公共组件封装--简易篇（3d柱状图，炫酷仪表盘，折线，曲线图）]]></description><category></category></item><item><title><![CDATA[vue+tinymce富文本插件的使用]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/124867943</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/124867943</guid><author>vscode_js</author><pubDate>Thu, 19 May 2022 17:51:59 +0800</pubDate><description><![CDATA[强大的富文本插件tinymce，集成在vue2.x项目里，用起来还是很简单的，下面先提供一下官方文档地址：

tinymce官方文档地址http://tinymce.ax-z.cn/general/upload-images.php接下来简单说一下如何使用，其实官方文档已经给我们列出来了使用方法，但是鄙人就更直接的提供给需要使用的小伙伴们。。。下面是vue-tinymce的文档地址：

vue-tinymce文档地址https://packy-tang.gitee.io/vue-tinymce/#/?id=]]></description><category></category></item><item><title><![CDATA[localStorage设置过期时间]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/95620717</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/95620717</guid><author>vscode_js</author><pubDate>Tue, 29 Mar 2022 15:28:51 +0800</pubDate><description><![CDATA[最近在项目中遇到一个很棘手的问题，业务需求是用户登录完成后，关闭浏览器自动清除用户信息，于是我把登录之后获取的用户信息放到sessionStorage存储，我以为这样就很完美。。。

于是乎，pc端进入详情需要新开页面，那么问题来了：新开的页面是不能共享sessionStorage存储的数据

此外话有一种方式就是放在cookie里面，因为cookie不设置过期时间关闭浏览器会自动清除，之前使用的js-cookie插件在模拟ie浏览器时遇到保存同名cookie数据没有更新

于是采用了localStorag]]></description><category></category></item><item><title><![CDATA[前端上传文件或图片比较大，采用oss直传的方式解决]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/122887111</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/122887111</guid><author>vscode_js</author><pubDate>Fri, 11 Feb 2022 21:32:22 +0800</pubDate><description><![CDATA[最近再vue开发的h5项目遇到一个上传图片缓慢的问题，于是采用oss直传的方式解决上传大文件或图片慢的问题，废话不多说，请看代码：


/**
 * oss 直传
 * @param {文件流：我使用的是vant上传组件拿到的file文件流} file 
 * @param {oss文件夹的名字} fileType 
 * @returns 
/** @type {*} */
//oss服务器的配置--在控制台可以获取到的（由于正式和测试的参数是不一样的，所以我统一放到环境变量管理起来）
const hea]]></description><category></category></item><item><title><![CDATA[element 验证出现英文以及自动验证问题]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/121946395</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/121946395</guid><author>vscode_js</author><pubDate>Wed, 15 Dec 2021 10:36:37 +0800</pubDate><description><![CDATA[最近在项目开发中用到了element-ui框架，写了一套很长的表单提交，用到了el-form整这个组件，用这个组件的好处就是我们不用单独去做表单的校验，也省了一堆if条件判断，下面请看官方示例：


&lt;el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"&gt;
  &lt;el-form-item label="密码" prop="pa]]></description><category></category></item><item><title><![CDATA[van-list immediate-check设置为false无效的问题]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/120017843</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/120017843</guid><author>vscode_js</author><pubDate>Tue, 31 Aug 2021 14:56:30 +0800</pubDate><description><![CDATA[最近在使用van-list组件开发带有tab切换的项目，需求是tab是后端返回的数据，所以获取列表数据要在tab返回之后调用，所以进入页面时默认不触发van-list的load事件，官方文档说明：如下图所示：



组件配置如图所示：



但是我们这样设置完成之后，刚刚进入页面是没问题的，当我们切换tab时还是会触发load事件多次，因此我的解决方案是：

根据有无数据使用v-if来控制van-list是否展示，因为有时候页面初始化没有数据时vant-list也会触发一次

完美解决多次触发load事..]]></description><category></category></item><item><title><![CDATA[使用npm包管理构建微信小程序步骤]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/119873952</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/119873952</guid><author>vscode_js</author><pubDate>Mon, 23 Aug 2021 17:39:16 +0800</pubDate><description><![CDATA[微信小程序使用npm包步骤

这里以npm引入小程序官方UI组件库vant-weapp为例

1.在小程序根目录内，初始化npm（官方文档上是没写出这一步，这里做个补充）


npm init

2.在小程序中执行命令安装 npm 包（这里使用了vant-weapp）：


npm i @vant/weapp -S --production



3.在微信开发者工具中的菜单栏：工具 --&gt; 构建 npm （这里记得先安装 npm 包，即步骤2）：



4.在微信开发者工具中的菜单栏：工具 --&.]]></description><category></category></item><item><title><![CDATA[微信小程序控制台警告：[Component] slot ““ is not found.]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/119872902</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/119872902</guid><author>vscode_js</author><pubDate>Mon, 23 Aug 2021 17:23:29 +0800</pubDate><description><![CDATA[近期在开发微信小程序的项目使用了vant-weapp这个ui框架，在进行一系列的配置后，一切都可以正常显示，但是控制台出现了这样的一条警告，顿时心里感觉有点不舒服了。。。

如图所示：





于是我查看了安装的vant-weapp包确实没有slot这个组件，但是功能没什么影响，可能是强迫症在作祟把，于是我突然想到会不会是小程序的基础库导致的呢。。。

经过我的测试，发现只要是微信小程序的基础库不高于2.18.0就不会出现这个警告。。。
...]]></description><category></category></item><item><title><![CDATA[element table type=“expand“ 设置成按钮展开]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/109678936</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/109678936</guid><author>vscode_js</author><pubDate>Mon, 23 Aug 2021 16:41:51 +0800</pubDate><description><![CDATA[最近在工作中遇到一个需求，有关element-ui table表格每一行展开并调用后端接口显示表格数据，看了一下官网api，关于展开是静态的，也就是说要把展开的数据拼在接口返回的data中，但是我们是要动态获取数据。。。对于这方面的需求开始研究了一下，看到有个大佬有关这方面的需求的博客，但是在实际开发中又遇到了一个很棘手的bug，于是。。。我解决了这个问题。。。废话不多说请看代码。。。

下面是需求相关：



接下来就是代码实现：


&lt;template&gt;
 &lt;div&gt;
 &lt;]]></description><category></category></item><item><title><![CDATA[vue单页面背景颜色修改]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/119206530</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/119206530</guid><author>vscode_js</author><pubDate>Thu, 29 Jul 2021 11:14:33 +0800</pubDate><description><![CDATA[最近在做项目中，使用vue开发移动端项目，遇到一个小问题，路由跳转同时修改当前页面的背景色。

下面简单说一下vue单页面应用，由于vue的单页面应用导致我们的项目只有一个index.html文件，然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。

废话不多说直接上代码，亲测百分之百有效：


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

&lt;script&gt;
exp]]></description><category></category></item><item><title><![CDATA[vue3.0获取虚拟dom方法]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/118681134</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/118681134</guid><author>vscode_js</author><pubDate>Mon, 12 Jul 2021 18:41:00 +0800</pubDate><description><![CDATA[最近使用vue3.0+vue-router4.x+element-plus ui框架联合开发了一个小的商城项目，首先简单说一下element-plus ui框架。

官网上介绍了element-plus ui框架适用于vue3.0开发pc端，使用时发现只是框架部分代码可以拿来直接使用，但是其余的代码还没有更新

下面总结vue3.0遇到的一些问题，老生长谈的就是虚拟dom的获取相对于vue2.x来说很是有点麻烦的，在vue2.x里面，我们只需在标签行内添加ref属性并赋值，那么我们就可以拿到这个dom节点，]]></description><category></category></item><item><title><![CDATA[vue-cli4.x项目启动本地出现 invalid host header的原因]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/118481684</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/118481684</guid><author>vscode_js</author><pubDate>Mon, 05 Jul 2021 09:42:55 +0800</pubDate><description><![CDATA[近段时间有个项目是单点登录的，项目里需要获取用户token，故本地配置host文件来访问线上项目，拿到cookie存储的用户token，所以配置了hosts文件。

之前用过vue-cli2.x,我们只需要配饰hosts文件就可以了。因为webpack是默认设置可配置host，但是新版的vue-cli4.x将这项配置独立出来，需要我们手动配置，其实也很简单，只需在vue.config.js文件中添加一个属性并设置值为true,


module.exports ={

    devServer: {
  ]]></description><category></category></item><item><title><![CDATA[iphoneX等移动端设备底部安全区域适配-简述]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/118294332</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/118294332</guid><author>vscode_js</author><pubDate>Mon, 28 Jun 2021 11:31:30 +0800</pubDate><description><![CDATA[前言

iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）

请看下面的示例：



以上就是我们要解决的问题，

其实解决起来还是很简单的，先说一下解决方案，然后再阐述一下为什么要这样做:

第一步：在我们的index.html页面的meta标签 viewport添加一个属性viewport-]]></description><category></category></item><item><title><![CDATA[关于小程序中富文本标签识别空格符&nbsp；的问题]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/116204319</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/116204319</guid><author>vscode_js</author><pubDate>Tue, 27 Apr 2021 16:41:28 +0800</pubDate><description><![CDATA[今天解决了一个显示的问题，在后台富文本输入框设置了这样的一个格式的文本：如下图所示：



在前端页面调用接口后，数据给我们返回得是如下所示：


content:"&lt;p style="white-space: normal;"&gt;主办单位：平安银行杭州支行&lt;/p&gt;&lt;p style="white-space: normal;"&gt;时&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;间：11月24日 14:00-17:00&lt;/p&gt;]]></description><category></category></item><item><title><![CDATA[js获取在线时间并展示，精确到秒]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/115729240</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/115729240</guid><author>vscode_js</author><pubDate>Thu, 15 Apr 2021 16:13:28 +0800</pubDate><description><![CDATA[js获取本地时间并展示在页面上：请看代码




    &lt;div class="curentTime" id="date"&gt;
        &lt;div class="hour"&gt;{{curTime.hour}}&lt;/div&gt;
        &lt;div class="point"&gt;:&lt;/div&gt;
        &lt;div class="minute"&gt;{{curTime.minute}}&lt;/div&gt;
        &lt;d]]></description><category></category></item><item><title><![CDATA[vue项目中使用echarts完成图表类的开发之柱状堆叠图]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/115632917</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/115632917</guid><author>vscode_js</author><pubDate>Mon, 12 Apr 2021 18:06:05 +0800</pubDate><description><![CDATA[柱状堆叠图，其实跟柱状图是一样的，本质上就是数据复杂一点：如何才能实现堆叠呢，就是一个属性：stack:"total",该属性在数据列表中也就是series数组中，针对每一个数据对象指定stack:"total"，stack的值要一致，下面我们看一个简单的例子：



子组件：请看代码


&lt;template&gt;
  &lt;div class="histogram" :style="{ 'width': histogramLevelData.width }"&gt;
    &lt;div ..]]></description><category></category></item><item><title><![CDATA[vue项目中使用echarts完成图表类的开发之折线图]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/115632509</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/115632509</guid><author>vscode_js</author><pubDate>Mon, 12 Apr 2021 17:55:26 +0800</pubDate><description><![CDATA[下面是折线图的简单介绍：



请看代码：

折线图：子组件


&lt;template&gt;
  &lt;div class="histogram" :style="{ width: lineEchartsData.width }"&gt;
    &lt;div
      class="histogramBar"
      :id="id"
      :style="{ width: '100%', height: lineEchartsData.lineEchartsHeight }"
  ]]></description><category></category></item><item><title><![CDATA[vue项目中使用echarts完成图表类的开发之柱状图]]></title><link>https://blog.youkuaiyun.com/vscode_js/article/details/115631898</link><guid>https://blog.youkuaiyun.com/vscode_js/article/details/115631898</guid><author>vscode_js</author><pubDate>Mon, 12 Apr 2021 17:49:17 +0800</pubDate><description><![CDATA[所有的图表配置基本上大同小异，下面就列举一下有关柱状图的配置项：



废话不多说，请看代码：

子组件：水平柱状图（也就是图一）


&lt;template&gt;
  &lt;div class="histogram" :style="{ 'width': histogramLevelData.width }"&gt;
    &lt;div class="histogramBar" :id="id" :style="{'width':'100%','height': histogramLevelDa]]></description><category></category></item></channel></rss>