偶然路过的吃瓜群众-CSDN博客

原创 vue封装带天数的倒计时

文章目录@[TOC](文章目录)一、实现方式二、使用步骤1.data部分2.methods部分总结一、实现方式此倒计时主要是使用setInterval方法来实现的，注意使用的时候倒计时结束要清空，否则会导致内存泄漏二、使用步骤1.data部分代码如下（示例）：// 定义一个对象保存倒计时的数字resultTimer: { day: 0, hour: 0, minute: 0, second: 0 },2.methods部分代码如下（示例）：st

2022-05-23 15:37:22 415 1

原创 uniapp生成商品分享海报

uniapp用canvas生成一个分享商品的海报文章目录前言一、展示效果二、使用步骤1.HTML部分2.CSS部分3.JS部分总结前言uniapp用canvas生成一个分享商品的海报，因为用到了uni.downloadFile这个API，所以要注意图片在H5端跨域的问题。以下是本篇文章正文内容一、展示效果大致效果就是这样，点击生成海报的按钮，会用canvas生成一张海报，长按可以保存到手机上。二、使用步骤1.HTML部分代码如下：.

2021-07-19 14:55:17 5560 16

原创 uniapp实现省市区选择联动、vue-elementUI实现省市区选择联动

这篇文章主要是两个部分，一个是uniapp实现的省市区联动，一个是elementUI里面的Cascader 级联选择器实现的文章目录数据格式一、uniapp实现省市区选择联动1.导入插件2.页面里面使用3.修改插件里面的代码，用于我们需要的数据4.完整的插件代码二、vue-elementUI实现省市区选择联动1.使用讲解总结数据格式下面是后台接口地址列表返回的数据格式这是省的数据格式这是市的数据格式这是区、镇的数据格式简单来说就是这样，需要嵌套结构，这样才能用到本篇文字的选择pro

2021-07-08 16:08:15 6372 6

原创 Vue-elementUI实现PC端商城购物车计算

Vue-elementUI实现PC端商城购物车计算Vue-elementUI实现PC端商城购物车计算，最重要的就是【computed】里面的计算，用来算出勾选的商品的总价文章目录Vue-elementUI实现PC端商城购物车计算前言一、实现效果二、使用步骤1.数据结构部分2.HTML部分3.部分CSS样式4.JS中的data5.JS中的method6.JS中的computed（计算最终勾选的价格）总结前言商城购物车价格计算也算是商城里面比较重要的一部分了，主要就是勾选的哪些商品，商品的数量加减

2021-06-15 16:55:48 3341 3

原创 Vue项目路由参数改变，接口没有重新调用

文章目录前言一、先上解决方案二、简单讲解1.常用到的地方2.watch中的【'$route'】3.完整的代码总结前言Vue项目路由参数改变，接口没有重新调用一、先上解决方案在watch里面添加一个【’$route’】的方法 watch: { // 深度监听路由改变事件 '$route': { handler () { // 这里的this.initData()就是自己项目接口调用的方法，可以根据自己的项目修改成对应的方法 this..

2021-06-02 15:09:22 1213 1

原创 uniapp商品详情页规格、SKU选择

uniapp商品详情页购物车选择提示：这里因为后台返回的数据格式原因，代码性能可能有点稍差，但是注释是很完整的文章目录uniapp商品详情页购物车选择先上代码，以示诚意后台接口返回的数据格式实现讲解先上代码，以示诚意<template> <view>  <view class="sku-list" v-for="item in this.userChooseSkuList" :key="item.id">

2021-05-13 16:53:37 5432 6

原创如何实现节流函数和防抖函数

文章目录前言一、节流函数1.概念2.如何实现二、防抖函数1.概念2.如何实现总结前言节流函数和防抖函数两个都属于优化高频率执行js代码的一种手段提示：那么它们两个有什么区别，又是怎么实现的呢一、节流函数1.概念事件被触发，N秒之内无论触发多少次只执行一次事件处理函数，输入验证比较适合函数节流2.如何实现先定义一个文本输入框<input id="input" type="text">这是实现代码let input = document.getElementById('i

2021-03-10 15:58:38 383

原创 Vue2.0和3.0双向绑定实现原理

Vue现在使用非常广泛，那么关于Vue双向绑定是怎么实现的呢目录一、Vue2.0实现原理1.实现原理2.使用Object.defineProperty()做一个简单的功能实现2.使用Proxy()做一个简单的功能实现一、Vue2.0实现原理1.实现原理Vue2.0是使用Object.defineProperty() 方法来实现的，Object.defineProperty()有三个参数Object.defineProperty(obj, prop, descriptor)obj要定义属性

2021-02-24 14:56:17 784

原创 uni-app中picker数据为对象数组如何使用，及获取picker选择之后的数据

关于uni-app中picker数据为对象数组如何使用，及获取picker选择之后的数据文章目录先直接上展示和代码使用介绍获取选择的数据总结先直接上展示和代码这是完成后的效果展示template中的代码<view class="info-item"> 货主： <picker @change="bindPickerChange($event,storageCustomList[index])" :value="index" :range="storageCustomL

2020-12-10 14:43:51 21919 2

原创前端数组简单的方法

数组forEach：forEach对数组直接进行循环，相当于for循环传了3个参数，item就是数组每一项，index就是下标，arr就是这个数组，而且没有返回值let arr = [7, 10, 3, 4, 5, 6];, arr) => { console.log(item); console.log(index); console.log(arr);})数组map：map,对数组每一项进行加工，加工完成之后返回一个新的数组传了3个参数，item就是数组每一

