- 博客(32)
- 收藏
- 关注
RSS订阅原创 vue 组件上使用v-model以实现双向绑定
v-model 实际上就是 $emit('input') 以及 props:value 的组合语法糖，只要组件中满足这两个条件，就可以在组件中使用 v-model。，子组件中触发更新需要通过emit 触发update:modelValue自定义事件。父组件调用子组件，通过v-model绑定属性值，在子组件中默认接收props为。在下面的组件中，我们声明了。这个 prop，它的默认值是一个空对象。绑定，生成的 prop 名将是。在这个例子中，子组件应声明一个。上所添加的修饰符，可以通过。
2023-06-15 13:58:35
2849
原创 nodejs 复制文件到指定目录
/判断文件是否是原封不动copy的文件。//若是目录则递归调用。//获取当前路径下的所有文件和路径名。// 定义需要原封不动copy的文件类型。//取得当前绝对路径。//目标路径绝对路径。//判断目录是否存在。//获取命令行中的路径。
2023-05-06 10:15:27
866
1
原创 搞懂vue3的ref、reactive、toRef、toRefs
首先需要明确这四个函数都是用于在 setup 中创造响应式变量的。四个函数都需要从vue中导出： import {ref, reactive, toRef, toRefs} from 'vue'总结：ref、reactive 可触发页面改变toRef、toRefs 不可触发页面改变只有toRefs支持解构ref 可用于任何类型的数据创建响应式，reactive只用于创建引用类型数据的响应式。分别举例：ref：可用于任何类型的数据创建响应式, 取值需要.v..
2022-05-06 14:35:46
2502
原创 Antd Design Pro二级菜单不显示icon问题
Antd Design Pro二级菜单不显示icon问题ant pro配置全局layout
2022-04-22 16:08:24
4538
5
原创 React Redux入门
此文根据【Redux中文官网】文档记录笔记入门Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 它以集中式Store（centralized store）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。我们应该什么时候使用？在应用的大量地方，都存在大量的状态 应用状态会随着时间的推移而频繁更新 更新该状态的逻辑可能很复杂 中型和大型代码量的应用，很多人协同开发Redux库和工具Redux 是一个小型的独立 JS 库
2022-03-24 11:40:37
1319
原创 node-sass改为sass(dart-sass)
npm uninstall node-sassnpm install --dev sass搜索 /deep/ , 将项目里的 /deep/ 替换为 ::v-deep
2021-04-08 11:52:21
1716
原创 React 全屏监听Esc键
全屏与退出全屏if (isFull) { document.exitFullscreen(); } else { tree.current.requestFullscreen(); tree.current.style.width = '100%' } };监听退出全屏事件退出方式有两种：1.通过上面的requestFullscreen。 2.通过扫esc退出问题：通过requestFullscreen操作可以修改数据状态，但当用户按
2021-03-25 11:22:29
1683
1
原创 html2canvas截图丢失img图片
图片是来自于阿里云服务器的，和本地 localhost 必然存在跨域问题。通过 dom 节点的 'img' 标签来直接访问是没有问题，因为浏览器本身不会有跨域问题。加了 crossorigin 属性，则表明图片就一定会按照 CORS 来请求图片。而通过CORS 请求到的图片可以再次被复用到 canvas 上进行绘制。换言之，如果不加 crossorigin 属性的话，那么图片是不能再次被复用到 canvas 上去的。解决办法：1.给img标签加上crossOrigin="anonymous"属性
2020-12-16 11:06:14
4165
原创 umi3中约定式路由解决404无效
官方文档如图，经使用发现404无效，打印routes发现数据层有问题，做出对应修改后可正常加载404页面。src/app.tsx中设置如下代码段export function patchRoutes({ routes }) { routes[0].routes.push({ path: '*', component: require('@/pages/404').default, });}...
2020-10-30 15:37:35
3392
原创 umi-dva中effects里使用yield call/put当请求Promise接口报错时
如果yield call的是一个Promise对象，那只有在Promise返回的是resolve方法的情况下，下面跟着的yield put及后面的代码才会执行，若返回了rejector则后面的代码则全部停止执行。// models/mdeical.ts文件：* fetchMedicalLast({ payload }, { call, put }) { const { medicalIndexList } = yield call(api.medical.fetchMedicalLas
2020-10-29 10:32:26
7736
原创 vue中使用vue-pdf
需求：简单说~~有两个pdf文件需在h5上展示，通过点击按钮切换不同文件的显示注：1.vue-pdf默认展示首页，我这里的需求是通过滑动展示所有页面，这里使用的v-for遍历。有多少页就加载了多少个pdf组件。2.pdf文件存在跨域问题，这个需要后端同学支持。3.demo上的pdf文件只有一页，测试多页展示，自己改用多页pdf文件即可<template> <div class="pdf_wrap"> <div class="pdf_list"&
2020-09-04 17:35:42
663
转载 webpack: react+umiJS框架配置打包体积可视化
场景：打包出来单个js文件体积过大，网页加载太慢，尤其是包含图表的页面。安装umi-webpack-bundle-analyzer关于webpack-chain：通过 webpack-chain 的 API 扩展或修改 webpack 配置npm install --save-dev umi-webpack-bundle-analyzer在.umirc.js或config/config.js中配置：// config.jslet BundleAnalyzerPlugin =...
2020-07-17 13:22:03
1426
原创 Vue监听表单变化
需求：当表单中未填写任何项时，提交按钮置灰，只要填写其中一项，则可点击按钮。<el-buttontype="primary":disabled="isButtonGray"@click="handleSave('ruleForm')">保存</el-button>data() { return { formItem: { ...
2019-12-19 17:02:56
4735
原创 数组对象去重
例子：根据唯一标识id去重源数据arr = [ {"id":10,"name":"元素1"}, {"id":10,"name":"元素1重复"}, {"id":11,"name":"元素2"}]目标结果arr = [ {"id":10,"name":"元素1"}, {"id":11,"name":"元素2"}]代码实现unique...
2019-12-05 11:44:06
411
原创 h5页面实现微信支付
前提：h5页面在微信中打开，不支持非微信浏览器前端参考地址：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6后端参考地址（部分）：统一下单https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1网页授权https://mp....
2019-08-07 10:48:18
2863
原创 browserHistory和hashHistory的区别
browserHistory和hashHistory的区别：两者的区别简单来说是对路由方式的处理不一样，hashHistory 是以 # 后面的路径进行处理，通过 HTML 5 History 进行前端路由管理，而 browserHistory 则是类似我们通常的页面访问路径，并没有 #，通过服务端的配置，能够访问指定的 url 都定向到当前页面，从而能够进行前端的路由管理。所以如...
2019-08-02 11:42:01
711
转载 一分钟教你学会配置eslint，还在为风格单双引号，对象末位逗号要不要，引用各种报错而烦恼？(建议收藏！详细中文注释)
转自：https://segmentfault.com/a/1190000014230857用法非常简单，找到.eslintrc.js下的rules添加对象即可,比如我要把规则原本单引号要变为双引号，那加上"quotes": [1, "double"]注意这个规则！！！！：如果违反了规则情况下，这里的数字：0表示不不处理，1表示警告，2表示错误并退出 { "rules" : { ...
2019-06-15 15:24:07
12612
原创 解决create-react-app创建项目后，执行npm run eject再执行npm start报错
错误信息：Cannot find module babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArrayTry: npm add @babel/runtime
2019-06-14 11:55:51
1191
原创 短路表达式总结
1. 逻辑与&& //返回第一个假值，或者最后一个真值1 && ‘’//‘’Boolean('')//false1 && true && 'gx' && 0 && 66//01 && true &&a...
2019-03-03 16:44:09
1083
转载 Event Loop事件循环机制
转载自：阮一峰博客《JavaScript 运行机制详解：再谈Event Loop》一、为什么JavaScript是单线程？JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作...
2019-03-03 16:40:55
2011
原创 小程序-扫码进入小程序获取二维码参数
onLoad: function (options) { let decode = decodeURIComponent(options.q);}
2018-08-31 14:03:28
3222
1
转载 微信公众号h5获取用户openId的方法和步骤
微信h5静默、非静默授权获取用户openId的方法和步骤:一、openId是什么？openId是用户在当前公众号下的唯一标识（‘身份证’），就是说通过这个openId，就能区分在这个公众号下具体是哪个用户。二、openId有什么用？假如用户A在当前公众号下购买了一件商品，用户的下单信息肯定要存储到后台数据库，那根据什么进行存储呢？openId是用户在当前公众号下的唯一标识，通过op...
2018-07-19 19:18:56
33711
5
原创 微信h5页面，WeixinJSBridge对象
最近在做微信服务号，绑定用户的功能，涉及到绑定成功后，显示绑定成功UI，点击返回按钮，返回到微信服务窗；绑定成功样式：点击返回，返回到服务窗———WeixinJSBridge.call('closeWindow')WeixinJSBridge对象部分功能：WeixinJSBridge.call('hideToolbar'); //隐藏右下面工具栏WeixinJSBridge....
2018-07-19 19:06:49
5840
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人