<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[sunlight_01的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/sunlight_01</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; sunlight_01]]></copyright><item><title><![CDATA[批量导入模态框组件]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/146974413</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/146974413</guid><author>sunlight_01</author><pubDate>Thu, 03 Apr 2025 10:21:10 +0800</pubDate><description><![CDATA[【代码】批量导入模态框组件。]]></description><category></category></item><item><title><![CDATA[GeneralInfo -- 一般详情]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/143189870</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/143189870</guid><author>sunlight_01</author><pubDate>Thu, 24 Oct 2024 09:52:35 +0800</pubDate><description><![CDATA[Ant Design 的封装组件，这个组件不仅继承了 Ant Design 的美观和功能性，还增加了额外的定制性和易用性，使其成为展示详情信息或其他类似数据的完美选择。组件提供了丰富的 API，允许开发者根据具体需求定制每一个细节。通过 Property接口，你可以轻松定义每个属性的标签、获取值的函数、是否显示的条件，以及更多的布局属性。]]></description><category></category></item><item><title><![CDATA[项目中接入神策埋点]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/135346024</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/135346024</guid><author>sunlight_01</author><pubDate>Tue, 02 Jan 2024 17:59:02 +0800</pubDate><description><![CDATA[定义环境变量 VITE_PROJECT_ENV (prod demo test)使用npm 或 yarn 或 pnpm 安装依赖。将神策埋点信息挂载到 vue 实例下。3s算一次曝光 可写在路由拦截中。或直接通过window获取实例。]]></description><category></category></item><item><title><![CDATA[「 纯css实现进度条百分比效果」]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/135051838</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/135051838</guid><author>sunlight_01</author><pubDate>Tue, 02 Jan 2024 17:22:05 +0800</pubDate><description><![CDATA[/div></div>{{ '页面加载中...' }}</div></div>top: 50%;left: 50%;left: 78px;// process 动效 loading 2s 结束 可更改&-mask {&-text {top: 330px;100% {]]></description><category></category></item><item><title><![CDATA[react--自定义列表字段]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/135343116</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/135343116</guid><author>sunlight_01</author><pubDate>Tue, 02 Jan 2024 17:13:59 +0800</pubDate><description><![CDATA[支持react表格自由选择展示的字段，支持全选


2、组件使用 

页面导入 import CustomColumns from "@/components/CustomColumns";
设置默认状态：


 3、定义tableColumns

4、在table组件中过滤出操作选项和默认项

5、组件调用]]></description><category></category></item><item><title><![CDATA[react-封装Echarts基础配置项]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/134249011</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/134249011</guid><author>sunlight_01</author><pubDate>Mon, 06 Nov 2023 16:17:23 +0800</pubDate><description><![CDATA[针对Echarts配置项做的封装处理，项目中多次用到一个类型的图表时可封装节省多余代码，可以根据自己项目需求做出修改。基于上一篇文章做出的补充（]]></description><category></category></item><item><title><![CDATA[react-封装Echarts组件]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/134248765</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/134248765</guid><author>sunlight_01</author><pubDate>Mon, 06 Nov 2023 16:12:43 +0800</pubDate><description><![CDATA[1、根据代码可复用性，实现Echarts的基础组件封装，含自适应重复渲染，点击事件防抖。]]></description><category></category></item><item><title><![CDATA[各类文件下载 示例]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/129580099</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/129580099</guid><author>sunlight_01</author><pubDate>Thu, 16 Mar 2023 10:04:45 +0800</pubDate><description><![CDATA[文件下载示例 >> 各类函数封装。base64Conver.ts文件。]]></description><category></category></item><item><title><![CDATA[【javascript】axios与fetch常见封装方法]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/125259610</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/125259610</guid><author>sunlight_01</author><pubDate>Mon, 13 Jun 2022 14:37:47 +0800</pubDate><description><![CDATA[二次封装axios 和 window.fetch]]></description><category></category></item><item><title><![CDATA[element form && tabel 的二次封装及使用＜vue＞]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/124998082</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/124998082</guid><author>sunlight_01</author><pubDate>Fri, 27 May 2022 09:52:16 +0800</pubDate><description><![CDATA[&lt;!-- 搜索表单 --&gt;
&lt;template&gt;
&lt;div class="ces-search"&gt;
    &lt;el-form :size="size" inline :label-width="labelWidth"&gt;
        &lt;el-form-item v-for='item in searchForm' :label="item.label" :key='item.prop'&gt;
            &lt;!-- 输入框 --&g.]]></description><category></category></item><item><title><![CDATA[仿soul 3d 星球]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/124402872</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/124402872</guid><author>sunlight_01</author><pubDate>Mon, 25 Apr 2022 13:26:55 +0800</pubDate><description><![CDATA[&lt;template&gt;

 &lt;div class="tagBall"&gt;

  &lt;a class="tag" target="_blank" rel="external nofollow" :style="getStyle(item)" v-for="(item, index) in nameList" :key="index" &gt;{{item.wordName}}&lt;/a&gt;

 &lt;/div&gt;

&lt;/template&gt;



&lt;...]]></description><category></category></item><item><title><![CDATA[vue 使用 watch 监听 computed计算属性实现本地搜索及升序排序]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/122239136</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/122239136</guid><author>sunlight_01</author><pubDate>Thu, 30 Dec 2021 16:24:46 +0800</pubDate><description><![CDATA[一，watch 监听实现模糊搜索

1.本地数据





2，js 代码


 watch: {
    keyValue: {
      immediate: true, // 页面初始化时候执行, keyValue 为 undefined 将 filPersons = persons
      handler(val) {
        // 拿到 oldValue 做过滤 和 persons 数组中的值做一个比对
        // 将拿到的值重新赋值给 filPersons
      .]]></description><category></category></item><item><title><![CDATA[数组 || 对象的一些操作]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/122170950</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/122170950</guid><author>sunlight_01</author><pubDate>Mon, 27 Dec 2021 14:10:49 +0800</pubDate><description><![CDATA[1，数组对象转成键值对的形式






const array = [
{
   key:"name",
   value:"testpostman22"
},
{
   key:"remark",
   value:"测试postman22"
}]
const arrayToObject = array =&gt; {
    const result = {}
    array.forEach(item =&gt; {
        result[item.key] = item.value
 .]]></description><category></category></item><item><title><![CDATA[vue大屏列表无缝滚动之vue-seamless-scroll]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/122039040</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/122039040</guid><author>sunlight_01</author><pubDate>Mon, 20 Dec 2021 13:15:26 +0800</pubDate><description><![CDATA[vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

官方文档：vue-seamless-scroll的简介及使用教程 - Made with Vuejs

一，下包

npm安装 ：


npm install vue-seamless-scroll --save

yarn 安装：


yarn add vue-seamless...]]></description><category></category></item><item><title><![CDATA[vue中实现模糊搜索更新数据]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/121077124</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/121077124</guid><author>sunlight_01</author><pubDate>Mon, 01 Nov 2021 11:44:39 +0800</pubDate><description><![CDATA[在计算属性中定义：

利用 filter 和 includes 过滤找寻你所寻找的数据


 computed:{
    // 模糊搜索
    search() {
      if(this.value) {
        return this.tableData.filter((value) =&gt; {
          return value.orgName.includes(this.value)
        })
      }
    }
  },

在me...]]></description><category></category></item><item><title><![CDATA[typScript学习笔记（下）]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/119024924</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/119024924</guid><author>sunlight_01</author><pubDate>Tue, 27 Jul 2021 15:52:35 +0800</pubDate><description><![CDATA[一、TS 继承

classPerson{

name:string;

age:number;



//通过constructor构造函数创建自己的小动物

constructor(name:string,age:number){

this.name=name;

this.age=age

}



sayhi(val:string){

console.log('我你爹');

console.log(val);

...]]></description><category></category></item><item><title><![CDATA[webpack打包TS代码的基本配置]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/118994300</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/118994300</guid><author>sunlight_01</author><pubDate>Thu, 22 Jul 2021 11:01:08 +0800</pubDate><description><![CDATA[一、新建项目

---- npm init -y 初始化项目生成package.json文件

二、下包

----- 开发依赖
----- cnpm i -D webpack webpack-cli typescript ts-loader

三、配置webpack.config.js文件

最基本的webpack.config.js的配置
// 引入一个包
const path = require('path')

module.exports = {
  // 指定入口文件
  entry: ...]]></description><category></category></item><item><title><![CDATA[tsconfig.json的部分配置选项]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/118967349</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/118967349</guid><author>sunlight_01</author><pubDate>Wed, 21 Jul 2021 15:19:57 +0800</pubDate><description><![CDATA[根目录创建tsconfig.json文件：


{
    // tsconifig.json 是ts编译器的配置文件，ts编译器可以根据他的信息来对代码进行编译
    // 指定编译文件
    // 路径：** 任意目录 * 任意文件
    "include": [
        "./src/**/*"
    ],
    // 不需要被编译的文件
    "exclude": [
        "./src/hello/**/*"
    ],
    // 继承
    "extends]]></description><category></category></item><item><title><![CDATA[typeScript学习笔记（上）]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/118965193</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/118965193</guid><author>sunlight_01</author><pubDate>Wed, 21 Jul 2021 14:12:04 +0800</pubDate><description><![CDATA[一，配置环境
1、在node.js基础下全局安装TS插件

2、安装 typescript：
npm install -g typescript || cnpm install -g typescript

3,查看版本 tsc -v
Version 4.3.5 // 出现版本号安装成功

二、TS的基础运用
1、在vscode中书写TS， 文件后缀名为 .ts 的文件
function sayhi(name: string):void {
  console.log('hi', name);
}

...]]></description><category></category></item><item><title><![CDATA[vue中使用element走马灯实现自定义按钮]]></title><link>https://blog.youkuaiyun.com/sunlight_01/article/details/118567000</link><guid>https://blog.youkuaiyun.com/sunlight_01/article/details/118567000</guid><author>sunlight_01</author><pubDate>Thu, 08 Jul 2021 09:59:37 +0800</pubDate><description><![CDATA[第一：

不需要自动轮播 :autoplay="false"，

不需要自带箭头arrow="never"

第二：

require('./img/1.png'),为数组方式在轮播图区域吧图片遍历生成

使用定位把按钮图片定位过去

第三：

使用ref进行调用走马灯自带方法进行图片切换



第四：

上代码，基本把图片一换就能用了


&lt;template&gt;
  &lt;div class="textOverView"&gt;
    &lt;div class="leftArro...]]></description><category></category></item></channel></rss>