Nomal_1bit-CSDN博客

原创后台管理系统 - 常见业务分析 - 数据字典转换

我们在写后台管理系统时，经常会遇到后端给一个数据字典接口，然后前端根据字典的Value匹配出label显示在页面上，那之前也是做过，有点遗忘了，今天想的记录一下实现过程。很简单。//1. 首先根据后端的数据字典接口去调用然后赋值保存下来这个接口返回的数组 /**查询数据字典 */ getDictsData() { getDicts(this.DictionariesType).then(res => { this.DictionariesDat...

2022-04-25 11:49:25 1646 1

转载 git 修改文件名称大小写不被检测

前言Git默认对文件名是不敏感的，会导致以下两个问题：1、对文件名进行大小写改变后，git无法检测到eg:存在一个文件a.txt ,修改提交后，将文件名称改为A.txt，此时git时无法显示更新的2、在.gitignore文件中设置的过滤规则可能会误判在.gitignore中存在moc_*.cpp和ui_*.h过滤条件，此时新建文件UI_XXX.h是无法被检测和提交的报错：The following paths are ignored by one of your .gitigno

2022-04-24 09:26:37 2486

原创 webstorm 初体验 - 主题色和编辑器配色 - 参考vscode

因为公司大佬的推荐，最近还是想学习使用webstorm来进行开发，记录学习过程。WebStorm：JetBrains 出品的最智能 JavaScript IDE官网地址。公司大佬给我演示的功能，最吸引我的地方就是，他的文件索引功能，可以看到项目图片被哪些文件索引，并且按ctrl+左键即可访问到该文件，而且查找文件的速度非常快，对比Vscode除了他更占用性能之外，没有感觉到其他弱点，非常好用。先来讲讲怎么更改配色方案，能改成和Vscode差不多，下面是效果图Vue文件。J..

2022-04-22 11:53:54 4404 5

原创 day.js 获取常见日期

