- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue3中让echarts的属性可以响应式改变的方法
在echarts中发现它的属性直接使用function回调并没有作用，只需要把function改成立即执行即可。
2023-03-03 16:33:06
516
1
原创 vue3+vite项目使用xlsx+xlsx-style+file-saver导出带有样式的excel表格方法
基于vue3+vite的项目实现导出带有样式的excel表格，框架用的是vben，我的版本为“xlsx”: “^0.16.9”,“xlsx-style”: “^0.8.13”“file-saver”: “^2.0.5”,
2022-12-06 17:48:24
4987
6
原创 vben2使用ant2的Tree组件vite打包后，刷新页面出现报错TypeError: Cannot set properties of undefined (setting ‘name‘)
vben使用ant组件打包后，刷新页面发生样式丢失以及白屏的问题解决方法。
2022-07-25 14:44:48
1368
9
原创 vben：vite+vue3使用cesium的方法以及遇到的一些坑
vben:vite+vue3使用cesium的方法以及遇到的一些坑，Cesium信息框不能执行js语句解决方法，Cesium get net::ERR_CONNECTION_RESET错误
2022-02-17 14:43:23
3735
2
原创 JSON-SCHEMA + AJV的坑
使用JSON-SCHEMA需要先下载ajv以及afv-formats。npm install ajv afv-formats -S或者yarn add ajv afv-formats -S我下载的版本是"ajv": "^8.9.0","ajv-formats": "^2.1.1",看教程学习使用json-schema+ajv的时候，创建一个test.js的文件，通过node运行。例子如下：const schema = { type: 'object', properties: {
2022-01-24 11:52:37
1063
5
原创 vue实现筛选数组对象的功能
首先需要定义一个存储筛选结果的数组，还有筛选内容的变量。此处用的是typescriptconst resolveArr = ref<any>([])const searchValue = ref<string>('');定义筛选的方法，假设我们要筛选的数据源为dataSource数组对象// 假设数据源dataSource = [ { name: 'aa', detail: 'detaila', children: { obj: 'cc' } }
2022-01-05 15:05:48
3915
1
原创 vue3数字滚动组件
直奔主题，vue3的数字滚动组件js版本代码如下：<template> <div class="scroll-number"> <transition-group class="scroll-number-box" name="list" tag="p"> <div v-for="(item, index) in numList" :style="{ left: index * margi
2021-11-03 12:13:19
1698
原创 echarts引用了markPoint或者markLine没有效果
在一些后台框架，比如vben，对于echarts引用markPoint和markLine等属性却没有显示出来，一般通过import直接引用即可解决。import 'echarts/lib/component/markPoint'import 'echarts/lib/component/markLine'其他属性也可这么操作...
2021-10-30 16:24:03
3220
2
原创 Vue3项目中使用AE+bodymovin+lottie的模式制作特效
第一步：使用AE的插件bodymovin生成json文件。我这里使用的是ae2018版本，需要对应的是bodymovin5.6.6版本。参考例子第二步：安装lottie-player插件引用json文件。lottie-player文档其中需要注意的是本地的文件src指向localhost路径级别，比如这个例子的路径。<lottie-player autoplay loop mode="normal" src="src/assets/json/data.js..
2021-09-25 15:32:34
741
原创 vue3获取当前页面路由url
首先引用useRoute，然后用route获取，剩下的想要取什么看自己需求import { useRoute } from 'vue-router'const route = useRoute()console.log(route)
2021-08-19 11:13:55
4232
原创 Vue3中使用ant design vue的textarea时的坑
在使用vue3时，想要使用ant design vue的input组件里的textarea来适应文本高度。坑：可是直接使用textarea标签的话是获取到的vue中的textarea标签。而ant组件的textarea只需要import Input组件即可，所以此时可以通过重新命名的方式避免标签重名的错误。如下：// 导入Input组件即可import { Input } from 'ant-design-vue'// 组件注册重新命名components: { InputTextArea: I
2021-07-23 12:20:44
5051
原创 vue自定封装的边框组件
如上图所示，自定义封装了一个vue的边框组件，代码如下，具体的样式可以自己调整，当前案例支持传入宽度、高度、最小高度、标题。<template> <div :style="{ width: width, height: height, minHeight: minHeight }" class="box"> <div class="box-content"> <div class="title"> {{title}}.
2021-07-14 17:57:00
4321
原创 在vue项目中实现网页整体随屏幕尺寸缩放
此处的项目为vue2版本，因为pc端的项目没有采用响应式自适应手机端的设计，所以使用lodash插件实现屏幕移动端自适应。首先下载lodash插件。npm i lodash -S然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。import _ from 'lodash'然后给app容器挂上ref=“app”<template> <a-config-provider :locale="locale"> <div id
2021-05-25 15:35:03
7809
16
原创 高德地图货车路径规划JS API以及WEB API在VUE中使用方法
做一个路径规划系统，使用到了高德地图的API以及VUE，而路径规划方面在高德地图中，货车的接口使用次数是极为有限的，研究了一段时间，所以使用的时候要谨慎一点次数。本文记录一下高德地图的JS API和WEB API的货车路径规划的在VUE的使用方法。JS API的货车路径规划首先JS API在VUE项目中使用需要先在官网申请好key，再参考官网文档即可。具体可以参考我的另一篇关于高德地图在VUE中的使用方法。链接: vue调用高德地图1.4.15版本.当地图能够使用之后，就可以像其他AMap一样使用
2021-03-04 11:54:19
2294
4
原创 git指令总结
这是我总结运用过的一些git指令，name为分支名，如有不对，请提出，谢谢。检验本地内存文件git status加载入本地内存git add .命名文件内存git commit -m 'name'首次添加根目录入远程仓库git push -u origin name更换分支git checkout name显示分支git branch合并分支git merge name补充进远程仓库git push创建新分支git checkout -b name查看本地和远程所有分支git bran
2021-01-26 11:01:57
191
原创 vue调用高德地图Web端JS API
在网上找了很多vue调用高德地图的方法，可是都各不相同，还有很多因为是老版本，vue-cli不同，我用的是vue-cli 4.0以上的，vue是2.0版本，然后参考一下他们的自己捣鼓出来了。首先要在高德开放平台获取key进入官网链接: https://lbs.amap.com/.右上角控制台注册登录选择应用管理-我的应用-添加然后在public文件夹下的index.html的body中添加<script type="text/javascript" src="https://webapi.
2021-01-13 17:02:01
2597
6
原创 vue项目在局域网中让其他设备连接上mongodb数据库
在vue项目中，通常运行项目后，会生出两个链接，一个是本地的127.0.0.1和局域网的本机ip地址链接。然后我发现当其他设备在局域网打开该项目的时候使用数据库的api访问会请求失败，查阅了大量资料后才发现，解决方法很简单。是自己设置的axios请求链接需要修改一下。import axios from 'axios'Vue.prototype.$http = axios.create({ baseURL: 'http://localhost:3001/api'})只需要将上述的localh
2021-01-07 11:50:25
337
原创 ant-design-vue 对table的一列进行时间排序
为了实现ant-design-vue的table列时间排序功能，我们可以在columns中添加：{ title: "发布时间", dataIndex: "releaseTime", key: "releaseTime", sorter: (a, b) => { let aTimeString = a.releaseTime; let bTimeString = b.rele
2020-12-25 13:53:33
1435
1
原创 用ant-design-vue的日历Calendar组件来遍历数组到每个不同的日期格子上
我们看官方文档的Calendar组件是通过switch来将数据渲染到每日的格子上的，可是我却发现这个渲染会使得每个月的同一天都会出现这种情况，case：1则每个月的1日都会有数据渲染上去。那么我就想通过导入一个数组就可以实现每日的格子数据渲染，那么我们就得了解Calendar渲染到每个日期格子的原理。首先它是通过v-for遍历到每个日期格子的。<li v-for="item in getListData(value)" :key="item.content">如上，主要看getList
2020-12-16 16:00:52
2967
4
原创 用vue实现动态组织结构图
vue-tree-chart首页：https://github.com/tower1229/Vue-Tree-Chart安装npm i vue-tree-chart --save使用<TreeChart :json="treeData" />import TreeChart from "vue-tree-chart";export default { components: { TreeChart }, data() {
2020-12-15 17:22:54
2378
原创 使用ant design vue做一个选择不同选项展示不同表格的小例子（带筛选功能）
效果如下图所示。通过点击左侧的选项可以在右侧的表格展示对应选项包含的数据。页面代码如下：<template> <div style="display: flex;"> <a-card style="width: 20%;"> <a-table :data-source="data" :columns="columns1" :customRow="Rowclick" >
2020-12-09 11:07:44
2980
原创 vue中给对象更新属性页面没有变化解决方法
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。this.$set(Array, index, newValue)...
2020-12-09 11:00:56
1196
原创 ant-design-vue通过babel按需导入
当我们导入组件ant-design-vue时，为了进行优化，可按需导入，逐个导入太麻烦，就可以通过修改babel.config.js文件来进行按需导入ant-design-vue的组件首先将babel.config.js文件添加plugins: [ ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' } ] //`style: true`会加载less文件 ]
2020-11-19 11:18:24
1386
原创 引用ant-design-vue/dist/antd.less主题样式报错解决方法
当我们使用ant-design-vue组件时，想要设置主题样式，想引用ant-design-vue/dist/antd.less，可是出现如下报错。./node_modules/ant-design-vue/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref–10-oneOf-3-1!./node_modules/postcss-loader/src??ref–10-oneOf-3-2!./node_modules/less-loader/
2020-11-19 10:49:01
12186
2
原创 MongoDB的常用操作
MongoDB的常用操作显示数据库显示已有的数据库显示当前的数据库创建、使用数据库插入文档插入单个文档显示数据库显示已有的数据库show dbs显示当前的数据库db创建、使用数据库use可以切换到指定的数据库，如果该数据库不存在时，会创建该数据库。use nodejsBook或switched to db nodejsBook插入文档插入单个文档db.file1.insertOne({title:'文档1',time:'2020-01-01',author:{age:18,name
2020-11-11 10:27:24
85
原创 js用dom写入html元素来实现v-show的vue方法
为了用JavaScript实现一个单选框的不同选择能v-show不同的内容，我采取了js的dom写入html元素的方法。首先得要先赋予这个元素一个id。接着dom出这个元素，选出它的innerHTML属性赋值即可，这样是可以写入标签的。<body> <div id='id1'></div> <button id='id2'>点击添加（show）</button> <button id='id3'>点击删除（hide）<
2020-11-10 15:00:34
642
原创 vue版号查询
我们如果忘了自己安装的vue的版号是多少，则可以在cmd中输入npm list vue来查询vue的版号，结果为`-- [email protected]那么vue的版号为@后面的2.6.12如果直接使用vue -V或者vue --version，那么我们查询到的是vue-cli的版本。...
2020-11-09 10:37:29
312
原创 微信公众号学习笔记day01-access_token
/*特点:1.唯一的2.有效期为2小时，提前5分钟请求3.接口有限，每天2000次请求地址：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET请求方式：GET设计思路：1.首次本地没有，发送请求获取access_token,保存下来（本地文件）2.第二次或以后：-先去本地读取文件，判断它是否过期-过期了-重新请求获取acc
2020-11-03 16:01:03
157
1
原创 Ngrok实现内网穿透
最近在学习微信公众号的开发，然后需要用到外网链接，所以内网的程序需要通过ngrok穿透到外网使用。进入https://ngrok.com/官网，下载对应系统的ngrok，先要注册账号，或者使用谷歌账号、github账号登录。登录进入后就可以选择下载了，可以按照文档指示进行操作，我的是windows系统，所以就直接解压了。然后你可以在当前的页面看到自己的密钥接着你就可以运行解压好的ngrok.exe了，然后对应输入指令ngrok -authtoken xxxxxxxxxxxxxx
2020-10-29 18:00:46
130
原创 ant design vue的table表格高度设置
因为有时候数据的不足会导致ant design vue的table表格撑不起来，影响美观，所以我通过/deep/来修改他的高度固定值让其有个足够的固定高度，从而解决问题。/deep/ .ant-table-body{ min-height: 500px;}//或者/deep/ .ant-table-body{ height: 500px;}...
2020-10-29 10:54:01
20339
7
原创 使用pm2管理项目
当我们有多个项目的时候，后台服务器的启动如果用powershell逐个启动则需要多个窗口，也不方便，所以在此记录自己使用pm2同时管理多个项目的方法。以下的“脚本”为后台启动文件名称，“自定义名称”为自己为脚本设置的一个名字。全局安装pm2npm i pm2 -g启动项目pm2 start 脚本//或者将脚本自定义一个名称pm2 start 脚本 --name 自定义名称查看运行项目pm2 ls重启项目pm2 restart 自定义名称（或者id）停止项目pm2 stop
2020-10-27 16:59:12
626
原创 ant design vue的table行高调整
在运用ant design vue的table表格时，觉得行高间距有点大，通过检查发现是padding撑起来了，但是研究一段时间发现使用customRow属性的回调函数改变padding没有效果。然后就可以选择最简单粗暴的直接修改对应的样式，通过检查找到行高样式的css，直接来个/deep/修改，成功了改变了padding压缩了行高。//直接在style中添加样式//这样使用会使得当前页面所有的table表格行样式都会改变//如果想要调整表头的行高，可以把下面的td改成th//调整body行属性
2020-10-27 15:57:23
15944
3
原创 Vue导出到excel
在vue项目中安装好插件npm install vue-json-excel//或者cnpm install vue-json-excel在main.js文件中导入插件//import插件import JsonExcel from 'vue-json-excel'//使用插件Vue.component('downloadExcel', JsonExcel)在页面中使用download-excel<download-excel class = "export-.
2020-10-24 19:04:36
301
原创 vue使用setInterval做loading加载延时并及时清除计时
延迟5s加载并及时清除计时，只需要吧clearInterval内嵌在setInterval中即可。var loadingTime = setInterval(() => { this.loading = false clearInterval(loadingTime) }, 5000)
2020-10-21 11:42:10
1482
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人