Smile_ping的博客

vue监听输入框只能输入数字或保留两位小数点。

解决TypeScrip遍历对象报错问题的几种方式。

解决TypeScript获取对象报错的几种方式。

解决vite配置element-puls按需导入报错相关问题。

时间戳转为日期格式

活动开奖毫秒倒计时

vue解决sass-resources-loader报错

vue刷新页面方式

vant @input使用.number修饰符监听事件触发多次

npm install报错文章目录npm install报错**C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://git@github.com/sohee-lee7/Squire.git**设置git配置清除缓存重新安装提示C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://git@github.com/sohee-lee7/Squire.git设置git配置git config

深拷贝对象

微信h5使用audio不会自动播放文章目录微信h5使用audio不会自动播放demotemplatejs解决安卓不会自动播放其他方式JS-SDKdemoh5引入vue.js 实现背景音乐暂停/播放这里引入JS-SDK , 此外实现微信分享…如果不支持自动播放时，触摸滑动时自动播放template<audio id="audio" loop preload="auto" autoplay="autoplay" src="./music/StevenBurke.mp3">

vue使用axios配置多域名如有误，欢迎指教~文章目录vue使用axios配置多域名说明配置域名axios配置request config数据效果图api文件使用说明配置多域名，在axios封装请求基础上，配置以下几点在interceptors.request中添加判断if (config.requestBaseUrl == 'outside') { config.baseURL = process.env.OUTSIDE_API;}在请求方法中新增属性request

vue使用axios封装request请求迟来更新…，祝大家元旦快乐~文章目录vue使用axios封装request请求安装注册axios配置api文件使用安装注册npm i axios -Smain.js 引入根据个人所需，这里urlApi：存放请求接口地址的方法import axios from "@/api/urlApi";Vue.prototype.axios = axios;axios配置这里新建instance.js文件，有些内容根据实际情况调整，复制

vue全局调用弹窗组件使用vue开发pc端商城，检测未登录状态时，在组件/js文件中弹窗提示用户扫码登录功能…文章目录vue全局调用弹窗组件效果图场景1. 创建vue组件templatejs2. 创建js文件data获取数据效果图3. 注册组件4. 使用组件中调用js文件调用另一种方式效果图场景在vue页面调用登录组件【触发某个事件，提示用户登录】在js文件中调用登录组件【例：路由拦截未登录时，提示用户登录】关于vue实现pc端登录可查看1. 创建vue组件templat

vue中配置代理一直忘记更新…文章目录vue中配置代理配置代理，解决跨域重启服务请求效果图配置代理，解决跨域config/index.jsmodule.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // 配置代理 proxyTable: { '/apis': { target: 'htt

使用vue-qr生成自定义二维码vue-qr具有自定义二维码背景、logo、实点颜色等特性，能够生成更炫酷的二维码。文章目录使用vue-qr生成自定义二维码效果图安装使用部分参数说明vue-qr效果图例：支付生成二维码安装npm install vue-qr -S使用根据需求自定义参数配置<div class="tc" v-if="isShowPayType == 1"> <p class="pdt10 pdb10">

vue pc端微信扫码登录文章目录vue pc端微信扫码登录效果图安装并引入插件参数说明使用自定义样式注意效果图安装并引入插件wxlogin // 安装 npm install vue-wxlogin -S // 局部引入 import wxlogin from 'vue-wxlogin'; // 注册组件 components: { wxlogin }参数说明使用<wxlogin class="l

vue 注册全局过滤器文章目录vue 注册全局过滤器创建filter文件夹index.js引用文件使用filter创建filter文件夹在项目根目录创建filter文件夹在该目录下创建index.js文件index.js/** * 订单状态 */// export function orderStatus (status) {export const orderStatus = (status) => { let str = ''; switch(status) {

vue全局使用scss引入mixin、function等函数文章目录vue全局使用scss引入mixin、function等函数安装配置新增配置重启服务sass-resources-loaderdesc：引入全局，就不用每个页面引用…安装npm install sass-resources-loader -D配置vue构建webpack配置中 build > utils.js文件新增配置 // 全局文件引入 编译一个文件可以省去这个函数 function resol