setDate(date) { //默认值 let start_time = ''; let end_time = ''; let format = 'YYYY年MM月DD日'; //格式化 switch (date) { case 'toDay': //返回当天 - 当天 start_time = dayjs().format(format); end_time =...

2022-04-18 16:20:34 2196

原创 Vue $options 重置data

<SpuForm ref="SpuForm" v-if="scene===1" @changeScene="changeScene"></SpuForm> <SkuForm ref="SkuForm" v-show="scene===2" @changeScene="changeScene"></SkuForm> 在页面上我有这2个子组件通过父组件的scene来切换组件其实里面是包裹了几个form表单可以让用户输入的， ...

2022-04-15 10:39:20 1269

原创 Vue keyup.enter 和 blur 事件冲突的问题

<el-input class="input-new-tag" v-if="row.inputVisible" v-model="row.inputValue" :ref="$index" size="small" @keyup.enter.native="handleInputConfirm(row,$index)" ...

2022-04-12 14:32:13 1541 4

原创 Vscode插件推荐自动检查单词拼写错误

//由于本人英语渣经常可能会出现拼写错误导致一些问题 Vscode 提供了一款插件可以帮助我们自动检查英文单词的拼写错误并提示我们 Code Spell Checker直接搜扩展下载使用即可效果如图...

2022-04-11 16:07:24 7356

原创 Vue 组件通信 $attrs、$listeners

API — Vue.js官方文档介绍个人认为这个传参方式用于二次封装一些ui库的组件非常好用，下面是代码示范。子组件 -> tipsButton<!-- * @Author: WenBin * @Date: 2022-04-10 18:01:46 * @LastEditTime: 2022-04-10 18:15:59 * @LastEditors: your name * @Description: * @FilePath: \vue-admin-template.

2022-04-10 18:30:52 1199

原创 Vscode快速开发Vue代码块配置+自动头部注释

1.首先是Vue组件的代码块配置这里使用的是Vue2.xctrl+shift+p -> 输入snippet -> 首选项：配置用户代码片段 -> 输入vue -> 选择vue.json(vue)、按照以下代码块进行配置后，即可得到一个简单的vue模板代码块。{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, bod.

2022-04-07 10:46:22 4320 2

原创 vue2.0 + vee-validate 3.x的基本使用

//也是第一次使用vee-validate 发现这个插件挺好用的记录一下//官方文档//https://vee-validate.logaretm.com/v2/guide/rules.html#between-params//npm链接https://www.npmjs.com/package/vee-validateimport Vue from 'vue'import { ValidationProvider, extend, localize } from 'vee-vali.

2022-03-29 15:37:25 1242 3

原创 QRCODE 根据url生成二维码图片

https://www.npmjs.com/package/qrcode使用起来比较简单就不多赘述了详情见文档//引入 import QRCode from "qrcode"; try { let url = await QRCode.toDataURL(this.payInfo.codeUrl); //返回promise //elementUi弹窗 this.$alert(`<img src=${url} />`, "微.

2022-03-14 16:06:27 1795

原创 Vue2.0 实现一个分页器类淘宝

<template> <div class="pagination"> <button :disabled="pageNo == 1" @click="clickNum(pageNo - 1)"> 上一页 </button> <button @click="clickNum(1)" v-if="StartNumAndEndNum.start > 1">1</button>...

2022-02-26 16:23:52 318

原创 Vue 事件总线 $bus的基本使用

//入口文件main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'//注册三级联动为全局组件import TypeNav from '@/components/TypeNav'//执行mock import '@/mock/mockServe'//引入Swiper插件需要的CSSimport 'swiper/cs.

2022-02-23 15:53:15 985

原创 Vue 项目中使用mock 模拟数据

一些时候后端还未完成接口，而我们已经完成了静态页面，需要模拟数据来进行测试时可以使用mock。首先下载mock//文档官网 https://github.com/nuysoft/Mock/wiki/Getting-Started# 安装npm install mockjs//先引入mockjs模块import Mock from 'mockjs';//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]//webpack默认对外暴露的：图片、JS.

2022-02-22 15:02:45 909

原创 vue 自定义属性与事件委托

//当一段vue模板中，多个子级元素需要绑定同一个click相同的事件时，我们可以利用事件委托，将事件委托给其父元素。//事件委托的优点：提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。  <div class="all-sort-list2" @click="jumpSearch"> <div class.

2022-02-22 13:54:18 1098

原创 loadsh插件使用与按需引入

lodash.debounce | Lodash 中文文档 | Lodash 中文网Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。//npm 安装：$ npm i --save lodash//为减少项目体积在Vue项目中按需求引入//例如节流函数引入 - > Vue文件中//引入loadsh - 节流函数import throttle from 'lodash/throttle'; //函数节流 activeIndex:th

2022-02-21 16:30:05 930

原创 uniApp 小程序第三方获取ext.json数据

uniApp 开发小程序，并且是第三方开发，根据需求需要从ext.json中写入商户id，从而发布不同商户的版本。首先将ext.json文件放置到和根目录( 同main.js位置){ "extEnable": true, "extAppid": "填入你的extAppId", "directCommit": false, "ext": { "shopId": "自定义内容", "name":"自定义内容2", }}同时你的微信开发者工具，appId需要

2021-12-06 14:42:48 3921 4

原创 vue 文件路径重命名

一些路径不想重复写比如我的文件目录是这样的pagesA下有static顶级也有static那我如果需要获取分包下的图片我需要 /pagesA/static 每次都需要写很麻烦接下来在vue.config.js配置一下//js 自带引入pathconst path = require("path");function resolve(dir) { return path.join(__dirname, dir);}module.exports = { .

2021-12-01 12:02:41 965 1

原创 uniApp 手写一个步进器

我项目的需求是：1.步进器支持异步加载(先调用接口确定是否有足够库存再决定是否增加/减少);2.要求步进器支持长按进行数量增加方便多张购票3.不允许直接输入数值4.节流每次点击触发接口请求的最低毫秒数可控Vue文件 -><template>  <view class="input-number-mybox"> <button @touchstart.stop.prevent="btnTouc..

2021-11-25 15:56:32 1707

原创 uniApp开发微信小程序减少包大小

小程序规定每个包不能大于2m超出会导致无法真机调试和打包发布。说下我目前在用的几个优化的方案1.uniApp运行时勾选小程序运行压缩代码 (必须)2.使用分包具体参考uniApp分包文档将不必要放在主包内的组件全部分包3.使用一些js库时注意大小例如 moment可以用dayjs来替换更轻量功能也基本一致4.所有主包内的图片资源或所有项目图片静态资源最好放在服务器/CDN使用网络资源，尽量避免放在项目中，特别是大图。这样一轮调试后，在真机调试...

2021-11-24 12:01:04 2162

原创 uniApp 小程序模板中无法直接使用配置文件变量解决

// demo.vue<template>  <view> 值为：{{this.domain}} </view></template><script> export default { onLoad() { console.log(this.domain) } }</script>有一个公共的路径配置文件 url...

2021-11-23 11:01:38 952 2

原创 uniApp 封装一个confirm

如题需要使用一个confirm但是uView 1.x没有，只能自己封装一个了。confirm 组件<template> <view class="Confirm">  <u-popup :mask-close-able="false" :width="width" v-model="isShow" :mode="mode" border-radius="30"> <view class="pop-b

2021-11-17 10:47:11 1258 2

原创 uniApp swiper内部图片高度自适应

因为uniApp swiper组件有默认高度的150px这时如果图片大于150px就会显示不完整，导致很丑的样式问题。我们希望外部的swiper 自适应内部的图片高度的最大高度怎么办？1.先获取内部图片所有dom的元素样式数组2.对数组按照高度进行排列取出高度最高的值3.将swiper 使用:style 动态绑定最大高度 <--SwiperHeight 是通过计算后得到的高度值--> <.

2021-11-12 15:08:22 4230 1

原创 uniApp 使用 :style+computed 动态样式

//html<view class="bottom-changeType"> <button v-if="couponState" :style="StyleStatic" hover-class="_active-hover" :class="[couponBtnsStyle,couponBntsBorder]" @click.stop="$u.throttle(receiveNow,1000)" class="bottom-btn" :plain=.

2021-11-10 14:07:56 1657 3

原创 uniApp sticky 吸顶兼容小程序 h5

使用uView的 sticky 完成在h5端的吸顶效果页面滚动到一定距离后元素吸顶 h5吸顶距离为44px。但是在小程序时默认的吸顶距离是0px因为我的小程序头部导航栏的高度不固定所以这里需要动态的获取页面的整体状态栏+导航栏的高度作为吸顶的距离，达到适配多机型的目的。需要实现的效果如图刚好让吸顶的位置在我自定义的导航头部下方于是我需要先知道导航栏的高度是多少 (因为我左侧的胶囊是参照右侧的微信自带的胶囊大小来的)所以我可以使用uni封装好的，能够获取到小程序胶囊 .

2021-11-09 15:24:20 4158

原创 promise 异步任务按顺序执行

在vue中使用promise + ajax 调取接口是常见的场景// 根据id获取商品详情信息export function Aapi(data) { return http.post( 'url', { storeId: data.storeId, id: data.id } )}//根据id获取商品抢购纵向轮播图export function Bapi(data) { return http.post( 'url', { storeId: ..

2021-11-05 17:17:33 517

原创 uniApp 开发小程序弹窗中嵌套image时出现的小问题

就是一张点击之后，给image 组件传入src 然后动态显示分享图片的功能。在开发工具上显示正常，使用真机调试2.0版就点开白屏图片加载失败。排错后发现，可能是因为一开始 src 绑定的值 url 是空后续dom并没有刷新，即使异步给 url赋值还是没有刷新dom导致的，于是我在v-if上加了判断如果url是空则不渲染否则才渲染解决了。 <u-popup width="80%" height="80%" borde...

2021-11-03 14:53:00 603

原创 uniApp 发布小程序基础流程 (第三方开发模式)

首先说下几个关键点1.使用uniApp 开发小程序2.使用第三方平台授权管理3.你需要被该第三方授权为开发者首先在uniApp的根目录和pages.json 同级创建ext.json文件{ "extEnable": true, "extAppid": "注意此处填写的是你正在开发的测试号小程序的appid 不是最终第三方的appid", "directCommit": false, "ext":{ "shopId":"" }}然后运行成功小程序后点击.

2021-10-25 22:10:18 1358

原创 uniApp 封装一个常用的tabs组件

<template> <view class="tabs-box"> <view class="tabs-main" :style="{paddingBottom:comPaddingBottom}"> <view @click="changeIndex(index)" class="content-item" v-for="(item,index) in dataList" :key="index"> <view class="t.

2021-10-25 11:23:36 755

原创关于uniApp跳转tabbar传参

业务需求是从商品页(非tabbar)，跳转至订单列表页(tabbar页面)。传统的url传参已经解决不了了。uniApp官方说明了。tabbar不支持传参。我是如何处理的。使用vuex 定义1个变量来判断例 vuex_jumpRight 。store.js vuex_jumpRight:false //默认值是false在商品页时(非tabbar) 点击跳转的事件中修改vuex的变量为true this.$u.vuex('vuex_jumpRight',true) .

2021-10-24 23:08:08 1692

原创 uniApp 解析富文本替代v-html方案

直接上链接mp-html 富文本组件【全端支持，可编辑】 - DCloud 插件市场使用超级简单 npm 下载引入注册子组件然后使用就行npm install mp-html 根目录下运行组件内 <mpHtml :content="Data.goodsDetails"/>import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'export default {// 不可省略..

2021-10-21 10:29:27 860

原创 uniApp 合理利用transform

在使用各家组件库时例如tabs 在内部组件设定好了跟随滚动的值如果直接修改组件的宽度，则会导致偏移值不正确，但是用 scale 缩放 (x,y) 即可让元素放大至想要的效果简单记录一下

2021-10-20 09:18:58 3141

原创 JS 处理后端返回大量数据

先说场景在用uniApp 开发小程序时遇到后端有一个接口一次性返回了超100条数据此时在前端写的代码 this.swiperList = res.data ; 直接导致微信小程序报警如图这样子导致页面全部受到影响，数据加载变得非常卡顿。来看如何处理。首先找到卡顿的原因：小程序是使用setData进行数据传递。官方要求是单词数据传递不能超过1024kb而正常我实际开发中大部分都是直接 this.xxx = res.data ; 这样就直接导致了setData 可..

2021-10-19 14:12:24 2789

原创 uniApp uni-simple-router 路由传参问题

从列表跳转到详情将参数带入 ->let ids = { storeId: this.Data.storeId, goodsId: this.Data.goodsId, id: this.Data.id } //路由跳转 this.$Router.push({ path: '/pagesA/pages/orderDetails/orderDetails?item', query: { ids } .

2021-10-14 18:21:12 1905

原创 uniApp 路由守卫使用 uni-simple-router

需要路由守卫来关注登录状态和部分需要权限的页面进行方便管理。使用了 uniApp 插件市场的一个插件库链接是：快速上手 | uni-simple-router直接讲自己的一个小粗心导致的小问题。引入后提示报这个错，意思ROUTES找不到，但是我发现vue.config.js里面配置没问题，找了半天后来才想起来，改变了vue.config.js得文件都需要重新编译一下。于是就修复了。支持H5和微信小程序接下来会继续使用，如果发现有什么问题会更新记录。...

2021-10-14 14:18:25 3764

原创 uniApp简单使用webSocket实现核销二维码业务

主要功能逻辑 - >用户支付订单获取订单详情 - > 点击订单详情建立长连接 -> 商家使用机器核销二维码 -> 二维码被核销后及时刷新页面使用状态并告知用户核销成功代码区//组件import capHeader from '../../componentsA/Com/headerCap.vue'import showPrice from '../../componentsA/Com/showPrice.vue'import localTi...

2021-10-14 13:43:47 1388

原创 uniApp开发小程序报warning

该告警原因是因为，子组件props接受的值中，有为null的数据，但是实际开发中，很大部分后端会直接回传null的参数，所以为了避免这个警告，可以在小程序开发工具中，找到app.js 文件加上以下代码//加入这个代码console.warn = ()=>{}require('./common/runtime.js')require('./common/vendor.js')require('./common/main.js')...

2021-10-14 09:33:06 7545

原创 uniApp 父给子传参页面刷新问题

今天在做一个订单列表的，取消订单功能时遇到了一个小问题，大概如下。//子组件接受一个参数 List 用于页面的按钮显示控制 props: { List: Object }//html - > <view v-if="List.orderState=='DURING-THE-PAYMENT'||List.orderState=='UNPAID'" class="state-item state-ToBePai.

2021-10-13 17:03:16 715

原创信封撕条效果 css

记录实现过程先上图看效果//下部分 .bottom-main{ width: 100%; background-color: #fff; border-top:2px dashed #eee; position: relative; padding: 35rpx; } .bottom-main::before{ background-color: #eee; content:''; display:block; bord..

2021-10-13 11:44:36 259

原创 uniApp 点击按钮复制到粘贴板

//如题点击复制如果只是做非H5页面可以直接使用uni封装好的//https://uniapp.dcloud.io/api/system/clipboard?id=setclipboarddata //剪贴板用法uni.setClipboardData({ data: 'hello', success: function () { console.log('success'); }});如果是要兼容h5建议在插件市场导入插件地址 -&g.

2021-10-09 16:20:08 529

空空如也

空空如也