<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[X_W123的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/X_W123</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; X_W123]]></copyright><item><title><![CDATA[vue引用public目录下文件]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/125008174</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/125008174</guid><author>X_W123</author><pubDate>Fri, 27 May 2022 18:11:58 +0800</pubDate><description><![CDATA[vue引用public目录下文件
有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？
其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了
关于协议的存储，这里简单说下，在实际开发中，协议存储有以下几种：
1、存放在前端，一种是直接放在public静态资源文件夹下，webpack打包不会对其处理，直接把文件复制到存放项目的工程目录下；还有一种就是托管在cdn上，类]]></description><category></category></item><item><title><![CDATA[vue完整的登陆页面开发]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/124990541</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/124990541</guid><author>X_W123</author><pubDate>Thu, 26 May 2022 20:02:37 +0800</pubDate><description><![CDATA[**
完整的登陆页面开发
**，组件使用的是vant ui，具体用法可去官网看。
分几个部分考虑，
一、输入框input的校验：1、blur时没有值和格式不符合的逻辑校验
2、限制输入长度逻辑，比如手机号只能11位，验证码只能6位。
二、验证码按钮逻辑：
1、不同状态下验证码颜色，文案，是否能点击，是否显示记数需要兼顾。
2、验证码能够正常点击是在手机号格式正确情况下，所以这里要有个监听手机号，一旦格式符合，验证码生效
3、关于计数器的逻辑。
以下会从上面的点开考虑：
一、input的校验没有可说的，记住俩]]></description><category></category></item><item><title><![CDATA[vue3不同环境下如何配置代理]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/122604262</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/122604262</guid><author>X_W123</author><pubDate>Thu, 20 Jan 2022 16:46:05 +0800</pubDate><description><![CDATA[实际开发的时候，经常会遇到并行开发的需求，会出现第一个需求接口转发是一个地址，下一个需求接口转发是一个地址，这时候如何解决呢？
第一种情况：前端也不申请多套环境。
本地开发时，多加个代理，比如叫api2，然后在当前需求的接口前面使用这个。
在这里插入图片描述
但是会出现个问题，前端页面加载后，只有涉及当前需求的模块接口是通的，其他模块的接口报错（并不是说其他模块有问题，其他模块已提测），因为你本地启动后，前端只有一套环境，但是后端有俩套环境，二者不一致。如果当前需求的模块数据依赖于之前模块，那测试流程将无法]]></description><category></category></item><item><title><![CDATA[vue中cannot read properties of null （reading ‘0‘）]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/122181580</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/122181580</guid><author>X_W123</author><pubDate>Mon, 27 Dec 2021 22:01:43 +0800</pubDate><description><![CDATA[本地开发中，很容易遇到这种类似问题，这个时候调试也能很好的解决，但是今天想说下，如果在打包之后遇到这种报错一般是啥问题
cannot read properties of null （reading ‘0’）
1⃣️首先确定打包没问题
2⃣️如果url输入回车后控制台就报错，那很可能是路由渲染的数据，即数组没有判断其是否有值就使用了，或者是左边导航栏的数据也没有判断是否有值，或者是后台返回的权限在使用的时候也没判断是否有值。
总之，重点检查出此渲染需要使用的数据。

...]]></description><category></category></item><item><title><![CDATA[vue+element如何实现页面顶部tag]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/122162558</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/122162558</guid><author>X_W123</author><pubDate>Mon, 27 Dec 2021 00:04:25 +0800</pubDate><description><![CDATA[vue中tag如何实现]]></description><category></category></item><item><title><![CDATA[element ui组件上传upload整理]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/122074490</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/122074490</guid><author>X_W123</author><pubDate>Tue, 21 Dec 2021 23:34:27 +0800</pubDate><description><![CDATA[element ui中upload方法总结]]></description><category></category></item><item><title><![CDATA[vue编辑表格报错 Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not of type ‘Element‘.]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/121709698</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/121709698</guid><author>X_W123</author><pubDate>Sat, 04 Dec 2021 00:37:34 +0800</pubDate><description><![CDATA[vue table报错]]></description><category></category></item><item><title><![CDATA[vue跨域接口转发]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/121688769</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/121688769</guid><author>X_W123</author><pubDate>Thu, 02 Dec 2021 23:11:57 +0800</pubDate><description><![CDATA[记录下关于跨域，接口转发的理解
//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
proxy: {
‘/rng’: {     //这里最好有一个 /
target: ‘http://45.105.124.130:8081’,  // 后台接口域名
ws: true,        //如果要代理 websockets，配置这个参数
secure: false,  // 如果是https接口，需要配置这个参数
changeOrigin: true,  //是否跨域]]></description><category></category></item><item><title><![CDATA[vue3新特性]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/120438838</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/120438838</guid><author>X_W123</author><pubDate>Thu, 23 Sep 2021 18:20:20 +0800</pubDate><description><![CDATA[这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
欢迎使用Markdown编辑器
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar]]></description><category></category></item><item><title><![CDATA[vue不使用vue-qr生成下载二维码]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/120372181</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/120372181</guid><author>X_W123</author><pubDate>Sat, 18 Sep 2021 18:32:26 +0800</pubDate><description><![CDATA[需求：不使用插件生成下载二维码。
表格内某一列点击查看，展示二维码，且支持下载,如图。

初始化的时候，后端返回表格数据的同时会把二维码图片地址返回。所以，整个逻辑就是，点击不同查看携带不同图片地址去访问接口。
1、点击查看，展示图片。


2、点击下载按钮（这里要解决跨域问题，本地开发和上测试服和生产的时候都得解决）,红色ip去除

3、接下来就是拿每个图片的标识开始发请求。


4、请求过去后，解析后端返回的流。

注意：这里需要注意的就是图片下载跨域处理，关于如何解决，上篇博文说过。
先关代码，我贴一]]></description><category></category></item><item><title><![CDATA[关于vue中proxy代理的一些理解]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/120369610</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/120369610</guid><author>X_W123</author><pubDate>Sat, 18 Sep 2021 16:41:34 +0800</pubDate><description><![CDATA[vue中proxy代理的理解
今天开发的时候 意外发现对vue的代理有了新的理解，以前都是很模糊的状态，先看图吧。

1、proxy里面是个大对象，如果有多个代理，直接在后面加子对象，实际开发中可能不止接口代理还有图片上传下载代理。
2、整个代理流程如何？
①首先得知道什么是代理，为什么需要代理？
代理：顾名思义就是代替别人做某事，到开发中也是这样，因为本地开发时基于node服务器进行开发，是不能直接请求后端的接口，一旦直接请求会报跨域错误，（不信可以试试把url直接写成后端地址，这时就会报错）如果这样的话]]></description><category></category></item><item><title><![CDATA[vue2或者vue3图片上传功能（upload）]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/120288920</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/120288920</guid><author>X_W123</author><pubDate>Tue, 14 Sep 2021 15:54:14 +0800</pubDate><description><![CDATA[采用element ui中upload组件上传，目前支持上传单张图片，如果多张可进行更改。
一、页面上组件使用

注意：①如果是多张图片，file-list会用到。②name是申明上传文件的格式，可以和后端商量，有时候上传图片后端只需要image格式，但有时候后端会把图片和文件定义成一种格式即file。③action。图片上传的接口地址，通常是公司的服务器，这个地址不能直接填测试地址，会报跨域问题，需要知道本地开发从哪里开始代理，我这里是从api开始代理，所以action后面为api+图片接口地址。④v-i]]></description><category></category></item><item><title><![CDATA[银行卡号手机号怎么用*号展示]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/115088467</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/115088467</guid><author>X_W123</author><pubDate>Mon, 22 Mar 2021 19:12:37 +0800</pubDate><description><![CDATA[关于银行卡号手机号怎么用*号展示
工作中经常会遇到银行卡号或者手机用*号隐藏部分数据，用到的知识点是字符串substring和substr方法
substring()和substr（）方法都是从0开始数，不包括最后一项。
手机号格式：
 computedPhone() {
      let res = JSON.parse(JSON.stringify(this.phone)) + "";
      if (res == "") {
        return "";
      }
      le]]></description><category></category></item><item><title><![CDATA[【ElementUI】日期选择器时间选择范围限制]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/114918245</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/114918245</guid><author>X_W123</author><pubDate>Wed, 17 Mar 2021 10:41:28 +0800</pubDate><description><![CDATA[element ui中日期日期范围的限制
官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。函数名disabledDate不可更改。
单个输入框


情景1: 设置选择今天以及今天之后的日期
data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() &lt; Date.now() - 8.64e7;
     ]]></description><category></category></item><item><title><![CDATA[浅谈git的推拉取合并功能]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/113763832</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/113763832</guid><author>X_W123</author><pubDate>Mon, 08 Feb 2021 23:27:39 +0800</pubDate><description><![CDATA[git一直以来都是我的硬伤，现在各种工具层出不穷，很多鼠标操作就能代替 手动输入git命令，今天就来谈一谈手动实现git的推拉取功能。
首先说下git add .存在得意义，为什么不直接提交git commit尼？其实git add .的作用就是将你变动得文件放入暂存区，这个区域用来记录你每次变动的文件，那有的人就会问 为什么需要这个  我每次变动直接提交推送不就好了嘛  但是你要知到当我们在写代码的时候 并不是文件变动一次就得需要走一编流程 所以这个时候我们就需要把变动的代码放到一个缓存区，一起提交推送，]]></description><category></category></item><item><title><![CDATA[工作中遇到的问题]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/111868801</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/111868801</guid><author>X_W123</author><pubDate>Mon, 28 Dec 2020 17:53:16 +0800</pubDate><description><![CDATA[工作中遇到的问题



由于上班期间会遇到各种奇葩问题，在这做个总结。
1、父组建引用自组件后，如何修改自组件内的样式。
我们知道在父组件直接修改自组件样式是不可行，所以需要用到深度作用选择器。&lt;&lt;&lt;.
用法：给在父组件中的子组件加个类名，深度选择子组件需要修改样式的类名。

在这里插入图片描述

2、如果页面上需要展示多个dialog，如何让他们平级展示。
同时展示多个弹框，只展示一个弹框原因是层级z-index值不同，值比较大的就会展示在最上面，可以打开控制台直接看出。
这就需要...]]></description><category></category></item><item><title><![CDATA[el-input只能输入数字，保留小数点俩位]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/111823607</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/111823607</guid><author>X_W123</author><pubDate>Sun, 27 Dec 2020 18:05:38 +0800</pubDate><description><![CDATA[由于项目中有很多控制输入框字符校验的规则，每次找都比较复杂，今天先做个罗列。
1、只能输入数字。
其实这个方法element组件自带el-input-numer可以解决，但是！但是！有个坑，如果你想在输入数字的基础上保留俩位数，你可能未设置precisio=2，对吧对吧，但是如果你继续想控制小数点前的位置个数时你就会发现这个组件拿不到像后面带零的长度，比如1.00打印出来也只是1，所以这个就得额外处理点和0 。当时真的气死我，还好经过同事的指点发现一个更好用的方法。
1⃣️只能输入数字的校验，注意input]]></description><category></category></item><item><title><![CDATA[解决date-picker切换日期无法赋值问题]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/110441873</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/110441873</guid><author>X_W123</author><pubDate>Wed, 02 Dec 2020 14:01:27 +0800</pubDate><description><![CDATA[上班期间遇到element ui中事件控件date-picker大坑，需求要点击编辑进来绑定回显后端返回的值，之后再次选择日期发现无法选中，更离谱的是选中的回调函数毛线都没用～  气死我了 当时。
就在这时 我想起了度娘。于是我百度了下，按照某位大佬的写法来了一遍 我靠 惊呆了 还真可以 这个方法就是在初始化的时候用this.$set(要回显的变量，后端返回的值)。请看截图。

...]]></description><category></category></item><item><title><![CDATA[vue实现导出excel功能]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/110225403</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/110225403</guid><author>X_W123</author><pubDate>Fri, 27 Nov 2020 13:39:55 +0800</pubDate><description><![CDATA[vue实现导出excel功能
对于导出的excel理解：
导出excel需要前后端协商约定返回流的格式，导出的内容和格式都是后端实现的，前端只需要将后端返回的文件流解析成浏览器能够识别的流，解析的过程都是统一的写法。
1、如何写
注意传参数方式：get方式的话，直接在请求接口后拼接参数，post方式，将参数放入data里面。



最终效果如图：


后端返回的文件流。
完整代码如下：
handleDownload() {
        axios({
          method: 'get',
 ]]></description><category></category></item><item><title><![CDATA[如何利用vue实现打印功能]]></title><link>https://blog.youkuaiyun.com/X_W123/article/details/110222503</link><guid>https://blog.youkuaiyun.com/X_W123/article/details/110222503</guid><author>X_W123</author><pubDate>Fri, 27 Nov 2020 10:43:06 +0800</pubDate><description><![CDATA[vue实现打印功能
vue自带插件可以实现打印功能，这就需要我们本地安装这个插件。
1、安装  npm install vue-print-nb --save
判断如何安装成功：package.json文件搜索print查看是否有，其实所有判断插件是否安     装成功都可以这样。

2，引入  安装好以后在main.js文件中引入
import Print from ‘vue-print-nb’
　　Vue.use(Print);  //注册
3、如何使用
打印按钮上加上自定义指令v-print，这个是v]]></description><category></category></item></channel></rss>