<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[different9102的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/different9102</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; different9102]]></copyright><item><title><![CDATA[echarts 关系图实现一整条链路高亮]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/141125945</link><guid>https://blog.youkuaiyun.com/different9102/article/details/141125945</guid><author>different9102</author><pubDate>Mon, 12 Aug 2024 11:30:24 +0800</pubDate><description><![CDATA[echarts 关系图实现高亮整一条链路]]></description><category></category></item><item><title><![CDATA[echarts树状图 实现字体大小随着鼠标滚轮变大变小]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/140297900</link><guid>https://blog.youkuaiyun.com/different9102/article/details/140297900</guid><author>different9102</author><pubDate>Tue, 09 Jul 2024 15:52:21 +0800</pubDate><description><![CDATA[3、手动给原数据每个对象塞collapsed 的值，监听点击事件，动态修改collapsed 的值然后重新setOption，保证用户每次操作都被记录下来。（其中想用expand事件来着，但是无效（vue3版本3.3.9 echart版本5.4.3））1、经查阅文档 getOption()获取的是第一次渲染后的静态配置项目。因此在监听mousewheel事件时，动态改变字体的大小的时候，会重新渲染树结构。1.遇到的问题 鼠标滚动时，树状图会立刻回到原始状态，未保留用户展开收起节点的操作后的状态。]]></description><category></category></item><item><title><![CDATA[【Avue upload上传组件回显文件名，并下载或打开图片】]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/131768818</link><guid>https://blog.youkuaiyun.com/different9102/article/details/131768818</guid><author>different9102</author><pubDate>Mon, 17 Jul 2023 16:23:02 +0800</pubDate><description><![CDATA[重点就是在uploadAfter方法中添加文件名后缀，和uploadPreview方法中去掉后缀。如果小伙伴有更好的解决办法，欢迎补充~]]></description><category></category></item><item><title><![CDATA[uni-app 开发套圈圈小游戏 vue js]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/130249646</link><guid>https://blog.youkuaiyun.com/different9102/article/details/130249646</guid><author>different9102</author><pubDate>Wed, 19 Apr 2023 17:57:03 +0800</pubDate><description><![CDATA[【代码】uni-app 开发套圈圈小游戏 vue js。]]></description><category></category></item><item><title><![CDATA[elementUI table表格中 type=“expand“，展开行属性展开时下方展示轮播图的交互实现]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/130249116</link><guid>https://blog.youkuaiyun.com/different9102/article/details/130249116</guid><author>different9102</author><pubDate>Wed, 19 Apr 2023 17:38:37 +0800</pubDate><description><![CDATA[最近遇到要实现一种类似于抖音排行榜的设计的需求，在表格中展示轮播图，在这里我简单写一下实现与踩坑点。1.首先要安装swiper（最好安装5版本，高版本会有bug）（1）记得在expand-change中再初始化一遍轮播图。3.页面（组件）引入swiper并注册。5.js部分（写在method中）（2）轮播图类名要动态渲染。]]></description><category></category></item><item><title><![CDATA[上传视频 获取视频第一帧 做为封面 前端js]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/129885564</link><guid>https://blog.youkuaiyun.com/different9102/article/details/129885564</guid><author>different9102</author><pubDate>Fri, 31 Mar 2023 17:55:17 +0800</pubDate><description><![CDATA[用canvas获取视频第一帧作为封面图]]></description><category></category></item><item><title><![CDATA[文字两端对齐 文字平均分布在盒子中 css样式]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/125097503</link><guid>https://blog.youkuaiyun.com/different9102/article/details/125097503</guid><author>different9102</author><pubDate>Thu, 02 Jun 2022 11:29:42 +0800</pubDate><description><![CDATA[重点就是这个属性 使文字平铺（平均铺满）盒子中 。text-align-last: justify;]]></description><category></category></item><item><title><![CDATA[axios get请求时编码问题]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/124494699</link><guid>https://blog.youkuaiyun.com/different9102/article/details/124494699</guid><author>different9102</author><pubDate>Fri, 29 Apr 2022 14:08:32 +0800</pubDate><description><![CDATA[axios做get请求时，会对参数进行编码，但不会对功能型字符进行编码
所以get请求中含有这些字符时就不会参与编码导致接口出错，跨域等问题。
解决方案：
参数不要写在axios封装的参数对象里，get的参数直接拼接在url链接上，这时axios就不会对此进行编码!
encrypt(phone: any) {
    return fetch.get(
      `${configService.service.encrypt}/encrypt.xsp?phones=${encodeURIComponen]]></description><category></category></item><item><title><![CDATA[width: fit-content；的兼容性问题以及定位盒子的宽度问题]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/123568605</link><guid>https://blog.youkuaiyun.com/different9102/article/details/123568605</guid><author>different9102</author><pubDate>Fri, 18 Mar 2022 10:51:37 +0800</pubDate><description><![CDATA[width: fit-content;的兼容性问题，以及定位的盒子未设置宽度，导致换行的问题下面是解决问题的过程解决问题
下面是解决问题的过程
首先我们要了解盒子定位了之后，不设置宽度，宽度是父盒子的一半这个概念。
内容少于一半不会出现问题，大于父盒子的一半就会出现换行。
因此我们会想到用width: fit-content;或者width: auto;去让盒子自动撑开。
结果这两个是有兼容性的。目前测试了十几种机型以及浏览器，只有一个机型可能会出现问题  iphone 11 手机百度浏览器。
解决问题
1]]></description><category></category></item><item><title><![CDATA[vue vue3 watch监听不到对象变化？试试immediate属性吧]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/122038476</link><guid>https://blog.youkuaiyun.com/different9102/article/details/122038476</guid><author>different9102</author><pubDate>Mon, 20 Dec 2021 12:09:03 +0800</pubDate><description><![CDATA[vue vue3 watch 监听]]></description><category></category></item><item><title><![CDATA[Vite+vue+element 之Vite打包的坑]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/121672217</link><guid>https://blog.youkuaiyun.com/different9102/article/details/121672217</guid><author>different9102</author><pubDate>Thu, 02 Dec 2021 10:50:53 +0800</pubDate><description><![CDATA[项目中使用vite打包工具，
webpack配置如下：

打包报错：

解决方案：
修改webpack配置如下：

去掉 “vue-tsc --noEmit &amp;&amp; ”
再打包，成功

]]></description><category></category></item><item><title><![CDATA[npm使用国内淘宝镜像的方法]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/121101341</link><guid>https://blog.youkuaiyun.com/different9102/article/details/121101341</guid><author>different9102</author><pubDate>Tue, 02 Nov 2021 15:31:56 +0800</pubDate><description><![CDATA[npm使用国内淘宝镜像的方法
一、通过命令配置
npm config set registry https://registry.npm.taobao.org

二、验证命令
npm config get registry

原地址：https://www.cnblogs.com/bonelee/p/9995550.html 点击跳转.

]]></description><category></category></item><item><title><![CDATA[vue环境简单实现动态瀑布流效果]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/120956885</link><guid>https://blog.youkuaiyun.com/different9102/article/details/120956885</guid><author>different9102</author><pubDate>Mon, 25 Oct 2021 18:30:20 +0800</pubDate><description><![CDATA[vue环境简单实现动态瀑布流效果
最近开发项目需要实现动态瀑布流效果，项目本身是vue环境，网上很难找到类似的效果，vue-waterfall插件，懂的都懂。看了源码就知道不符合我项目目前的场景。（列表是循环渲染，高度不能提前预知也不能提前获取到，因此该组件是用不了的。—看了waterfall组件示例源码的小伙伴应该清楚）。
除了waterfall，其次就是用原生js写了。但是我不想用原生js写在vue项目中，过于冗长且不便维护。于是结合目前的情况我给出一个方案：
tips：我们项目导致瀑布流的主要原因只是]]></description><category></category></item><item><title><![CDATA[关于table表格超长连续字段（长数字和长单词） 破坏表格布局的问题的解决方案]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/120739410</link><guid>https://blog.youkuaiyun.com/different9102/article/details/120739410</guid><author>different9102</author><pubDate>Wed, 13 Oct 2021 10:59:10 +0800</pubDate><description><![CDATA[table表格超长连续字段（长数字和长单词） 破坏表格布局的问题
近期遇到了这个问题特地去整理了解决方案给到小伙伴，希望能给有同样问题的小伙伴一些帮助
首先，我们是要给到超多文本的字段显示一部分，然后剩下的用省略号代替（…），鼠标浮动上显示全部内容（title属性就行~）
这一步的代码如下：
.ellipsis{
	    overflow:hidden;
        display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;
	    text-overflow:ellipsis;]]></description><category></category></item><item><title><![CDATA[css修改导航条样式]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/120727197</link><guid>https://blog.youkuaiyun.com/different9102/article/details/120727197</guid><author>different9102</author><pubDate>Tue, 12 Oct 2021 17:00:03 +0800</pubDate><description><![CDATA[css修改导航条样式
近期由于工作需要要修改table表格导航条样式。
本人特整理出相关代码，以及最后效果，供各位小伙伴参考。
具体代码如下：
.xp-table-content ::-webkit-scrollbar {
    width:8px;
    height: 8px;
}
.xp-table-content ::-webkit-scrollbar-thumb:horizontal  {
    border-radius:10px;
    background:rgba(0,0,0,0.]]></description><category></category></item><item><title><![CDATA[css设置文本显示行数，多出用省略号代替]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/120718179</link><guid>https://blog.youkuaiyun.com/different9102/article/details/120718179</guid><author>different9102</author><pubDate>Tue, 12 Oct 2021 10:24:31 +0800</pubDate><description><![CDATA[css设置文字显示任意行 123…行,溢出部分用省略号代替@TOC
.ellipsis{
         overflow:hidden;
         display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;
          text-overflow:ellipsis;//溢出部分用省略号代替
           -webkit-line-clamp:1; //设置文本显示1行，想要几行把1替换掉就行
           -webkit-box-orient:vert]]></description><category></category></item><item><title><![CDATA[左右浮动的元素，再加一个普通元素 ，如何让普通元素居中]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/115167981</link><guid>https://blog.youkuaiyun.com/different9102/article/details/115167981</guid><author>different9102</author><pubDate>Wed, 24 Mar 2021 11:20:53 +0800</pubDate><description><![CDATA[左右浮动的元素，再加一个普通元素 ，如何让普通元素居中
今天遇到了这样一个问题，父盒子是display ：table ；
两个子盒子分别左右浮动，但是需求需要在中间位置加上一个标题。
因为用的是bootstrap导航组件，不便改组件的布局结构，所以自己加了个a标签；
但是放上之后无论如何无法居中，margin： 0  auto失效。但是margin-left有用，但是title的长度不一样，所以不能固定margin-left；
思考1：margin-left：50%；transform：translateX]]></description><category></category></item><item><title><![CDATA[uniapp坑之rich-text标签渲染富文本时video会消失.]]></title><link>https://blog.youkuaiyun.com/different9102/article/details/107731208</link><guid>https://blog.youkuaiyun.com/different9102/article/details/107731208</guid><author>different9102</author><pubDate>Sat, 01 Aug 2020 15:11:59 +0800</pubDate><description><![CDATA[uniapp坑之rich-text标签渲染富文本时video会消失.
最近在搞uniapp项目，做视频详情页渲染时，遇到rich-text标签渲染video标签一直无法显示视频的问题。经查询

上图链接 uniapp-richtext标签
rich-text无法渲染，我们可以去插件市场 找uParse 富文本解析插件进行替换
uParse 地址：uParse插件链接

...]]></description><category></category></item></channel></rss>