前端
qq_41588568
这个作者很懒,什么都没留下…
展开
-
使用Vue-draggable组件实现表格拖拽效果
1.安装组件npm install vuedraggable -S2.引入组件完整代码:helloWorld.vue<template> <div class="hello"> <el-button @click="getData()">加载数据</el-button> <table class="dataTabble" v-for="(item,id) in tableData" :key="id">原创 2021-01-25 16:05:22 · 2482 阅读 · 0 评论 -
vue项目中使用sortablejs实现拖拽表格
1.首先install一下sortablejsnpm install sortablejs --save2.引入import Sortable from "sortablejs";完整代码如下:HelloWorld.vue<template> <div class="hello"> <el-collapse v-model="activeNames"> <el-collapse-item :name="index原创 2021-01-25 15:26:29 · 2304 阅读 · 0 评论 -
微信小程序中实现一段文字当只有一行时居中显示,多行时左对齐
刚开始没有头绪,百度了一下都说用wx.createSelectorQuery()这个方法,但是尝试无果。后来突然想到一个办法,如下:其中.prompt的样式如下看下效果:原创 2020-11-11 14:51:30 · 3376 阅读 · 0 评论 -
微信小程序中实现获奖名单滚动播放
使用小程序的swiper组件<swiper class="swiperBox" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'> <block wx:for-index="index" wx:for='{{list}}'> <swiper-item> <view class='swiperItem'>原创 2020-10-19 15:21:49 · 1143 阅读 · 1 评论 -
fastadmin表格之自定义搜索
1.使用搜索模板 在对应的index.html页面最底部添加搜索模板(注意模板是添加在和table一个页面的HTML页面的最底部)将自定义的搜索内容即下边这段代码放在最底部<script id="countrySearch" type="text/html"> <!--form表单必须添加form-commsearch这个类--> <form action="" class="form-commonsearch form-horizontal"&g..原创 2020-10-13 16:12:49 · 4110 阅读 · 0 评论 -
为date类型的input设置默认值为当前时间
<input type="date" id="date" placeholder="请选择日期"/> $(document).ready(function () { var date= new Date(); var day = ("0" + date.getDate()).slice(-2); var month = ("0" + (date.getMonth() + 1)).slice(-2); var today= d.原创 2020-10-10 17:13:51 · 3363 阅读 · 0 评论 -
fastadmin中使用phpExcel导出表格数据到excel中
虽然说fastadmin中表格自带导出excel,但是那个东西忒不好用了,每次点击导出,就刷新表格,默认最近七天的数据,所以无奈之下只好另寻办法了,废话不多说,接下来说一下phpExcel的使用:一,下载phpExcelgit clone https://github.com/PHPOffice/PHPExcel完成之后会出现以下以下的文件夹这个被更名的文件夹内部目录如下:二,把上图圈住的那个PHPExcel文件夹拷贝到你的项目中三,在你的控制器中添加导出方法...原创 2020-10-10 17:10:32 · 2697 阅读 · 0 评论 -
微信小程序setData赋值失败
原因是this.setData赋值代码中的最后一行nextVipName,index值是4,但是data的长度是5,所以下标为index+1的data[index+1]是不存在的,所以出现了setData赋值失败问题。修改一下就ok了:原创 2020-10-09 15:48:04 · 2093 阅读 · 0 评论 -
css实现圆圈进度
参考文章链接:https://my.oschina.net/conqueror/blog/727713,在自己的需求上做了一下改变。效果图:html:<div class="circle col-md-2" style="background: #91DBF2;"> <div class="pie_left"><div class="left" style="background: #23B7E5;"></div></div&.原创 2020-08-18 11:17:16 · 757 阅读 · 0 评论 -
html页面使用vue进行单页面开发,封装组件以及父子组件传值
一.首先在html页面中引入vue.js二.由于多个页面用到相同的vant中相同的组件cell,所以写一个公共的组件,如下:子组件:父组件:效果:原创 2020-05-25 13:51:45 · 2963 阅读 · 2 评论 -
openlayers测距和测面积
初次使用openlayers地图进行开发各种地图功能,测距和测面积使用的是官方例子并进行了一些简单的修改,官方示例在测量一次之后不能停止,修改后,每点击测量,只会测量一次。js文件:measure.jsimport Draw from 'ol/interaction/Draw'import VectorSource from 'ol/source/Vector';import VectorLayer from 'ol/layer/Vector';import TileLayer fro.原创 2020-05-15 09:22:06 · 4642 阅读 · 4 评论 -
css 精灵图的使用
第一次在项目中使用精灵图效果,记录一下:效果展示:html:css:原创 2020-05-15 08:55:40 · 257 阅读 · 0 评论 -
element 表格某一列数据循环展示
数据结构是这样的:循环可以使用插槽进行循环:原创 2020-05-14 14:12:12 · 2461 阅读 · 0 评论 -
vue-element-admin项目中收缩中间栏
实现效果,就是中间left-content可以收缩,使右侧地图可以最大化显示(left-content和right-content的父元素为about-content)在父元素上写一个小按钮,点击利用display:none ;diaplay:block;隐藏显示left-contentdata部分:methods部分:...原创 2020-03-27 17:33:57 · 732 阅读 · 0 评论 -
leaflet地图容器动态改变时,地图自适应容器
map.invalidateSize(true);原创 2020-03-27 17:18:02 · 772 阅读 · 0 评论 -
vue-element-admin中根据主体颜色动态改变图标颜色
首先必须使用svg图像的icon框架已经封装好了,我们只需要在使用的地方引入icon图标,具体操作:1,将你的svg图像放入以下文件夹2. 在使用的地方引入你的图标,其中icon-class是你的svg的名称basecolor是主题色彩最后,需要注意一点,如果你的UI给到你的svg本身带有颜色,那么是改不了颜色的,需要将你的svg上传到iconfont(阿...原创 2020-03-26 16:07:35 · 2290 阅读 · 0 评论 -
vue项目头部路由,侧边栏路由联动问题
菜单效果:头部四个大的菜单,点击头部每个菜单,对应切换左侧菜单栏,点击浏览器刷新,刷新页面的同时保持各个菜单的状态不变头部四个菜单layout/index.vue:data部分:data() { return { index: '1', //默认进去为首页 //activeIndex2: '1', }},计算属性部分:compu...原创 2020-03-26 10:35:55 · 6558 阅读 · 4 评论 -
vue项目使用swiper
首先:npm install swiper vue-awesome-swiper --save其次在main.js中全局引入:import VueAwesomeSwiper from 'vue-awesome-swiper'// import styleimport 'swiper/css/swiper.css'Vue.use(VueAwesomeSwiper)在文...原创 2020-03-25 13:40:11 · 506 阅读 · 0 评论 -
导出图片到word文档
一:安装环境npm install mhtml-to-word二:在文件中引入三:详细使用exportWord(){ let that = this; var val = that.selectionList; val.forEach(item=>{ if(item.type == 0){...原创 2020-03-06 10:37:25 · 406 阅读 · 0 评论 -
git新建分支
有两种方法,第一种就是在码云上新建分支,然后拉取到本地1.首选在码云上创建新的分支2.在本地项目目录下git pull拉取到本地3.切换分支:git checkout 分支名 git branch -a (查看所有分支) ...原创 2020-03-04 09:33:43 · 126 阅读 · 0 评论 -
mapbox聚合,根据不同状态展示不同图标
首选聚合的话,大家可以参考官方的这个例子:根据不同状态显示不同图标,比如我的项目需求是根据在线,离线状态,分别图标为绿色图标和红色图标:可参考官方文档中的这个例子:根据以下代码和表达式语法,结合自己的需求写自己的代码表达式语法:以下是我的详细代码 ;以下是聚合函数代码:效果图:其中,自定义图片的引入代码如下(一条龙哈哈):...原创 2020-02-25 18:58:31 · 4696 阅读 · 3 评论 -
vue项目+element表格前端使用纯js导出word文档
详细请读https://www.jianshu.com/p/0de31429b12a这篇文章首先安装各种工具:-- 安装 docxtemplatercnpm install docxtemplater pizzip --save-- 安装 jszip-utilscnpm install jszip-utils --save -- 安装 jszipcnpm instal...原创 2019-12-24 15:42:13 · 2551 阅读 · 0 评论 -
vue前台控制账户权限,菜单权限
新手小白,之前从未做过类似的权限功能。首先说明一点,就是从我百度的经验以及从身边人了解的知道,做权限控制最好是后台返回菜单数据,然后前台渲染。而所谓的前台控制权限是不存在的,只不过是,前台控制显示而已,有待深入了解。一开始我是蒙圈的,百度了好过都说需要前台配置然后调用接口,后台返回菜单数据,最后进行渲染。但我始终不明白这中间如何操作才能让后台返回菜单数据。但因为我的合作伙伴,后端同事说...原创 2019-11-21 16:07:01 · 827 阅读 · 0 评论 -
图片跑出父元素
代码部分:样式:效果:当我把图片样式加上display:block;时,正常显示,不知道为啥。哪位大神看到讲解一下。原创 2019-08-13 14:05:58 · 167 阅读 · 0 评论 -
sublime在vue文件引入css部分出现一条红杠,且标签显示不正常问题解决
问题如图:我的css引入并没有问题,但是就是 显示一条红杠,而且其他那些标签显示也不正常,非常难看。解决办法:点击菜单栏——查看——语法这时候我发现我的语法中选中的是Vue Component,然后我抱着试一试的想法,把语法改成了HTML,结果,好了问题就这样解决了。此处高兴三秒钟,哈哈哈哈哈修改语法后,一切正常,如下:...原创 2019-08-08 09:30:04 · 721 阅读 · 0 评论 -
百度地图清除标注和聚合点
参考这篇文章:https://blog.csdn.net/lianzhang861/article/details/81387293 cleanAll(marker){ //清除覆盖物 map.clearOverlays(); //清除聚合点 markerClusterer.clearMarkers...转载 2019-07-23 14:50:48 · 4937 阅读 · 1 评论 -
js二维数组的定义和赋值
//定义vararr=newArray();for(vari=0;i<2;i++){arr[i]=newArray();for(varj=0;j<2;j++){arr[i][j]=1;}}//赋值arr[0][0]="hello";多维数组的定义: arr(length){ for(var i=0;i<length...原创 2019-07-26 18:03:42 · 17193 阅读 · 1 评论 -
小程序向h5页面传值
小程序index.js小程序index.htmlh5页面:原创 2019-07-31 17:23:49 · 4057 阅读 · 0 评论 -
elementui下拉框从后台获取数据动态显示
html部分:vue部分:效果:原创 2019-04-09 08:58:49 · 21887 阅读 · 16 评论 -
vue实现切换左侧菜单,对应切换右侧内容
效果是切换左侧菜单,对应切换右侧内容index.vue首页布局:左侧菜单展开内容示例:所以,实现这个效果的办法就是:<router-link to=" "></router-link><router-view></router-view>router-link标签中的to属性指向路由路径,路由匹配到的组件将显...原创 2019-08-09 09:40:51 · 21473 阅读 · 7 评论 -
vue中动态改变img标签的src属性实现图片切换
错误的示例:标签部分:data部分:methods部分:当点击上一张下一张的时候,报错如下:我也不知道啥原因》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》正确的做法:标签部分不变,data部分:methods部分:这样就不会报错了。css部分如下(很贴心吧,哈哈):...原创 2019-08-09 15:06:03 · 13359 阅读 · 0 评论 -
微信小程序开放能力web-view使用之h5页面与小程序页面交互传值
功能需求是:点击图一(图一是使用web-view内嵌的h5网页)的按钮,跳转小程序中的一个页面,其中第二个页面的所有数据都是从图一传过来的。这个问题,首先我是看的官方文档,官方文档是这样写的:但是看了之后有点不明白是什么意思,在什么情况下用,然后我就去百度,百度:web-view如何从h5页面传值给小程序,又或者微信小程序与h5页面交互传值等等等等,百度了好多,但大多数告诉...原创 2019-08-19 10:12:10 · 16312 阅读 · 4 评论 -
vue中下载图片到本地
版权声明:本文为CSDN博主「bamboozjy」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/bamboozjy/article/details/81631487...转载 2019-08-12 14:25:20 · 2576 阅读 · 0 评论 -
vue中图片引入问题以及实现openlayers地图标记
最近因为工作需要,在研究openlayers地图的使用,但是卡在了地图标记这块,不论我怎么尝试,标记就是不会显示在地图上,反反复复看了很多博客,也研究了文档,都觉得没有问题,也用html尝试了,标记可以显示,但就是在我的vue项目中显示不出来,后来发现是图片引入的问题。刚开始我是这样引入图片的:但是,在vue中动态引入图片应该使用require或者import,下边是正确的做法,完整代...原创 2019-08-22 09:40:14 · 1527 阅读 · 8 评论 -
elementui表格中使用表格数据(微信头像地址)显示图片
将微信头像那一列的url展示成图片:原创 2019-09-02 10:27:10 · 1832 阅读 · 0 评论 -
mapbox使用
首先初始化,缩放控件,语言标注转换第二就是标注的使用,标注的使用有很多方法,最简单的就是但是这种方法添加的marker当坐标点很多时(我的小程序中是3000多个点,会非常卡)。下边是使用source数据源和层layer添加标注的方法这种方法添加的不会卡,而且,如果position的数据改变,只需要改变重新setData就可以了,如下:上边代码中的图片是如下导...原创 2019-09-10 14:24:39 · 822 阅读 · 0 评论 -
vue 打包npm run bulid 后静态资源路径问题
报错如下:打开 bulid目录下的webpack.base.conf.js文件可以发现,woff或ttf这些字体文件由url-loader处理后在static/fonts目录下生成相应的文件,如下正常情况下我们 应该通过static/fonts路径来获取这些文件,但是现在我们的报错信息告诉我们请求路径是static/css/static/fonts 所以找不到,报...原创 2019-09-25 10:23:11 · 1897 阅读 · 1 评论 -
sublime 安装px转换rem插件
https://github.com/flashlizi/cssrem点击首选项-浏览程序包,把cssrem文件夹放进去然后重启sublime就行了转载 2019-07-24 14:49:57 · 168 阅读 · 0 评论 -
sublime emmet插件使用
参考这位博主的文章:https://blog.csdn.net/u012637665/article/details/83928252转载 2019-07-24 14:37:57 · 98 阅读 · 0 评论 -
vue项目中百度地图使用
第一,使用之前先在index.html中添加script,ak是什么,见百度地图官方文档第二,在webpack.base.conf.js中添加如下配置第三,在组件中引用使用:注:我这里的场景不是一张地图,而是使用百度地图的地址解析,根据经纬度解析出地址。首先使用了gcoord(https://php.ctolib.com/article/wiki/782...原创 2019-04-17 14:11:40 · 957 阅读 · 0 评论