![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
粉末的沉淀
无趣
展开
-
vue3:组合式API和选项式API里分别如何使用store
vue3越来越主流了,但是很多人还不习惯vue3的组合式API写法,依旧喜欢用选项是API,但是很多功能的写法是不同的,比如我今天要分享的store写法。在setup里将store实例化,然后其他地方用this调用即可,watch里不需要加this。我用的store是pinia。原创 2024-04-26 23:01:46 · 327 阅读 · 0 评论 -
vue:自定义组件如何使用v-model
在vue中,v-model 的值相当于默认传递了一个名为 value 的 prop 和一个名为 input 的事件(例如:我们使用antd vue的auto complete来自定义一个组件。这个自定义组件我要放在jeecgboot框架里,作为一个通用的自定义组件。注意,这个value的prop是需要在自定义组件内声明的。时,我们有时候需要使用 v-model 来双向绑定。只需要传入 dataSource 联想的数据源即可。在index.js文件里引入。原创 2023-02-09 10:04:29 · 719 阅读 · 0 评论 -
jeecgboot:在index.html引入js的路径设置
注意不要写成../../这种格式,这种格式在本地运行完全正常,但是打包后就会报错。原创 2022-04-14 12:23:32 · 541 阅读 · 0 评论 -
JavaScript:在vue里使用xlsx-style插件创建带样式的excel文件
前面有一篇博客写了利用a标签生成excel文件,虽然简单,但不算太完美。JavaScript:利用a标签生成excel文件_粉末的沉淀的博客-CSDN博客在看了N多文章尝试了N多次后,终于找到了合适我的方法。1、xlsx和xlsx-style的关系两者都可以实现创建excel,但是xlsx免费版仅仅只能做单元格合并,收费版才能设置单元格样式,xlsx-style是基于xlsx的插件,免费,可以设置单元格样式,但是缺少了xlsx插件里很多实用的功能,比如aoa_to_sheet,可以直接把二维原创 2022-04-13 14:00:04 · 3826 阅读 · 3 评论 -
JavaScript:moment12小时制和24小时制
moment(values.data).format('YYYY-MM-DDHH:mm:ss')--------------24小时moment(values.data).format('YYYY-MM-DD hh:mm:ss')--------------12小时原创 2021-12-17 15:31:05 · 1511 阅读 · 0 评论 -
echarts: legend自定义icon
1、引入图片。import iconUrl from '../assets/gas_station.png';2、在legend里面定义iconlegend: { data: ['审批完成', '待审批', '驳回'], icon: ('image://' + iconUrl + ''), itemWidth: 20, itemHeight: 20 },因为我这个图片是32*32像素的正方形,所以要设置itemWidth和i.原创 2021-12-16 13:25:25 · 2659 阅读 · 0 评论 -
jeecgboot:打印报错Failed to read the ‘cssRules‘ property from ‘CSSStyleSheet‘: Cannot access rules“
问题原因:全局引用了leaflet的css样式,在打印的时候,打印插件会去读取leaflet的css文件,但是又没有访问权限,所以就报错了。解决方法:局部引用css。原创 2021-12-15 15:05:01 · 3304 阅读 · 0 评论 -
JavaScript:正则表达式获取url参数
1、创建js文件,编写获取url参数的方法export default{ getUrlKey:function(name){ return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null; }}2、在main.js里引入js文件3、在需.原创 2021-12-14 16:01:01 · 1999 阅读 · 0 评论 -
jeecgboot:单个页面免登录
1、配置路由2、 在permission.js里,把刚才的路由添加到白名单最终效果:直接输入地址,就可以看到页面了,不需要登录。如果已经完成了前面两个步骤,依旧需要登录,那么就查查是不是还有其他安全机制需要处理,我这边只设置了路由和permission就实现免登录了。...原创 2021-12-14 15:47:35 · 3098 阅读 · 1 评论 -
jeecgboot:设置为缓存路由,切换页面,保留数据
在A页面输入数据后,切换到B页面,再回到A页面的时候,刚才输入的数据就丢失了,十分不方便。解决方案:在该页面对应的菜单管理里面,设置为缓存路由,切换页面后数据就不会丢失了。最终效果:...原创 2021-12-10 16:01:44 · 4444 阅读 · 13 评论 -
supermap:聚合的使用
点聚合的作用是把一定范围内的点聚合在一起计数,举个例子,中国有100所大学,其中湖北省有40所,湖南省30所,广东省20所,广西省10所,然后往下继续细分到每一所大学的定位,那么我们在地图初始化状态看到一个圆圈,标注数字是100,这是总数,继续放大,一个圆圈变成4个圆圈,上面分别是40,30,20和10,以此类推。1、安装Leaflet.markerclusterhttps://github.com/Leaflet/Leaflet.markercluster还是推荐使用npm install l原创 2021-12-08 18:34:48 · 1423 阅读 · 1 评论 -
supermap:leaflet 自定义Marker的图片
在vue中,要是用import来设置icon的url。效果图:在html中可以直接写icon的url。原创 2021-12-08 17:04:25 · 308 阅读 · 0 评论 -
echarts:点击地图跳转到指定页面
给chart添加click监听。initEchartMap() { let mapDiv = document.getElementById('china_map'); let myChart = this.$echarts.init(mapDiv); myChart.setOption(this.options); myChart.on('click',function(args){ console.log(args.data);原创 2021-12-07 19:26:54 · 2690 阅读 · 0 评论 -
echarts:城市地图的实现
首先,到datav下载自己需要的城市json文件,datav地址如下:阿里云 DataV - 数据可视化平台<template> <div id="map_chart" style="width: 100%;height: 600px;"></div></template><script> export default { name: 'CityMap', props: { msg: String },原创 2021-12-07 16:49:52 · 1791 阅读 · 1 评论 -
vue:mode: ‘history‘可以去掉url里的#
配置好路由后,发现访问地址里有#。只需要在把router里加上mode: 'history'即可。const router = new VueRouter({ routes, mode: 'history'})原创 2021-12-07 16:40:18 · 574 阅读 · 0 评论 -
vue:如何实现文字竖排
1、如果是在template里面,使用<br>将每个文字换行,即可实现竖排。2、如果实在script里面,使用\n将每个文字换行,即可实现竖排.原创 2021-12-06 19:30:33 · 4272 阅读 · 0 评论 -
vue:如何使用js文件里的方法
首先,js文件里的方法必须加export前缀,否则其他文件没有访问权限。1、vue文件里局部引入直接在vue文件里引入方法方法,记得给方法名称加{}.在需要使用方法的地方,直接使用即可,不需要加this之类的前缀。2、main.js里全局引入在vue文件里调用js文件里的方法,如果js文件里还有其他方法,都是使用this.$urlParse.来调用即可。...原创 2021-12-06 19:10:20 · 10804 阅读 · 0 评论 -
vue:监听滚动条事件
由于某些原因,我不得不手工用ant design vue的a-row和a-col拼凑了一个表格,好不容易添加了水平滚动条,然后发现只要拖动滚动条,左表头未设置右边框的问题就被暴露了(为什么没有设置右边框呢?因为如果设置了右边框,就跟右边的表格线重复了,相当于2px的线条,很影响美观,不拖动滚动条的时候,这个问题被完美隐藏了)。问题如下:解决方法:监听滚动条,为左表头动态添加右边框。开始滚动后,添加右边框,滚动条恢复到最左边后,去掉右边框。给事件的两位主角都加上id属性,以便于docu原创 2021-12-06 15:15:03 · 3620 阅读 · 0 评论 -
supermap:在vue项目里使用leaflet创建地图
<template> <div id="map" style="margin: 20px auto; width:100%;height:500px;"></div> <!-- width可以为100%,但是height必须是一个确定的值 --></template><script> export default { name: "hello", components: { }, data() { .原创 2021-12-03 16:32:48 · 2613 阅读 · 2 评论 -
vue:在main.js中全局引用css的方法及坑(转载)
步骤:1、配置文件webpack.config.js: { test:/\.css$/, loader:'style-loader!css-loader' } 坑1:-loader尾缀 坑2:Module build failed: Unknown word模块创建失败:未知文字???? 解决方案:注掉整个css的配置,即: //{ //test:/\.css$/, //loader:'style-.转载 2021-12-03 15:35:37 · 3681 阅读 · 0 评论 -
vue:v-for遍历二维数组做表格
<template> <div> <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata' border="1px solid #ccc"> <tr v-for='(item, index) in data'> <template v-for='items in item'> &l.原创 2021-11-24 16:41:55 · 5755 阅读 · 0 评论 -
vue:使用父组件通过props传到子组件的值
1、首先,我们要在父组件中给子组件的props赋值如果子组件只是需要在template里显示一下传过来的值,直接用{{}}就可以了。但是,如果需要在script里使用传过来的值,(也就是我们要用到this啦)那么在父组件中赋值的时候就必须精确到属性一一赋值,如下图。然后在子组件的我们再定义一个变量,在watch里来接收传过来的值,并且这个新变量只有在watch里才有效!(this.initChart();原来是放在mounted里面调用的,这时候要移到watch里去,因为我在...原创 2021-11-23 15:52:20 · 788 阅读 · 0 评论