<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Yomuki的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Yomuki</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Yomuki]]></copyright><item><title><![CDATA[又又又是axios封装，顺便复习下ts]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/126037639</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/126037639</guid><author>Yomuki</author><pubDate>Thu, 28 Jul 2022 16:30:19 +0800</pubDate><description><![CDATA[useServer处理请求和响应拦截。响应拦截中会处理通用的http错误。响应拦截一旦被拦截就会进入reject状态。]]></description><category></category></item><item><title><![CDATA[优雅在vue3中使用echarts]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/125807742</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/125807742</guid><author>Yomuki</author><pubDate>Fri, 15 Jul 2022 16:55:29 +0800</pubDate><description><![CDATA[优雅]]></description><category></category></item><item><title><![CDATA[【工作笔记】不明确最终像素比的情况下的自适应大屏解决方案]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/124687781</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/124687781</guid><author>Yomuki</author><pubDate>Tue, 10 May 2022 14:59:42 +0800</pubDate><description><![CDATA[我也不知道为什么会不明确.....随手一下，方便下次抄

需求：大屏需铺满屏幕，不能出现滚动条，白边，布局错乱等问题。

设计稿为1920*1080

方案1：利用transform的scale直接缩放。

整一个缩放组件


&lt;template&gt;
  &lt;div class="screen-adapter" id="screenAdapter" :style="style"&gt;
    &lt;slot /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&]]></description><category></category></item><item><title><![CDATA[Pinia笔记]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/122836242</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/122836242</guid><author>Yomuki</author><pubDate>Wed, 09 Feb 2022 13:34:32 +0800</pubDate><description><![CDATA[什么是Pinia?

vue的状态管理。

Pinia特点


ts支持
	轻量级 1kb+
	没有mutations。
	actions 支持同步和异步
	没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
	无需手动添加 store，store 一旦创建便会自动添加；
引用自新一代状态管理工具，Pinia.js 上手指南 - 掘金


开发支持

时间旅行
	追踪actions
	dev工具支持




热模块更新

在不重新加载页面的情况下修改存储
	在开发过程中.]]></description><category></category></item><item><title><![CDATA[【class】接口使用类封装]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/119906978</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/119906978</guid><author>Yomuki</author><pubDate>Wed, 25 Aug 2021 11:44:13 +0800</pubDate><description><![CDATA[/*
 * @Desc: 接口使用类
 * @Author: Yomuki
 * @Date: 2021-08-25 11:14:00
 * @LastEditors: 曾茹菁
 * @LastEditTime: 2021-08-25 11:43:24
 */

// 接口类生成对象
const apiClassObj = {
  post: function () {},
  get: function () {},
};

// 用户信息(vuex)
const user = {};

export .]]></description><category></category></item><item><title><![CDATA[附件列图片获取改为PromiseAll]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/119027991</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/119027991</guid><author>Yomuki</author><pubDate>Fri, 23 Jul 2021 11:47:26 +0800</pubDate><description><![CDATA[情况：

后端传过来的附件信息与其他表单信息放在了一个对象里。
	附件信息的值不是图片而是图片id字符串（多个图片会有,分割）
我需要做的：

提取出所有的代表附件的参数。
	通过id走图片接口获取到图片地址。
	图片和前端参数对应。
以前采用的是非常简单有效但很慢的循环+await。真的太太太慢了，所以决定改为PromiseAll。

建立前端属性名和后端参数名的对应配置对象。

export const apiName = {
  前端属性名: "后端参数名",
  backCard: "bank_ca]]></description><category></category></item><item><title><![CDATA[2021-07-21 replaceAll]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/118969025</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/118969025</guid><author>Yomuki</author><pubDate>Wed, 21 Jul 2021 16:08:28 +0800</pubDate><description><![CDATA[(function() {
  function replaceAll(substr, newSubstr) {
    var regExp = new RegExp(substr, "g");
    return this.replace(regExp, newSubstr);
  }
  if (!String.prototype.hasOwnProperty("replaceAll")) {
    String.prototype.replaceAll = replaceAll;
  }
}).]]></description><category></category></item><item><title><![CDATA[【兼容性】new Date 出现 Invalid Date]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/118755819</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/118755819</guid><author>Yomuki</author><pubDate>Thu, 15 Jul 2021 11:37:20 +0800</pubDate><description><![CDATA[pc端new Date("2020-02-02 10:00:00")正常，移动端出现Invalid Date。





翻了下MDN ，发现这句话



之前偷懒直接全用了字符串构造。改函数吧QAQ

改前：



改后：

（格式判断暂无，日期写死在前端里了）




/**
 * @description: 时间区域判断
 * @param {*} checkArr
 * @return {*}
 */
export function checkDateTimeBetween(checkAr...]]></description><category></category></item><item><title><![CDATA[【utils】日期/时间]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/115196970</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/115196970</guid><author>Yomuki</author><pubDate>Thu, 25 Mar 2021 09:43:10 +0800</pubDate><description><![CDATA[/**
 * @description: 获取日期 yy-mm-dd
 * @param {*} date
 * @param {*} separate
 * @return {*}
 */
export function getDateStr(date = new Date(), separate = "-") {
  if (!(date instanceof Date)) return;
  let yy = date.getFullYear();
  let mm = padStartDay(da.]]></description><category></category></item><item><title><![CDATA[【utils】提取url中的参数/手机号验证/身份证验证/护照验证]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/115196628</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/115196628</guid><author>Yomuki</author><pubDate>Thu, 25 Mar 2021 09:36:34 +0800</pubDate><description><![CDATA[/**
 * @description: 获取url中的参数
 * @param {*}
 * @return {*}
 */
export function getUrlParams(name) {
  const reg = new RegExp("[?|&amp;]" + name + "=([^&amp;]*)(&amp;|$)", "i");
  const res = window.location.href.match(reg);
  // console.log(res);
  if (r.]]></description><category></category></item><item><title><![CDATA[【Webpack】webpack配置]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/114902682</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/114902682</guid><author>Yomuki</author><pubDate>Tue, 16 Mar 2021 22:41:07 +0800</pubDate><description><![CDATA[step 1 安装依赖

webpack webpack-cli webpack-dev-server
	babel-loader@7 babel-core babel-preset-env
	babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy
	less-loader css-loader style-loader
	postcss-loader.]]></description><category></category></item><item><title><![CDATA[【tailwind】黑暗模式]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/114259285</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/114259285</guid><author>Yomuki</author><pubDate>Mon, 01 Mar 2021 11:45:45 +0800</pubDate><description><![CDATA[官方文档 https://tailwindcss.com/docs/dark-mode

默认情况下，Tailwind不启用暗模式。

启用黑暗模式

tailwind.config.js


// tailwind.config.js
module.exports = {
  // media 根据系统自动切   class 手动切
  darkMode: 'media',
  // ...
}

使用黑暗模式

自动模式 media 下


&lt;div class="bg-white dark:bg]]></description><category></category></item><item><title><![CDATA[【ERROR】tailwindcss安装踩坑记录]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/114193085</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/114193085</guid><author>Yomuki</author><pubDate>Sat, 27 Feb 2021 21:25:10 +0800</pubDate><description><![CDATA[按照官网步骤走下来出现postcss版本过低的问题？

PostCSS plugin tailwindcss requires PostCSS 8.

解决方法：

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build


npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss]]></description><category></category></item><item><title><![CDATA[【JS】原生实现拖拽上传]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/114004035</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/114004035</guid><author>Yomuki</author><pubDate>Tue, 23 Feb 2021 21:59:31 +0800</pubDate><description><![CDATA[源视频 ：华峰前端工程师


&lt;!--
 * @Desc: 原生JS 实现文件/图片 拖拽效果 (移动端目前不适用)
 * @Author: Yomuki
 * @Date: 2021-02-23 12:24:27
 * @LastEditors: Yomuki
 * @LastEditTime: 2021-02-23 21:53:19
--&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta cha]]></description><category></category></item><item><title><![CDATA[【utils】防抖和节流]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/113919613</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/113919613</guid><author>Yomuki</author><pubDate>Sun, 21 Feb 2021 16:17:16 +0800</pubDate><description><![CDATA[节流


function throttle(callback, wait = 300) {
  let start = 0;
  return function (e) {
    let now = Date.now();
    if (now - start &gt;= wait) {
      callback.call(this, e);
      start = now;
    }
  };
}

防抖


function debounce(callback, time = 300) ]]></description><category></category></item><item><title><![CDATA[【ERROR】部分引入element-p引发的问题]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/113866534</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/113866534</guid><author>Yomuki</author><pubDate>Fri, 19 Feb 2021 20:55:53 +0800</pubDate><description><![CDATA[.libraryName is not a valid Plugin property

按照手册配置部分引入时发生的错误。

修改如下：

外层加个[]


module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "element-plus",
        customStyleName: (name) ]]></description><category></category></item><item><title><![CDATA[【CSS】条纹背景]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/113822821</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/113822821</guid><author>Yomuki</author><pubDate>Tue, 16 Feb 2021 11:00:27 +0800</pubDate><description><![CDATA[代码地址

横条纹


&lt;div class="container tiaowen1"&gt;&lt;/div&gt;


.container {
  width:100%;
  height:100vh;
}
.tiaowen1 {
  background:linear-gradient(pink 50%,#000 50%);
  background-size:100% 20%;
}



竖条纹


&lt;div class="container tiaowen2"&gt;&lt;/div]]></description><category></category></item><item><title><![CDATA[【CSS】单元素实现边框内圆角]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/113822761</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/113822761</guid><author>Yomuki</author><pubDate>Tue, 16 Feb 2021 10:35:06 +0800</pubDate><description><![CDATA[通过outline,box-shadow实现单元素内圆角。


&lt;div class="contaniner"&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde placeat, repudiandae dolore amet praesentium, fuga a eos id, provident deleniti minima sequi voluptates rem. Sint, nesci]]></description><category></category></item><item><title><![CDATA[【CSS】多重边框]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/113822546</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/113822546</guid><author>Yomuki</author><pubDate>Tue, 16 Feb 2021 10:25:59 +0800</pubDate><description><![CDATA[代码地址

box-shadow方案

box-shadow支持逗号分隔法，可以创建任意数量的投影。

注意点：

投影不会影响布局。
	外投影创造出来的假边框不会响应元素鼠标事件。如果需要响应事件，应转为内投影（inset），同时需要增加额外的内边距来腾出空隙。

&lt;div class="container one" onclick="console.log('click')" &gt;
  box-shadow
&lt;/div&gt;
&lt;div class="container two" ]]></description><category></category></item><item><title><![CDATA[【CSS】实现毛玻璃的两种方法]]></title><link>https://blog.youkuaiyun.com/Yomuki/article/details/113811918</link><guid>https://blog.youkuaiyun.com/Yomuki/article/details/113811918</guid><author>Yomuki</author><pubDate>Sun, 14 Feb 2021 22:47:28 +0800</pubDate><description><![CDATA[伪元素法

在需要显示毛玻璃的div后插入伪元素，伪元素采用绝对定位（即div需要relative）,背景图与毛玻璃下的图相同。

注意点：

为了解决该方法产生的中心模糊 边缘清晰的问题，需要将伪元素进行margin负值处理，div需要添加overflow:hidden；

&lt;!--
 * @Desc: 
 * @Author: Yomuki
 * @Date: 2021-02-14 22:18:10
 * @LastEditors: Yomuki
 * @LastEditTime: 2021-02]]></description><category></category></item></channel></rss>