2020-11-18 15:22:16 168

原创 Android封装语音提示，正确和错误语音提示

目录前言使用步骤1.引入库2.封装正确和错误提示3.页面使用地方调用总结前言我们做安卓的项目里，有的时候会用到正确或者错误的提示音来对操作进行反馈以下是本篇文章介绍如何使用使用步骤1.引入库新建一个java文件， import 导入依赖包：import android.content.res.AssetFileDescriptor;import android.content.res.AssetManager;import android.media.MediaPlayer;2.

2020-11-10 14:46:42 466 3

原创 element-UI表格，实现多选和下拉框选择数据

element-UI表格的使用，实现多选和下拉框选择数据目录实现效果使用步骤1.视图2.data2.method总结实现效果大致的展示效果就是这样，element-UI的表格，里面包含了内容选择和勾选这是接口返回的数据，其中ShipStations里面是表格下拉框里面的数据，ShipSupplier是表格易一横列其他的数据，如物流公司、编码什么的提示：以下是本篇文章正文内容，下面案例可供参考使用步骤1.视图视图代码如下（示例）：<el-table ref="multip

2020-11-06 15:02:20 7717 1

原创 Vue修改数组某一项，页面不会重新渲染

有一个项目，做的功能是扫描条码，然后商品的数量加一。但是，因为修改的是数组中某一项的某个属性，但是页面渲染的是数组，这是引用数据类型，更改其中的一个属性并不会触发变更检测。下面上一下代码，讲解一下具体的业务流程就是扫描条码，先确认条码是否为空，然后判断接口里面的数据是否有扫描的条码，最后，把扫描数量加一// 货品条码扫描回车事件scanCodeHandle() { var hasCode = false; // 定义变量，确定扫描的条码订单内是否拥有 if (this.scanCode ==

2020-11-04 14:01:21 1652

原创 uni-app封装网络请求uni.request

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。文章目录直接进入正题，先上代码使用步骤1.新建文件夹2.封装网络请求3.不同的参数介绍及实际项目如何修改3.1 method介绍3.2 contentType介绍3.3 data介绍3.3 success介绍3.3 fail介绍4.如何调用4.1 全局挂载4.2 页面调用直接进入正题，先

2020-10-30 16:21:26 1586 1

原创 Vue全局处理格式化时间戳 “/Date(1603892082484)/“

最近做的一个项目，后台返回的时间是以时间戳的格式返回的。就是这种因为有很多页面都需要处理这种时间格式，所以就做了一个全局的方法来处理。首先把下面的代码放到你的Vue项目里面的main.js里// 将后台返回的 /Date(1603892082484)/ 这种时间数据格式化成时分秒Vue.prototype.$praseDate = function(date){ var dt = new Date(parseInt(date.replace(/.*Date\([^\d]*(\d+)[^\d]*

2020-10-29 16:45:12 920 2

原创 Vue全局处理undefined和null转为空白字符串

我们在处理后台返回的信息，有的时候返回的是undefined或者null，这种字符串容易引起用户的误解，所以需要我们把这些字符串处理一下。如果每个页面都单独处理，那么页面会很冗余，并且后期如果有修改容易遗漏，所以就在Vue里面添加一个全局的处理方法。Vue全局处理undefined和null转为空白字符串1.在main.js里面添加一个全局的方法// undefined和null转为空白字符串Vue.prototype.$praseStrEmpty = function(str) {.

2020-10-28 16:47:22 5384 1

qq_38541936的博客