- 博客(97)
- 收藏
- 关注
RSS订阅原创 我的创作纪念日
在2020年有次偶然的想法（就是想着把自己遇到过的坑以及如何解决的思路保存下来），思来想去最终决定在CSDN上创作，因为我觉得CSDN平台相对其他的还是很不错的，各种规则、体系也比较好，博主也多，更利于交流和借鉴。未来要学习更多的知识，掌握更多的代码，让自己更上一层楼。初识CSDN还是在我大学的时候，因为需要在平台上查找相关资料，那时也没有想法去发布文章，记录心得。
2024-01-12 13:57:08
914
1
原创 小程序-基于vant的Picker组件实现省市区选择
以高德gaode-area.json为例，点击就可以下载高德省市区数据（包含压缩和未压缩的）刚开始看文档这个结构一时没有理解，有点懵，后面经过研究发现需要如下结构。因为想减少小程序的体积，故把文件丢到服务器上了。
2023-08-17 16:03:26
4331
原创 git 撤销add/commit，以及更换源命令
HEAD^ 表示上一个版本，即上一次的commit，几个^代表几次提交，如果回滚两次就是HEAD^^。如果commit后面的注释写错了，先别急着撤销，可以运行git commit --amend。也可以写成HEAD~1，如果进行两次的commit，想要都撤回，可以使用HEAD~2。--soft 不删除工作空间的改动代码 ，撤销commit，不撤销add。3.3、再重复之前操作源地址的操作，如果没有内容显示代表删除成功。--hard 删除工作空间的改动代码，撤销commit且撤销add。
2023-04-29 09:00:00
2565
1
原创 vue2/vue3 Provide和Inject使用方式
这种方法传递过来的数据是没有响应性的，当你改变父组件中的name时，子组件中接收的name并不会改变。官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。父组件返回一个自定义的函数,子组件进行computed来进行处理，来实现响应式数据处理。
2023-04-04 18:24:05
967
原创 vue2/vue3 EventBus事件总线(用于组件通信)
Vue 3.x 移除了 $on 、 $off 和 $once 这几个事件 API，使得vue3.x不能像2.x一样，不能直接使用EventBus。vue3 推荐 mitt 和 tiny-emitter，这里使用mitt。中定义一个新的bus对象并且挂载在原型链上，是全新的Vue实例。
2023-04-04 17:58:11
1139
原创 vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)
方案父传子子传父propsemitsv-modelemitsrefemitsprovideinjectEventBusemit / on(可用于兄弟、爷孙、全局)emit / on(可用于兄弟、爷孙、全局)Vuex作用于全局作用于全局pinia作用于全局作用于全局1、父传子主要用到props属性传递，父组件通过自定义属性给子组件传值，子组件用props接收子组件 TitleMore.vue// 子组件
2023-04-04 16:08:49
13151
1
原创 axios 下载文件且携带参数(Excel、Word...)
get和post方式中“responseType”添加层级要注意，具体使用方法在下方。
2022-10-10 11:17:54
850
1
原创 git error: failed to push some refs to ‘gitee.com:xxx.git‘
git error: failed to push some refs to 'gitee.com:xxx.git'
2022-08-01 16:03:57
880
原创 vue3 element-ui plus:Extraneous non-props attributes (ref_key) were passed to component ....
警告：Extraneous non-props attributes (ref_key) were passed to component but could not be automatically inherited because component renders fragment or text root nodes....
2022-06-28 10:45:09
2945
1
原创 vue3 watch用法
1、监听路由变化import { ref, watch } from "vue"import { useRoute } from "vue-router"<script setup>const route = useRoute()const showPage = ref(false)watch( () => route.path, (val) => { if (val === "/") { showPage.v
2022-04-11 10:29:25
8165
原创 vue3+vite 安装和配置less
1、安装// 安装lessnpm i less-loader less --save-dev2、vite.config.js配置css: { preprocessorOptions: { less: { modifyVars: { hack: `true; @import (reference) "${path.resolve("src/assets/css/b..
2022-04-07 10:43:24
25523
2
原创 vue3 clipboard复制文本
1、安装 npm install --save @soerenmartius/vue3-clipboard2、使用// main.jsimport { createApp } from 'vue'import App from './App.vue'import router from "./router";import { VueClipboard } from "@soerenmartius/vue3-clipboard"const app = createApp(App)
2022-03-31 15:04:24
2041
原创 vue3 使用particles.vue3插件粒子
效果（可以修改多种不同的样式效果）1、安装npm install particles.vue32、main.jsimport { createApp } from 'vue'import App from './App.vue'import router from "./router";import Particles from "particles.vue3"; // 引入const app = createApp(App);app.use(router).use
2022-03-30 17:49:41
5715
10
原创 vue3 ＜script setup＞下reactive用法
第一种：不使用toRefs解构的，也就是在template中使用对象引用方式<template> <div class="test-box"> <p @click="changeText">{{ data.text }}</p> <p @click="changeArrs">{{ data.arrss }}</p> </div></template>&l
2022-03-30 14:28:55
5597
原创 vue3 pinia的安装和使用
Pinia最初是在 2019 年 11 月左右重新设计使用Composition API的 Vue Store 外观的实验。从那时起，最初的原则仍然相同，但 Pinia 适用于 Vue 2 和 Vue 3 ，并且不需要你使用组合 API。Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案，Pinia 2 是对应 Vue3 的版本// 安装npm i pinia还需再安装个数据持久化插
2022-03-29 10:13:24
4155
1
原创 Android Studio 安装配置的知识和一些坑
下载最新的Android Studio安装包都是不带Android Studio SDK的1、安装包下载地址：1.1：第一个AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载AndroidDevTools 是一个收集整理 Android 开发所需的 Android SDK、开发中用到的工具、Android 开发教程、Android 设计规范，免费的设计素材等的网站。https://
2022-03-25 17:40:31
4525
原创 vue 数字滚动count-to插件，支持小数（包含vue3，网上整理）
vue3npm install vue3-count-to --save<count-to :startVal="0" :endVal="3000.22" :decimals="2" :duration="3000"></count-to>import { CountTo } from 'vue3-count-to';components: { CountTo },参考地址：https://github.com/xiaofan9/v...
2021-12-08 11:53:06
14219
原创 git 获取指定历史版本代码，并拉取下来（超详细）
1、先创建好文件夹，然后git初始化2、找到你项目的SSH地址，复制下来3、把复制的SSH地址关联起来，关键语法 git remote add origin 地址4、先拉取下来，git pull origin master5、查看提交日志，git log --pretty=oneline，每个提交放在一行显示，在浏览大量的提交时非常有用6、git checkout ID大功告成，到这一步你已经可以得到这个历史版本的全部代码！...
2021-10-30 09:56:56
33831
2
原创 vant-weapp Dialog 小程序弹出框的使用方法
因为有业务场景需要到图表展示，所以去看echarts文档和一些相关的文章，自己测试没有问题之后，便整理下给大家参考，让大家少走些弯路1、首先自己在components文件下创建个echarts.vue（自定义命名），代码如下<template> <div> <div class="chart" :id="id" :style="{width:width,height:height}"></div> </div></temp
2021-10-24 11:40:32
9408
4
原创 vue3 keep-alive+vuex配合使用（简单易用）
整理之后发现vue3的keep-alive和vue2相差也不是太大，重点是写法改变了1、App.vue<template> <router-view v-slot="{ Component }"> <keep-alive :include="includeList"> <component :is="Component"></component> </keep-alive> </router-view&
2021-09-10 09:05:24
1932
5
原创 vue3+ts Type ‘xxx[]‘ is not assignable to type ‘never[]‘
原因是：ts默认初始化空数组为 never[] 类型，跟你赋值的数据类型不匹配修改为：arr_data:[]asany[]，即可
2021-08-20 14:35:50
10705
原创 vue3+ts 引用本地图片路径的解决方案
因为vue3相对vue2来说已经取消了“require”这块，在vue2中不管是页面还是js板块中引用图片途径的话都可以require('@images/xxx.png')，但是经过测试发现vue3如果这种引用的话是会报错的，提示找不到requirevue2中的vue.config.js配置@images别名下面是正式在vue3引用的方法首先说下我这个图片放置路径，我是放在assets/images/文件夹中1、在页面内引用<img src="../asset..
2021-08-20 09:44:12
16069
10
原创 vuecli4 版本升级和遇到的一些问题
比如我现在的vuecli版本是4.5.6当我想要升级的时候，发现我不管如何执行下面的操作，等最终查看版本的时候还是4.5.6// 卸载npm uninstall vue-cli -g// 重新安装npm install -g @vue/cli// 升级npm update -g @vue/cli经过网上查阅相关资料，并测试之后发现，你要先输入命令 where vue然后删除这两个旧的，不要删除错了，接着再输入指令 vue -V，就可以了顺便提一下...
2021-08-13 11:50:55
532
原创 小程序 echarts进阶篇（四），手指缩放与放大
只需要在你的option配置添加如下属性：legend: { // 显示图例组件 show: legendDatta ? true : false, data: legendDatta, bottom: '0', z: 100 }, // 重点，添加这个就可以了 dataZoom: { type: 'inside' }, xAxis: { type: 'category', .
2021-07-28 16:03:58
5505
4
原创 小程序 echarts进阶篇（三），减少echarts的体积
如果是从官网下载下来的echarts会有900多KB的大小，小程序开发不采用分包，然后你那个图片又多，很容易就超出小程序限制的2M大小，所以我们可以借用官网的自定义构建来自定义需求，echarts在线构建选择好配置之后点击下载，如果勾选了代码压缩就会下载echarts.min.js，没有勾选的话是echarts.js，建议正式发布版是下载压缩过后的，要不然文件还是会很大。2、下载压缩版好后，把echarts.min.js修改成echarts.js，然后覆盖你项目中的echar..
2021-07-28 11:52:13
2587
原创 小程序 echarts图表开发项目篇（二）
在我们项目使用的时候，肯定不能像上篇文章那样使用，因为我们得获取到后台数据，然后渲染出来，这时候我们得把option配置提取出来，具体的操作如下：1、JS代码const app = getApp();import * as echarts from '../../ec-canvas/echarts';var chartLine; // 这是第一个图表var chartLineMore; // 这是第二个图表function getOption(titles, xData, legendD
2021-07-28 11:13:14
705
原创 小程序 echarts图表开发基础篇（一）
1、首先，下载 GitHub 上的ecomfe/echarts-for-weixin项目。下载好后把这个文件夹保存到你的项目中，2、初步尝试，这块代码我是直接引用官网上的代码import * as echarts from '../../ec-canvas/echarts';const app = getApp();function initChart(canvas, width, height, dpr) { const chart = echarts.init(c...
2021-07-28 10:51:10
1455
原创 echarts 放大与缩放的功能
// 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。// 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。function getOption(titles, xData, legendDatta, series, top) { var option = { title: { text: titles, .
2021-07-28 10:35:44
42853
11
原创 小程序 rich-text中图片点击放大与自适应大小问题
1、图片自适应大小// obj.info 后台返回的富文本数据 obj.info = obj.info.replace(/<img/gi, '<img class="fwb-img"') .replace(/<section/g, '<div') .replace(/\/section>/g, '\div>');// html:<view class="mdl-xq"> <rich-text
2021-07-09 14:49:59
3241
2
原创 js 保留两位数且不四舍五入
// 第一种，如果小数点不足两位的话，不会自动填充0let isTotal = Math.floor(1.4564 * 100) / 100; let isTotal2 = Math.floor(1.4 * 100) / 100; console.log(isTotal); // 输出结果：1.45console.log(isTotal2); // 输出结果：1.4...
2021-06-21 08:56:31
8042
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人