<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[徐小硕—心之所向，素履以往]]></title><description><![CDATA[你想要的明天，一直都在你脚下]]></description><link>https://blog.youkuaiyun.com/qq_40601005</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_40601005]]></copyright><item><title><![CDATA[Vue3+ElementPlus实例_select选择器(不连续搜索)]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/135627153</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/135627153</guid><author>qq_40601005</author><pubDate>Tue, 16 Jan 2024 16:05:51 +0800</pubDate><description><![CDATA[这种不连续的匹配方式，就实现不了，用户体验较差，所以就开发了一个不连续搜索的select选择器，并带有输入内容的高亮提示。中，在搜索时都是输入连续的搜索内容，比如“app-store”选项，你要输入“这里我们借用了一下第三方的api库——1.如何不连续匹配选项。”，才能匹配这个选择，要是想输入“下面是我完成后的演示，请看。]]></description><category></category></item><item><title><![CDATA[Vue+Element-ui实例_在form中动态校验tag标签]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/134713477</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/134713477</guid><author>qq_40601005</author><pubDate>Thu, 30 Nov 2023 16:00:57 +0800</pubDate><description><![CDATA[动态form中添加动态tag标签，并校验tag]]></description><category></category></item><item><title><![CDATA[Vue+Element-ui实例_日历排班(自定义)]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/131376086</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/131376086</guid><author>qq_40601005</author><pubDate>Sun, 25 Jun 2023 13:57:46 +0800</pubDate><description><![CDATA[在日常开发需求中，可能会遇到给员工进行排班的需求，如果只是在table表格中显示，会显得枯燥、不直观，今天我们就来写一个可以自定义的日历排班功能，用的是vue2+element-ui。]]></description><category></category></item><item><title><![CDATA[Vue+Element-ui实例_el-tooltip 占比横条（可超过100%）]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/126778057</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/126778057</guid><author>qq_40601005</author><pubDate>Fri, 09 Sep 2022 10:37:46 +0800</pubDate><description><![CDATA[横向占比显示条，是可以超过100%]]></description><category></category></item><item><title><![CDATA[uni-app微信小程序——下拉多选框]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/126266032</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/126266032</guid><author>qq_40601005</author><pubDate>Wed, 10 Aug 2022 14:37:50 +0800</pubDate><description><![CDATA[在uni-app组件中并没有下拉多选框，在组件市场中找到了这个组件，整理了一下，以此记录 需要注意的是要使用scss]]></description><category></category></item><item><title><![CDATA[Vue+ant-design-pro（2）动态路由]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/125779556</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/125779556</guid><author>qq_40601005</author><pubDate>Thu, 14 Jul 2022 11:44:08 +0800</pubDate><description><![CDATA[ant-design-pro动态路由配置]]></description><category></category></item><item><title><![CDATA[Vue+ant-design-pro（1）第一次接触...]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/125778432</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/125778432</guid><author>qq_40601005</author><pubDate>Thu, 14 Jul 2022 10:31:09 +0800</pubDate><description><![CDATA[ant-design-pro学习]]></description><category></category></item><item><title><![CDATA[uni-app微信公众号（5）——新增、修改地址]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/121081896</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/121081896</guid><author>qq_40601005</author><pubDate>Mon, 01 Nov 2021 16:56:50 +0800</pubDate><description><![CDATA[承接上面一篇文章，没有看到上篇文章的童鞋请点这里uni-app微信公众号（4）——地址管理页面_徐小硕—心之所向，素履以往-优快云博客当然在一个类似商城的公众号中，自然也少不了用户地址的添加，下面我们就写一个收货地址的页面，页面中，可以简单的自动识别地址信息，设置默认地址，设置地址标签等功能，先来看看效果截图。（1）地址管理页面（1.1）页面代码 其实HTML页面代码就是一个简单循环遍历，先把填写的地址保存在vuex中，然后缓存到localStorage中，然后获取localStorage中的缓存，v-f]]></description><category></category></item><item><title><![CDATA[uni-app微信公众号（4）——地址管理页面]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/121080638</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/121080638</guid><author>qq_40601005</author><pubDate>Mon, 01 Nov 2021 15:59:23 +0800</pubDate><description><![CDATA[当然在一个类似商城的公众号中，自然也少不了用户地址的添加，下面我们就写一个收货地址的页面，页面中，可以简单的自动识别地址信息，设置默认地址，设置地址标签等功能，先来看看效果截图。



（1）地址管理页面

