- 博客(38)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue3+ElementPlus实例_select选择器(不连续搜索)
这种不连续的匹配方式，就实现不了，用户体验较差，所以就开发了一个不连续搜索的select选择器，并带有输入内容的高亮提示。中，在搜索时都是输入连续的搜索内容，比如“app-store”选项，你要输入“这里我们借用了一下第三方的api库——1.如何不连续匹配选项。”，才能匹配这个选择，要是想输入“下面是我完成后的演示，请看。
2024-01-16 16:05:51
880
原创 Vue+Element-ui实例_日历排班(自定义)
在日常开发需求中，可能会遇到给员工进行排班的需求，如果只是在table表格中显示，会显得枯燥、不直观，今天我们就来写一个可以自定义的日历排班功能，用的是vue2+element-ui。
2023-06-25 13:57:46
11323
11
原创 uni-app微信小程序——下拉多选框
在uni-app组件中并没有下拉多选框，在组件市场中找到了这个组件，整理了一下，以此记录 需要注意的是要使用scss
2022-08-10 14:37:50
17594
6
原创 uni-app微信公众号（5）——新增、修改地址
承接上面一篇文章，没有看到上篇文章的童鞋请点这里uni-app微信公众号（4）——地址管理页面_徐小硕—心之所向，素履以往-优快云博客当然在一个类似商城的公众号中，自然也少不了用户地址的添加，下面我们就写一个收货地址的页面，页面中，可以简单的自动识别地址信息，设置默认地址，设置地址标签等功能，先来看看效果截图。（1）地址管理页面（1.1）页面代码 其实HTML页面代码就是一个简单循环遍历，先把填写的地址保存在vuex中，然后缓存到localStorage中，然后获取localStorage中的缓存，v-f
2021-11-01 16:56:50
4432
4
原创 uni-app微信公众号（4）——地址管理页面
当然在一个类似商城的公众号中，自然也少不了用户地址的添加，下面我们就写一个收货地址的页面，页面中，可以简单的自动识别地址信息，设置默认地址，设置地址标签等功能，先来看看效果截图。（1）地址管理页面（1.1）页面代码 其实HTML页面代码就是一个简单循环遍历，先把填写的地址保存在vuex中，然后缓存到localStorage中，然后获取localStorage中的缓存，v-for循环显示出来。其中需要注意的是，:class="{red:res.i...
2021-11-01 15:59:23
3289
3
原创 uni-app微信公众号（3）——购物车
在上一篇文章中，我只是大概的介绍了一下我的购物车页面和功能，具体的实现，将会在本篇文档中详细介绍。（1）选中、全选购物车中的选中，调用vuex中写的代码，要改变选中，和全选的状态，还要动态改变合计的金额。代码如下：HTML代码<!-- 单选按钮 --><u-checkbox-group> <u-checkbox @change="goodCheckedProduct(item.id)" v-model="item.checked" :k...
2021-10-29 17:13:15
2030
原创 uni-app微信公众号（2）——商铺展示、商品详情、购物车
唔...因为这个公众号做的是关于一个墓园的公众号（~_~）,所以有很多东西，都涉及到一些“不太好”的东西，所以大家看的时候，还挺谅解~接下来做了一个商品展示，购物车展示，加入购物车等功能，如图所示（1）商铺展示页面商铺展示页，借鉴了uView组件中的垂直分类垂直分类uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://www.uviewui.com/layout/menu.html代码里面也都有，大家可以下载下来看一下.
2021-10-29 16:10:43
3173
原创 uni-app微信公众号（1）——网页授权登录
做关于微信上的小程序或者公众号，最重要的是——授权登录。 微信公众号不同于小程序，公众号是基于H5开发的网页版“程序”，而小程序则更像是一个微型的“APP程序”。微信公众号更得是为了营销。小程序则是为了和用户交互。 废话不多说，我们直接来看，如何开始做一个微信公众号（1）申请公众号，开发者基本配置 这里就不做重复的叙述了。微信开发者文档上，写的很清楚#微信开发者文档https://developers.weixin.qq.c...
2021-10-29 14:25:53
6040
1
原创 Vue+Element-ui实例_el-table可选列（字段）导出Excel
不知道小伙伴们有没有遇到过table表格导出Excel时，领导说“我不想全部导出，能不能选择我想导出的列（字段）”，心里嘀咕“你不能用Excel去操作嘛”，好叭，还是我来吧，下面这篇文章就简单的介绍了如何对el-table表格进行选择列（字段）的导出，进行了组件的封装处理，希望大家喜欢，如有纰漏望指正，谢谢主要需要解决的问题：（1）怎么样对展示的table表格进行选择列（字段）的处理（2）v-if和v-show的不同处理（3）如何进行组件封装效果图如下：下面是代码部分：
2021-05-07 10:25:30
4380
2
原创 Vue+Echarts实例_自定义tooltip、dataView
在使用echarts视图工具的时候，想必很多人都遇到过，某一条数据为null、undefined或者为0的时候，这时的tooltip就会出现以下（左下图）情况，看起来既不美观，也为繁琐，这时候就要对这种数据进行筛选处理；还有就是对dataView的处理，echarts自带的dataView显示如下（右下图），对人的眼力着实是一种考验。 以下我就根据一个具体案例，来详细介绍对tooltip和dataView的自定义处理。效果图如下：这个就是我对too...
2021-04-07 11:03:46
1103
原创 Vue+Element-ui实例_el-checkbox二级复选框
想必大家在很多时候都会碰到多级复选框的情况吧，下面这篇文章介绍了vue结合el-checkbox组件，编写的一个二级复选框案例（多级也可以根据此案例仿写）。主要难点：（1）多次使用v-for循环，把需要展示的复选框按照，一级——二级的样式展现出来。（2）当一级复选框选中时，二级复选框全选，当二级复选框非全选时，一级复选项为不选中状态，当二级复选框为全选时，一级复选框为选中状态。（3）全部全选，和全部取消选中。（4）记录选中的二级复选框id，方便后续操作。效果图如下：下面是
2021-01-06 15:09:21
4831
4
原创 Vue+Element-ui实例_使用flexslider插件设计横向时间线
下面是做了一个类似时间线(history事件线)的页面，主要是记录一下log，或者history的操作记录。主要难点：（1）一般的插件时间线例如(elementUI中的el-timeline)就是纵向的时间线，如果数据过多的话，就会形成很长一段的下拉样式。（2）最主要的就是CSS样式调节，（这个真的是头发）（3）个人审美的不同，反正我做了好几个版本样式，每个人都有自己不同的喜好。效果图如下：...
2021-01-04 09:32:48
10772
5
原创 Vue+Element-ui实例_可编辑表格和分页（2）改进版
本篇文章是对上一篇《Vue.js_实例_可编辑表格和分页》的改进版改进处：（1）对某一行的编辑时，设置背景颜色提醒，
2020-11-13 16:42:42
423
原创 Vue+Element-ui实例_可编辑表格和分页
下面是一个可以实现编辑的表格，并且该表格嵌入在form表单内，可以对已修改的内容进行保存提交；而且实现了对表格数据进行关键字搜索和分类筛选的功能，实现了前端分页的效果。主要难点：（1）当el-table列数据过多时，我们可以通过设置 type="expand" 和Scoped slot可以开启展开行功能，然后在每一行设置一个可编辑按钮，对展开的数据中的某条数据进行再编辑。（2）当你设置可编辑按钮时，还要对此行展开状态进行判断，判断该行是否为展开，若已展开，则编辑，若未展开，则展开进行编辑。..
2020-10-15 11:19:19
1931
5
原创 数组操作——判断、去重、合并、展开
在前端获取到后端传来的数据，或者将前端的数据传到后端的时候，往往都少不了对数组的操作，本篇文章就总结一些对数组的常规操作。（1）判断是否为数组当我们拿到一个数据的时候，在还不能确定该数据到底是不是数组的时候，我们首先要做的就是对该数据进行判断，判断其是不是数组。这里提供了五种判断方法，如下所示： <script type="text/javascript"> let arr = [1,2,3]; /**第一种：instanceof */ consol
2020-08-26 10:41:19
772
原创 页面布局——三栏布局解决方式
在前端页面设计的时候，经常会出现左、中、右三栏布局的情况，往往左右两栏是一个固定值，而中间一栏是自适应，在面对这样的情况下，应该使用什么样的设计方案呢？本篇文章会介绍五种常用的解决方式，这五种方式可以根据具体的情况进行选择，接下来就逐一介绍。首先我们先来看一下效果图：这里是公用的代码部门：<head> <meta charset="utf-8"> <title>五种方式解决三栏布局</title> <style type="
2020-08-21 11:09:46
1045
原创 uni-app微信小程序——商城（8）——订单详情
我们上一篇文章中写到了商品详情页的设计和实施，本篇文章讲述了订单详情，订单详情无非就是对商品的几种状态进行分类，参考某宝，把商品分为待付款、待发货、待收货、已完成等几种状态，然后使用VantWeapp组件中的“Tab 标签页”对其状态进行分类，然后使用“Card 商品卡片”组件将商品展示到对应的标签页下。效果图如下：在“Card 商品卡片”中使用了一个tag插槽在右上角使用不用的颜色和文字来标明该商品...
2020-08-21 09:40:56
8989
4
原创 uni-app微信小程序——商城（7）——商品详情
在我们讲完了最基础的四个tabBar栏之后，商城也算是初现模样，本篇文章将会介绍商品详情页面的制作，包括把商品加入购物车的功能、分享商品信息的功能等等，效果图如下：首先是做了是个三图轮播的样式来展示该商品，然后是商品信息的介绍，接着是分享商品和商品类型的挑选，最后使用VantWeapp中的GoodsAction ...
2020-08-19 09:42:52
9170
原创 uni-app微信小程序——商城（6）——我的主页
本篇文章要介绍微信小程序商城最重要的内容——我的主页，“我的”这个页面内容包含了太多的东西，比如用户的个人信息，订单内容，地址管理，客服电话等等。所以它成为了整个功能模块中最为重要的部门，本篇文章将只会介绍页面的设计和功能模块的规划，其他内容将会在后续文章中一一介绍。效果图如下所示：“我的”页面主要包括三个模块：个人积分及优惠券模块、订单内容模块、地址管理和客服联系等模块。三个模块基本包含了“我的”功能模块的基本内容，如果后续有具体的内容更新，还会在里面添加新的内容。代码内容如下：&l
2020-08-18 10:36:39
9917
8
原创 uni-app微信小程序——商城（4）——商家
上一篇文章介绍了商城主页的内容，商城主页也是默认的小程序进入的首页，主要介绍商品的类型和商品展示。本篇文章将会介绍商家一些信息，具体的内容还没有完善，只是对商家不同的类别进行分类展示，没有对商家做具体的内容介绍，后续会逐渐完善，然后再更新本章内容效果图如下所示：具体的代码如下：<template> <view class="shopContent"> <view class="header"> <van-row> <
2020-08-18 09:46:48
1487
2
原创 uni-app微信小程序——商城（3）——商城主页
前面两篇文章介绍了uni-app项目的创建和整体架构的搭建，还有如何使用分包加载和第三方组件等等，从这篇文章开始，我们就要进一步介绍具体的开发过程，做一个简单的微信小程序商城项目。首先在pages下创建一个index文件夹，再创建一个index.vue文件，用来写主页内容。创建index.vue文件可以选择简单模板，会出现三个模块，如下所示：<template></template><script></script><style&g
2020-08-17 16:26:33
4771
5
原创 uni-app微信小程序——商城（2）
在上一篇文章中，主要介绍了如何在HBuilderX上创建uni-app项目，和如何把项目运行在微信小程序工具上。这篇文章来介绍一下uni-app项目具体的语法使用；如何创建一个新的页面；如何使用第三方前端插件Vant Weapp；如何使用分包加载等等。接下来一个个逐步讲解吧~（1）创建整体页面架构就如微信小程序一样，我们需要默认启动页，创建页面路径，创建底部tab栏导航等等。如下图：这些统称为全局配置，需要在pages.json文件中配置。Tips：具体内容点击左侧链接查看。属性：“
2020-08-17 10:56:50
1998
1
原创 uni-app微信小程序——商城（1）
我这也是第一次在HBuilderX上使用uni-app框架来开发微信小程序，做一个微信商城的前端功能。这篇文章主要是记录如何从开始创建项目到整体架构的搭建，还有如何使用第三方前端插件VantWeapp，使页面更加美观，功能更加完善。对于uni-app的使用，很多都是vue的语法，对于学过vue的同学还是容易比较理解的。如果以前只是接触微信小程序，使用微信开发者开发的同学来说，好多语法格式还有有一些不同的，比如微信小程序API中的wx:for在uni-app中就要改为v-for；再比如将数据存储在本.
2020-08-14 15:29:37
2507
原创 uni-app的闲聊
前言：最近公司要做一款微信小程序的商城项目，以前在学校的时候，就是用微信开发者工具直接开发的，后来在公司就一直在做前端，都是PC端的，就很少接触微信小程序了，也一直使用的HBuilderX工具，现在要重新接触微信小程序，感觉再回去用微信开发者工具，就和我现在运用的知识脱轨了，所以为了能继续在HBuilderX上开发，接着使用Vue的相关知识框架，所以就选用了uni-app来进行微信小程序的开发。介绍uni-app：uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代...
2020-08-13 10:08:26
282
原创 uni-app微信小程序——商城（5）——购物车
基于Vue语法，使用uni-app框架来实现微信小程序中的购物车功能。实现购物车的全选，多选，计算总价，删除商品等功能。结合使用VantWeapp微信小程序前端框架来搭建购物车页面。效果图如下：效果视频如下：微信小程序购物车录屏百度云视频，链接：https://pan.baidu.com/s/1QQHIIT58woini-ggPmrzIA提取码：xzs8其中单个的商品可以使用左滑进行删除，视频没有体现出来，但是功能还是齐全的。下面是代码部门：<temp..
2020-08-12 12:07:42
3865
原创 Vue+Element-ui实例_评测表单
下面做了一个公司内部的评测表单页面，用于给公司内部人员打分，和写一些意见或建议。其中难点：（1）如何在固有elementUI框架中的table组件中，插入自己需要的组件，比如input。让table组件不仅仅是展示数据，还能写入数据。（2）如何利用v-for循环，首先把后台传来的，被评测人和对应的问题，写入table组件中。（3）如何再次利用v-for循环，把和问题对应的input组件循环到table组件中，比如分数使用el-input-number、意见或建议使用el-input。效果
2020-08-12 09:52:16
2153
原创 Vue.js_组件_认识和理解
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。学会了组件的使用，才能更好地将前面学习的知识运行起来，组件的使用使我们的项目更具有解耦性。更加符合MVVM的设计思想。（1）基础语法 注册一个全局组件语法： Vue.component(tagName，option) 其中tagName为组件名，options为配置项。 组件是一个可以复用的V...
2020-05-13 10:17:14
344
原创 Vue.js_认识_简单介绍
相信很多小伙伴都已经听说过前端的三大框架vue，angular，react；目前来说，这三大框架是现在非常流行的，但是在很多情况，我们会纠结于使用哪个框架比较好一些，所谓的“好一些”是指什么呢？也就是说，选择“好一些”的判断标准是什么呢？（1）这个框架的使用场景： 根据项目是否适用于Web端还是原生的APP，或者快速搭建一个小型项目等等。（2）可复用的组件： 框架中组件的复用性能够很大程度上减少了代码量，也方便了也方便了维护和管理。（3）该框架能够...
2020-05-12 16:33:44
418
原创 Vue+Element-ui实例_图书列表
下面做了一个图书列表，对图书进行新增和删除，并计算已存在图书的价格总和对新学习vue的同学可以作为小练习进行训练。运行截图如下：代码中使用到了Element-ui、Bootstrap.js前端框架Element-ui-CSS链接：element-ui-cssElement-ui-js链接：element-ui-jsBootstrap.js链接：Bootstrap.js下面是代码部分：<!DOCTYPE html><html> <he
2020-05-12 11:01:44
1315
原创 Vue.js_实例_订单列表
下面做了一个商品订单列表的页面，对商品进行选择并进行价格合计的计算。对新学习vue的同学可以作为小练习进行训练。运行截图如下：代码中使用了axios.js来实现对数据的异步操作。axios.js链接：axios.min.js下面是代码部分：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue_实例_订单列表</title>
2020-05-11 09:38:54
1364
原创 Vue.js_实例_品牌列表
下面做了一个汽车品牌列表的页面，可以对列表信息进行添加、删除和搜索操作对新学习vue的同学可以作为小练习进行训练运行截图如下：其中使用到Bootstrap.js框架Bootstrap.js链接：Bootstrap.js下面是代码部分：<!DOCTYPE html><html> <head> <meta charset=...
2020-05-08 14:08:47
610
原创 Vue.js_实例_购物车列表
下面做了一个简单的购物车列表的页面，可以对商品进行管理，全选商品，批量删除，计算商品总价等等。对新学习vue的同学可以作为小练习进行训练运行截图如下：代码中用到了Bootstrap.js框架和axios.js来实现Vue进行异步数据操作Bootstrap.js链接：Bootstrap.jsaxios.js链接：axios.min.js下面是代码部分：<...
2020-05-07 16:29:43
629
2
原创 Vue.js_实例_菜单导航栏
经过几个月的学习。慢慢熟悉了vue框架的使用，接下来我用vue编写一个菜单导航栏的实例，作为短暂性的小结。运行视图如下下面是代码部分：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue_实例</title> <...
2020-05-07 16:00:07
1463
原创 Vue.js_模板语法_认识和理解
Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。<!DOCTYPE html><...
2020-05-07 15:20:37
553
前端框架和插件文件.zip
2020-05-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人