vite基本配置文章目录vite基本配置相关文档scss预处理器样式自动添加前缀vue-routeraxiosvuexvantelement-plusvite-plugin-impalias别名配置vite.config.js一些配置相关文档vue3文档vite中文网提示：安装包可通过npm 或 yarn方式安装我目前安装的vite版本是^2.1.5， 配置仅供参考scss预处理器无需下载node-sass、 sass-loader包， 直接安装sass同样的less、 sty

vite配置环境变量与模式文章目录vite配置环境变量与模式环境变量设置.env.development.env.production读取环境变量环境变量与模式环境变量设置注意： 命名规范 ``VITE_为前缀的变量才会暴露给经过vite`处理的代码vite serve 时是development开发模式， vite build时是production生产模式。分别创建配置文件： .env.development 、.env.production.env.development# .

文章目录相关文档搭建vue3项目方式1. 使用`@vue/cli`搭建2. 使用vite搭建使用vite搭建vue项目搭建第一个vite项目搭建方式安装步骤浏览器检查不到vue?打包后运行项目空白？相关文档vue3中文文档Vitevite.js中文网搭建vue3项目方式搭建vue3 有两种主要方式：1. 使用@vue/cli搭建创建项目 vue create project-name根据提示操作， 但要注意vue版本2. 使用vite搭建下面将介绍使用vite搭建

vue获取某个元素高度<template> <div class="wrap"> <!-- 定义ref属性 --> <div class="header" ref="header"> <!-- 内容 --> </div> <!-- 根据需求设置 --> <div class="main" :style

vue使用keep-alive缓存组件为了避免反复重渲染导致的性能问题，可以使用keep-alive组件来实现缓存【不会销毁哦】。这里再次记录下keep-alive组件基本使用，具体使用请查看文档。文章目录vue使用keep-alive缓存组件效果图生命周期开启`keep-alive`路由配置使用如何记录上次滚动的位置？遇到问题无法记录上次滚动位置1. 设置overflow属性引起无法记录滚动行为解决方式2. 如果布局中设置overflow属性，无法记录位置如何解决？解决方式效果图keep-al

H5网页跳转微信小程序通过使用微信开放标签，可便捷的跳转到微信小程序。文章目录H5网页跳转微信小程序效果图一、小程序跳转按钮二、开放标签使用步骤1. 绑定域名2. 引入js文件3. config权限配置及ready处理4. 调用方法解决VUE中警告注意：官方文档效果图请忽略样式， 刚好页面上有分享功能，临时在此页面上展示功能哈。debug模式开启后，如成功会弹出如图一所提示， 当触发确定按钮时，页面会展示相关按钮。仔细的你会发现， 安装设备上样式有点不一样哈【最后一张图片】

h5页面拉起地图导航这里再次记录下， 在vue中使用百度地图，点击marker弹窗选择对应导航方式。文章目录h5页面拉起地图导航效果图拉起导航方式1. 高德地图2. 百度地图3. 腾讯地图vue使用百度地图templatescriptstyle百度api文档效果图拉起导航方式1. 高德地图调用方式http://uri.amap.com/marker?position=lng,lat&name=address&coordinate=gaode&callnati

vue实现多商铺购物车功能写的不好，请多指教。文章目录vue实现多商铺购物车功能效果图templatejs初始化数据获取购物车列表数据后端返回数据格式操作步进器组件点击某商品时改变选中状态选中店铺，把该店铺下所有商品选中是否存在商品id是否选中所有店铺全选所有购物车商品操作删除按钮，显示弹窗组件操作删除失效商品popup组件触发确定事件根据类型处理提交格式删除商品根据类型处理删除商品根据类型判断删除条件结算效果图以下展示案例项目中有应用到vant组件、引入组件， 需要使用demo时，请自行

vue自定义弹窗组件这里记录基础自定义弹窗组件使用相关文档组件注册：请查看slot插槽使用：请查看自定义事件： 请查看效果图自定义组件一：template<template> <div class="popup-wrap" v-show="isShowPopup"> <div class="mask"></div> <div class="popup-container

vue中better-scroll实现商品分类左右联动结合better-scroll插件实现商品分类左右联动交互方式。前提准备安装： npm i better-scroll -S组件中引入： import BScroll from 'better-scroll'better-scroll官网相关文章：better-scroll监听元素吸顶better-scroll商品详情联动步骤：先实现左联右再实现右联左效果图1. 初始化数据data() { return

vue图片转为File文件类型供参考，欢迎指教文章目录vue图片转为File文件类型图片转为base64格式base64格式转为File文件类型使用File文件转base64格式使用返回格式效果图步骤：先把图片路径转为base64格式再把base64转为File文件图片转为base64格式这里把方法定义js文件中，根据需要自行调整export const imageToBase64 = (img) => {// Vue.prototype.$imageToBase64 =

vue自定义省市区街道选择vue中自定义选择省、市、区、街道功能，如不需要街道，可自行删除。这里相关代码没有封装，可自行操作。供参考，欢迎指点。说明：所有数据由后端返回。【见末尾效果图】在created生命周期中获取省数据，当用户点击某省得到当前id【父级id】并保存。根据父级id获取市数据。由此类推。文章目录vue自定义省市区街道选择效果图template实现步骤初始化数据选择省市区街道事件点击省市区标题事件获取地址列表数据style后端返回数据效果图数据库结构效果图效果图te

vue实现订单多商品评价最近在开发简易版商城，其中有发表评价功能，涉及到一个订单多商品评价。项目使用vue结合vant组件开发。文章目录vue实现订单多商品评价效果图前提template初始化获取订单详情上传图片after-read上传图片到服务器上传图片成功，返回数据效果图删除图片是否好评是否匿名评价内容发布评价效果图思考: vue中v-model是双向数据绑定原理，如何动态绑定v-model值？这里采用了比较笨方式，在获取订单详情接口中添加需要使用字段来操作。欢迎各位留言指教更好的方

微信支付文章目录微信支付微信支付产品类型效果图微信小程序支付提交订单接口返回信息：效果图发起微信支付微信内H5调起支付提交订单提交订单接口返回信息：效果图根据不同支付类型执行执行JS调起支付取消支付tip: 不同类型支付渠道判断微信网页开发文档微信支付开发文档微信支付产品类型这里介绍公众号h5支付、小程序支付， 后续更新效果图微信小程序支付小程序支付开发文档开发步骤提交订单接口返回信息：效果图仅供参考, 数据格式可自定义, 把info保存并用于调起支付/** * 提

better-scrollps：商品详情联动效果， 当滑动到某个位置时出现tab标签栏， 点击tab项时滑动到对应位置并激活当前类。文章目录better-scroll效果图安装better-scrolltemplate使用better-scrollstyle滑动元素吸顶.可参考效果图安装better-scroll安装： npm i better-scroll -S组件中引入： import BScroll from 'better-scroll'better-scroll官网参考:

vue中使用echarts项目中经常会应用到echarts图表，这里再次记录下、方便使用。echarts官方文档众所周知echarts是非常强大的插件，千万级数据可视化渲染能力，涵盖各行业图表等等。效果图如何使用？安装及引入echarts安装npm install echarts -S引入方式//全局引入import echarts from 'echarts'Vue.prototype.$echarts = echarts//局部import echart

vue中使用播放器组件效果图说明： 由于测试视频高度原因出现黑背景安装及引入官方文档npm i vue-video-player -S全局引入在main.js中导入并引用import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'vid...

vue中使用vant地址组件页面被顶起问题遇到问题：IOS设备，当前发现有7Plus、iphone11【测试机有限，更新版本设备未测】在vue页面中使用vant地址组件， 当操作到详细地址时，软键盘顶起页面往上移动。当软键盘关闭时，页面没有还原。操作页面点击事件时无效，【因页面移动导致位置不对】复现效果图输入收货人时页面展示正常当操作详细地址时会发现，软键盘顶...

H5如何与APP交互开发中经常会遇到APP内嵌H5页面，避免不了js和APP的之间的交互，vue调用再次记录下。理解不好，欢迎指点！文章目录H5如何与APP交互1、`H5`调用`APP`的方法Android格式IOS格式Demo【app分享商品到小程序】2、`H5`如何接收`APP`回传的参数？3、判断当前页面所在环境1、H5调用APP的方法说明 以下示例：其中 WebJs_We...

ps: 最近有点忙。今天抽时间记录下， 项目中应用到： 身份认证， 使用 lrz 插件上传图片。写的不好，欢迎各位指点，谢谢。文章目录效果图引入lrz文件初始化判断展示审核未通过原因及重选解决上传图片安卓与IOS兼容问题选择身份证图片上传图片templatescss样式效果图引入lrz文件 /* 引入外部上传压缩图片js 第一：在webpack.base.conf.js的m...