（1.1）页面代码

       其实HTML页面代码就是一个简单循环遍历，先把填写的地址保存在vuex中，然后缓存到localStorage中，然后获取localStorage中的缓存，v-for循环显示出来。其中需要注意的是，:class="{red:res.i...]]></description><category></category></item><item><title><![CDATA[uni-app微信公众号（3）——购物车]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/121037554</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/121037554</guid><author>qq_40601005</author><pubDate>Fri, 29 Oct 2021 17:13:15 +0800</pubDate><description><![CDATA[在上一篇文章中，我只是大概的介绍了一下我的购物车页面和功能，具体的实现，将会在本篇文档中详细介绍。

（1）选中、全选





购物车中的选中，调用vuex中写的代码，要改变选中，和全选的状态，还要动态改变合计的金额。

代码如下：

HTML代码


&lt;!-- 单选按钮 --&gt;
&lt;u-checkbox-group&gt;
	&lt;u-checkbox @change="goodCheckedProduct(item.id)" v-model="item.checked" :k...]]></description><category></category></item><item><title><![CDATA[uni-app微信公众号（2）——商铺展示、商品详情、购物车]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/121034918</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/121034918</guid><author>qq_40601005</author><pubDate>Fri, 29 Oct 2021 16:10:43 +0800</pubDate><description><![CDATA[唔...因为这个公众号做的是关于一个墓园的公众号（~_~）,所以有很多东西，都涉及到一些“不太好”的东西，所以大家看的时候，还挺谅解~

接下来做了一个商品展示，购物车展示，加入购物车等功能，如图所示





（1）商铺展示页面

商铺展示页，借鉴了uView组件中的垂直分类

垂直分类uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://www.uviewui.com/layout/menu.html代码里面也都有，大家可以下载下来看一下.]]></description><category></category></item><item><title><![CDATA[uni-app微信公众号（1）——网页授权登录]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/121028141</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/121028141</guid><author>qq_40601005</author><pubDate>Fri, 29 Oct 2021 14:25:53 +0800</pubDate><description><![CDATA[做关于微信上的小程序或者公众号，最重要的是——授权登录。

    微信公众号不同于小程序，公众号是基于H5开发的网页版“程序”，而小程序则更像是一个微型的“APP程序”。微信公众号更得是为了营销。小程序则是为了和用户交互。

    废话不多说，我们直接来看，如何开始做一个微信公众号

（1）申请公众号，开发者基本配置 

    这里就不做重复的叙述了。微信开发者文档上，写的很清楚#微信开发者文档https://developers.weixin.qq.c...]]></description><category></category></item><item><title><![CDATA[Vue+Element-ui实例_el-table可选列（字段）导出Excel]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/116481908</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/116481908</guid><author>qq_40601005</author><pubDate>Fri, 07 May 2021 10:25:30 +0800</pubDate><description><![CDATA[不知道小伙伴们有没有遇到过table表格导出Excel时，领导说“我不想全部导出，能不能选择我想导出的列（字段）”，心里嘀咕“你不能用Excel去操作嘛”，好叭，还是我来吧，下面这篇文章就简单的介绍了如何对el-table表格进行选择列（字段）的导出，进行了组件的封装处理，希望大家喜欢，如有纰漏望指正，谢谢

主要需要解决的问题：

（1）怎么样对展示的table表格进行选择列（字段）的处理

（2）v-if和v-show的不同处理

（3）如何进行组件封装

效果图如下：







下面是代码部分：
]]></description><category></category></item><item><title><![CDATA[Vue+Echarts实例_自定义tooltip、dataView]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/115479149</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/115479149</guid><author>qq_40601005</author><pubDate>Wed, 07 Apr 2021 11:03:46 +0800</pubDate><description><![CDATA[在使用echarts视图工具的时候，想必很多人都遇到过，某一条数据为null、undefined或者为0的时候，这时的tooltip就会出现以下（左下图）情况，看起来既不美观，也为繁琐，这时候就要对这种数据进行筛选处理；还有就是对dataView的处理，echarts自带的dataView显示如下（右下图），对人的眼力着实是一种考验。

      

以下我就根据一个具体案例，来详细介绍对tooltip和dataView的自定义处理。

效果图如下：









这个就是我对too...]]></description><category></category></item><item><title><![CDATA[Vue+Element-ui实例_el-checkbox二级复选框]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/112272026</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/112272026</guid><author>qq_40601005</author><pubDate>Wed, 06 Jan 2021 15:09:21 +0800</pubDate><description><![CDATA[想必大家在很多时候都会碰到多级复选框的情况吧，下面这篇文章介绍了vue结合el-checkbox组件，编写的一个二级复选框案例（多级也可以根据此案例仿写）。

主要难点：

（1）多次使用v-for循环，把需要展示的复选框按照，一级——二级的样式展现出来。

（2）当一级复选框选中时，二级复选框全选，当二级复选框非全选时，一级复选项为不选中状态，当二级复选框为全选时，一级复选框为选中状态。

（3）全部全选，和全部取消选中。

（4）记录选中的二级复选框id，方便后续操作。

效果图如下：





下面是]]></description><category></category></item><item><title><![CDATA[Vue+Element-ui实例_使用flexslider插件设计横向时间线]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/112005873</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/112005873</guid><author>qq_40601005</author><pubDate>Mon, 04 Jan 2021 09:32:48 +0800</pubDate><description><![CDATA[下面是做了一个类似时间线(history事件线)的页面，主要是记录一下log，或者history的操作记录。

主要难点：

（1）一般的插件时间线例如(elementUI中的el-timeline)就是纵向的时间线，如果数据过多的话，就会形成很长一段的下拉样式。

（2）最主要的就是CSS样式调节，（这个真的是头发）

（3）个人审美的不同，反正我做了好几个版本样式，每个人都有自己不同的喜好。

效果图如下：


...]]></description><category></category></item><item><title><![CDATA[Vue+Element-ui实例_可编辑表格和分页（2）改进版]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/109677366</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/109677366</guid><author>qq_40601005</author><pubDate>Fri, 13 Nov 2020 16:42:42 +0800</pubDate><description><![CDATA[本篇文章是对上一篇《Vue.js_实例_可编辑表格和分页》的改进版

改进处：

（1）对某一行的编辑时，设置背景颜色提醒，
]]></description><category></category></item><item><title><![CDATA[Vue+Element-ui实例_可编辑表格和分页]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/109091488</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/109091488</guid><author>qq_40601005</author><pubDate>Thu, 15 Oct 2020 11:19:19 +0800</pubDate><description><![CDATA[下面是一个可以实现编辑的表格，并且该表格嵌入在form表单内，可以对已修改的内容进行保存提交；而且实现了对表格数据进行关键字搜索和分类筛选的功能，实现了前端分页的效果。

主要难点：

（1）当el-table列数据过多时，我们可以通过设置 type="expand" 和Scoped slot可以开启展开行功能，然后在每一行设置一个可编辑按钮，对展开的数据中的某条数据进行再编辑。

（2）当你设置可编辑按钮时，还要对此行展开状态进行判断，判断该行是否为展开，若已展开，则编辑，若未展开，则展开进行编辑。
..]]></description><category></category></item><item><title><![CDATA[数组操作——判断、去重、合并、展开]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/108233200</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/108233200</guid><author>qq_40601005</author><pubDate>Wed, 26 Aug 2020 10:41:19 +0800</pubDate><description><![CDATA[在前端获取到后端传来的数据，或者将前端的数据传到后端的时候，往往都少不了对数组的操作，本篇文章就总结一些对数组的常规操作。

（1）判断是否为数组

当我们拿到一个数据的时候，在还不能确定该数据到底是不是数组的时候，我们首先要做的就是对该数据进行判断，判断其是不是数组。这里提供了五种判断方法，如下所示：


    &lt;script type="text/javascript"&gt;
			let arr = [1,2,3];
			
			/**第一种：instanceof */
			consol]]></description><category></category></item><item><title><![CDATA[页面布局——三栏布局解决方式]]></title><link>https://blog.youkuaiyun.com/qq_40601005/article/details/108141665</link><guid>https://blog.youkuaiyun.com/qq_40601005/article/details/108141665</guid><author>qq_40601005</author><pubDate>Fri, 21 Aug 2020 11:09:46 +0800</pubDate><description><![CDATA[在前端页面设计的时候，经常会出现左、中、右三栏布局的情况，往往左右两栏是一个固定值，而中间一栏是自适应，在面对这样的情况下，应该使用什么样的设计方案呢？本篇文章会介绍五种常用的解决方式，这五种方式可以根据具体的情况进行选择，接下来就逐一介绍。

首先我们先来看一下效果图：



这里是公用的代码部门：


&lt;head&gt;
		&lt;meta charset="utf-8"&gt;
		&lt;title&gt;五种方式解决三栏布局&lt;/title&gt;
		&lt;style type="]]></description><category></category></item></channel></rss>