qq_42980244的博客

原创 vue3+ts动态表单渲染，antd的useForm改造

getFormFields方法，处理大量数据，生成动态表单。return h函数，h函数是vue里面。render函数的渲染。传参合返回值定义如上。

原创 前端vue3-手动设置滚动条位置/自动定位

第一，需要等待数据渲染完成后，再调用scrollTop，设置scrollTop=1000，这样页面初始化滚动条位置会改变。从B页面进行xx操作后需要跳转到A页面，并定位到AA职位，上图为A页面。A页面的左侧是div，内层包裹List组件。完整的scrollTop方法如下。第二，找到当前职位的高度，也要。等职位列表数据渲染完成后，获取。

原创 自定义hooks函数

2、在vue文件中使用useXX函数。1、js文件中定义useXX函数。3、useAdd自定义hooks。

原创 vue3父子组件传值和双向数据绑定

【代码】vue3父子组件传值和双向数据绑定。

原创 vue3引入ant-design-vue

版本汇总，以下代码是package.json文件ant-design-vue的版本2.x，配合的less是2.7.3.当less版本过高会报错.bezierEasingMixin()，遇到这种情况可以查看vue3.0 使用ant-design-vue 按需加载时报错.bezierEasingMixin()_与BUG战斗的小绵羊的博客-CSDN博客2、ant-design-vue的引入一定要参考官网的说法，我们按需引入Ant Design Vue第一步：yarn add ant-design-vue

原创 [vue-yl-01]请求次数过多的性能优化

场景：AB是路由组件，C是全局组件，AB都用到了C组件，C组件的mounted中派发了一个action(this.$store.dispathch(“getList”)),在切换ab组件时，都会触发C组件派发的action，导致请求次数过多。考虑：请求一次、n次是否结果一样？一样解决办法：想办法减少请求次数到只需要请求一次，性能优化将action放在app.vue组件中的mounted中,就能做到只请求一次。...

原创 js异步1

q

原创 Object.keys遍历一个对象

1

原创 关于组件传值

1

原创 vue中使用watch监听

vue3的监听对象的值

原创 vue3的组件传递之子传父（项目实操）

先了解一下跳转，点击新建弹出商品选择弹窗 点击商品选择弹窗的保存弹出另一个弹窗 confirmProductEdit.vue 是确定商品信息的组件 3index.vue 父组件 1 productInfo.vue 是商品选择的组件 2技术点：将确定商品信息中的row信息传递给父组件显示3组件中onSubmit方法中emit2组件中@ productSuccess 1组件中 从该案例中，可以学习到子组件传递数据给父组件

原创 vscode自动保存时函数名和括号中间的空格消失解决

{ // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "window.zoomLevel": 2, "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages"...

原创 vue2的/build/webpack.base.config.js详解4点

vue2的build文件夹里面存放的是什么呢？全篇也摆在下面'use strict'const path = require('path')const utils = require('./utils')const config = require('../config')const vueLoaderConfig = require('./vue-loader.conf')function resolve (dir) { return path.join(__dirna...

原创 setNavigationBarTitle

wx.setNavigationBarTitle就是用来改红框框里面的内容滴在项目开发中经常用到使用的场景就包括了多个地方用同一套页面的时候 wx.setNavigationBarTitle({ title: "我的店铺", });...

原创 友好vue3

vue3支持ts--ref 获取dom元素ref在vue2和vue3中不一样，vue2中通过this.$ref.xxx获取对应元素ref定义一个响应式数据const xxx=ref(initValue)initValue可以是number,string,boolean，数组，对象ref定义的响应式数据修改数据时必需要.value，但模板中使用数据时不需要.value--创建vue3项目vue create vue_test--main.js在Vue2里面，通过new Vue({})构.

原创 感叹号impotant规则使用

再使用van-field组件时，要对组件的样式进行设置

原创 Promise坑点：省市区三级联动

handlesGetAreaFirst(params) { this.apiGetAreas(params, "province_list") .then((data1) => { if (data1.length <= 0) { return Promise.resolve([]); } ..

原创 万年大坑:双引号里面写单引号

双引号里面又写双引号你就等着报错吧

原创 foreach返回新的数组

goodArr = goodArr.forEach((item) => { item.fileIds = []; return { ...item, }; });

原创 js中判断字符串中是否含有数字

var d = /\d/; d.test(recycleOrderInfo.vendorTel) ? recycleOrderInfo.vendorTel : ""

原创 Es6判断对象中是否含有某属性

let n = Object.keys(item).indexOf("backmoney");-1没有

原创 原生wx小程序:数组的findIndex用法

handleChangeIdentify({ currentTarget, detail }) { const { id } = currentTarget; let { goodArr } = this.data; let index = goodArr.findIndex((item) => item.id == id); let key = `goodArr[$...

原创 原生wx小程序:arr.find(()=＞{。。。})

有一些时候，我们需要从数组中去找具有某一类特征的元素/对象我们会想到用find方法 const option = options.find((item) => item.value === detail) || {};这里就代表了：找到options数组中的元素的value等于detail的对象...

原创 原生wx小程序:success的箭头函数写法

今天在敲代码的遇到了这个问题：在wx.showModal中的success回调函数中调用方法报错，解决办法就是要使用箭头函数。 wx.showModal({ title: "", content: "提交采购退回信息后,相关商品的采购流程将终止,且不可恢复,是否继续?", success: (res) => { if (res.confirm) { .

原创 原生wx小程序:动态绑定class

用过vue的应该知道vue里面的动态绑定class使用的是:冒号在小程序中没有:冒号那么是怎么写的呢？ <view class="verify-box {{recycleOrderType==='HS' ?'bottomb':''}}"> <view class="paid-title"> 沟通截图 <text class="circle">(不超过9张)</text>

原创 原生微信小程序:wx.navigateTo不跳转

不跳转的原因很多，这里只说一种那就是你没加/

原创 微信原生小程序:wx.navigateTo的带参(对象)跳转

图一的页面重要的代码时下一步的事件，如下 handleGoodsReturn() { if (this.data.checkedGoods.length) { const { recycleOrderEntryList } = this.data.orderInfo; let orderInfo = this.data.orderInfo; ...

原创 微信原生小程序:跨两级页面的刷新

zpages/package-purchase/pages/purchase-things/index 为列表页面，展示了商品列表pages/package-purchase/pages/purchase-things/return-goods/index 为采购退回按钮跳转的页面pages/package-purchase/pages/purchase-things/return-goods/back/index为下一步按钮跳转的页面业务流程：用户点击采购退回按钮，进入中间的页面，

原创 查查表：纯js代码记录

封装网络请求获取且定义变量的写法设置值的方式 getSalesStatistics() { let apiName = "salesStatistics"; let { paramsForSort } = this.data; statictisService[apiName](paramsForSort) .then(({ result }.

原创 微信小程序data-key和id绑定使用 | detail使用

原创 Date转换年月日

timebasic.js//时间戳转年月日export function format(shijianchuo) { //shijianchuo是整数，否则要parseInt转换 var time = new Date(shijianchuo); var y = time.getFullYear(); var m = time.getMonth() + 1; m = m < 10 ? "0" + m : m; var d = time.getDat.

原创 将网络请求抽离成单独js

pageLifetimes: { show() { this.getGoodsList(true); }, }, ----------------------------------------------------------- // 分页查询商品列表 getGoodsList(isInit = false) {..

原创 2.21日志

1.<slot name="x">和slot="x"<slot>标签一般用于子组件上 ，在父组件引用子组件时，可以在子组件中写内容，Vue入门之slot属性 - 简书<slot>标签 一般写在子组件中，slot=""一般用于父组件,用在关联插槽...

原创 2.18日志

1.V4业务框架培训1.ProCode体系（重要：表单ProForm、表格ProTable）基于 ant-design-vue 的 Form 和 Table 组件的二次封装ant-design-vue 是React 、Vue开发者手中的神兵利器，提供了众多组件：<a-form><a-table><a-button><a-icon><a-row><a-col>,一行col总量是24Surely Vue Table .

原创 记录一次vue项目全过程

第一步，检查版本第二步，创建项目执行命令vue init webpack ylq_project01执行上面黄色的命令，得到如下图所示复制http://localhost:8080去浏览器访问，得到如下图

原创 keep-alive组件的应用

keep-alive是vue的内置组件，功能是用来缓存组件的，项目的性能将得到提升比如：首页进入到详情页，如果用户在首页点击了一个东西，请求了一个数据，又回到首页，再请求同一个东西，同样请求同一个数据，就没必要去请求数据了，直接使用keep-alive组件缓存起来。与生命周期有关的：如果组件中加入了keep-alive组件，那么生命周期函数将会在原先8个的基础上，新增两个分别是activated和deactivated，代表进入和离开。进入组件后create只会执行一次接下来开始应用

原创 回调函数，回调地狱及Promise

回调函数就是一个函数，这个函数作为另一个函数的参数，在这个另一个函数中被调用执行回调地狱就是函数里面的参数是是一个函数，层层嵌套，如下function aaa(){ setTimeout(()=> { console.log('我') setTimeout(()=> { console.log('爱') setTimeout(()=> { console.log('你') }) },1000) },1000)}利用promise解决

原创 webpack1

想要入门webpack，先检查自己有没有安装node，node -v打开命令行，执行 npm init -y 生成package.json文件，这个文件是对npm包进行管理的第三安装webpack，执行npm install webpack webpack-cli --save-dev第四，打开webpack2，新建src，在src下新建index.js，在里面随便写点东西，里面可以写es6语法的内容const a = '小鲤鱼'console.log(a)第五，创.

原创 vue组件之间的通信2

父组件传递参数给子组件，也就是子组件的数据来源于父组件，父data，子props，通过:props=data子组件传递参数给父组件，就是是父组件的数据来源于子组件，子data，$emit（‘ccc’，item）,item为传递给父组件的数据，父：引用子组件，@ccc=methods示例如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></titl

原创 vue组件之间的通信

vue组件之间如何通信，我们先来看父传子。所谓父传子，就是父组件中引用了子组件，子组件中有props，需要让父组件中的data赋值。（子组件的数据来源于父组件）1.在子组件中定义props，type,default2.在父组件中定义data3.在父组件中 :props=data4.实现传递下面为示例代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title