- 博客(29)
- 收藏
- 关注
RSS订阅原创 使用anime.js实现列表滚动轮播
这样页面就会正常开始滚动了，而且放大缩小不会受影响，而我们用原生的scrollTop++方式在页面缩小比例较大的时候就不能正常滚动了，所以这算是替代scrollTop的一种方式吧。这只是我这里所使用的样式，实际设置好height即可，没有借鉴意义。
2024-03-29 16:35:41
569
原创 Echarts地图之——如何给地图添加外边框轮廓
这就需要我们把echarts registerMap的全国省份json和国界边框json的坐标相一致。但实际情况中，我们需要把国界的边框和各个省份属于国界的边框相吻合，否则就会造成两者看起来是错位的感觉。然后我们的地图展示用china命名，国界边框展示用chinaOutline命名即可。只要两个的位置，缩放大小一样，页面上就不会有错位的问题了。而且省份的边界正好处于边框的中心位置，看起来也很舒服。分别下载包含子区域和 不包含子区域的就可以了。在series内创建两个type为map的项。
2024-03-29 15:44:18
2776
1
原创 Echarts地图之——如何给省份名称添加背景图片背景色
这样就默认给了所有的省份设置了rich为a的样式，要设置的背景图就放到backgroundColor的image里面就行。如果我们需要根据后端返回数据给对应的省份设置rich为b的样式，则只需要对label的formatter重新设置即可。上次添加的背景是给整张地图添加的，如果想要给省份名称设置背景图，我们就要在label配置里面去添加设置。同样，如果要根据省份的数据来给省份添加背景色，则通过visualMap来设置。最后我们看到的配置了对应条件的省份就会是下面这样的。
2024-03-21 15:22:39
1810
原创 Echarts地图之——如何给地图添加背景图片
我们这里把背景加到了和原地图相同位置的底部（top,left,zoom等设置相同，geo的被上层覆盖），同时把原本的地图itemstyle背景设置为了transparent，这样做的目的是：保证原本的地图可以设置高亮、选中等的时候背景不会受到影响。因为如果给整张地图加一个背景是会有错位的情况的，所以这种做法不推荐，只是提供一种如何这么做的方式，而且我们这里的这张背景图片正好颜色比较相似就把边界的横线模糊掉了，没那么明显。是不是感觉并没有上面的红线错位的感觉，只能说我的这张地图颜色深边界感不明显。
2024-03-21 11:31:52
5638
5
原创 Echarts地图之——如何让地图显示出3d感
上面几个是常用的地图配置，其他的配置如label、itemstyle、emphasis（高亮）、select（选中）则和其他的图表类似可以看文档，根据需要来修改配置。然后我们给地图添加阴影的效果，与其说是阴影不如说是地图下的错位图层，多加了几层所形成的效果。这里我们通过geo给地图添加其他图层，geo和我们刚才说的series内的配置基本一样。这样我们在原有图层的基础上添加了几层阴影效果，这样就会有3d的感觉了。当我们把该option配置完成时就能看到一个基础的地图了。然后地图的基本配置我们也是知道通过。
2023-10-24 15:31:35
10674
3
原创 前端html-docx实现html转word，预览并导出文件
综上，如何模板内容格式简单，要求低，纯前端来实现这种预览导出还是可行的，要求高的话还是后端去做吧。
2023-03-13 17:44:44
8202
15
原创 js把一个数组每一项按顺序重复添加到另一个数组
list不包含某项数据，同时该数据具有重复性，可以按照这种思路把重复的数据，按顺序添加到list中去
2023-02-28 21:21:50
993
原创 Vuex每个属性的使用方式
State创建const state = { count: 0, sex: '男', from: '123', list: [ {id: 1, name: 'ohhhh', bol: true}, {id: 2, name: 'hoooo', bol: false} ]}export default { state}调用this.$store.state.test.count//1import {mapState} from 'vuex'//2-1computed:
2022-04-22 11:25:33
329
原创 vue-router中需要注意的事项
动态匹配：/xxxx/:id 这样匹配路由时后面必须跟参数否则404命名：name: ‘xxx’ 可用name跳转重定向：redirect: ‘/xxx’ 此处跟的是path使用params传参只能用name来引入路由路由组件传参props可将动态匹配参数分离布尔模式：props: true 在组件内props: [‘id’]（成为了组件的属性）可直接用id获取该参数对象模式：props: { xxxx: ‘xxx’ } 直接作为组件的属性来使用函数模式：props: route =>
2022-04-18 16:55:43
558
原创 JS的深浅拷贝
要看对象内属性值的类型，对象内都是原始类型的值，使用1.Object.assign()（对象）2.concat()（数组）3.slice()（数组）4.for in 循环第一层5.扩展运算符 对象中var car={…obj}就是复制obj到car即可进行深拷贝，但一旦有引用类型的值就无法实现引用类型的深拷贝。而对引用类型进行深拷贝需要使用JSON.parse(JSON.stringify()) 已经很方便了，但是无法复制undefined和函数(直接删除)；日期（转为字符串）、reg（转
2022-04-18 09:48:07
109
原创 flex的项目属性
flex布局经常会用到，但是经常见到一些类似 {flex: 1; flex-shrink: 0}之类的属性，以前没怎么关注过，今天整体对照着看了一遍，做一个记录。首先我们平时使用的{display:flex;justify-content:center;align-items:center;}这些是容器属性，也就是父级元素里面设置的，但是如果我们想对某一项子级元素单独设置属性，这就要用到flex的项目属性了。1.order属性设置 {order: 数字;}当给子项添加了该属性，他们会按照order属
2021-11-25 10:46:59
1418
原创 实现一个横向文字滚动链接的效果
<div id="activeSwiper" class="swipermove"> <div class="swipermoveitem"> <div id="actitem1"> <ul> <li> <a href='#' style="color: rgb(255, 0, 0);">我是第一条第一条第一条第一条&
2021-07-20 11:19:31
227
原创 记录ie8的兼容性问题
js1.x的版本基本都可以，2以上可能会有问题es6语法（ie哪个版本都不支持）css这里记录的是不支持ie8的cssbackground-size、border-radius、box-shadow、rgba、opacity、flex、background-image: linear-gradient()等等，在遇到新的再做记录各类伪类选择器如：last-child、nth-child等；除去（first-child）伪类选择器使用时尽量使用单: 双:: 可能会无法识别\9只有IE浏览器才能
2021-07-19 11:43:36
120
原创 html5shiv和respond记录
开始以为只要引入html5shiv和respond，h5和css3随便写，结果试了几次，相关样式根本显示不出来，又仔细bd了一遍得知，这俩组件功能是有限的。。。。首先html5shiv作用是：用于解决ie对HTML5新增标签不识别，导致了CSS不起作用但是注意这里只针对h5’标签’, 就是我们常用的那些header、footer、article等语义化标签，我傻了吧唧的以为input type=‘date’什么的都能展示出来（而且这不算新增的‘标签’），所以我总结了一下h5的新增的标签<audi
2021-07-16 17:37:48
134
原创 input type为date时，设置背景图片并隐藏小三角和小箭头
chrome正常版本下input为date的时候显示的input框是正常的。（后面的小图标是设计图里面要求的，后面会说怎么让该图标不受小箭头影响）但是在较低版本的chrome中会显示黑色的小箭头和小三角。原本的操作是单独设置css小三角的样式背景图换成上面展示的input[type="date"]::-webkit-calendar-picker-indicator {//这是控制小三角样式使用的 width: 22px; height: 22px; background
2021-07-16 16:39:19
2391
1
原创 vue mixins使用体验
以前只在项目中见到过mixins，因为用到的地方不多所以没有去记录。最近的项目中每个页面都需要保存每次查询时的条件以便在路由重新加载时使用，开始并没有想到，前天突然有了想法，就尝试着试了一下。首先要了解mixins是干什么的，它是一个混入的对象，结构和咱们平时vue页面中的script中的内容基本一样。export const mymixins = { methods: { // 同methods }, data() { return { //同data } }, creat
2021-05-26 14:56:48
232
6
原创 mock.js的使用尝试
前段日子做了几个静态页，里面要展示表格、搜索和分页，还要实现效果，想了想用mock能模拟后台请求，就尝试用了一下。首先要在页面中引入mock.js，然后去模拟数据，这里我单独建了个文件data.js用来创建数据。<script src="./js/mock.js"></script><script src="./js/data.js"></script>首先要了解一下mock的基本用法。Mock.mock('@string("number", 2)
2021-05-10 17:46:16
164
原创 elementui全局设置loading效果
我们在使用elementui时查询时常会用到loading的效果，基本的使用方法官方已经给出，直接再需要展示loading效果的地方设置v-loading=‘loading’，然后我们不断切换loading的值就可以实现loading的显示隐藏了。<el-table v-loading="loading" :data="tableData" style="width: 100%"> <el-table-column prop="date"
2021-03-17 10:25:14
12185
1
原创 获取上一年份最后七周的开始和结束日期
function getsevenWeekdate() { // 先拿现在时间 var now = new Date(); // 拿到去年最后一天和六周前的那天 var lastDay = new Date(now.getFullYear() - 1 + "-12-31"); var firstDay = new Date(lastDay.getTime() - 1000*60*60*24*7*6); // 获取去年最后一天的星期 var week = lastDay.getDa
2021-01-05 17:22:15
135
原创 elementui 一个选择框根据另一个选择框所选内容的改变而改变，但是选择后原数据没有清除的问题
先说问题。我们项目中时常会写一些选项之间相互联系的内容，如下根据上部用户属性的选择值不同，下面的显示内容也会根据选择值来变化，这里使用v-if来判断下面要做什么样的显示就不多再赘述。但是由于这里可能会形成多个这样的小框，如下所以这里要对数据进行循环操作来展示，所以form在绑定时不能简单使用一个对象来绑定了，而是使用了一个数组来不断往里添加或者删除来实现。数据结构：arr: [ { id: '', province: [],
2020-09-23 15:16:49
5580
3
原创 使用forEach遍历splice删除数组中元素删不全的问题
var arr = [['1'],null,null,[]]arr.forEach((item,index)=>{ if (!item||item.length==0) { arr.splice(index,1) } })数组是上面这样的，利用forEach删除后得到的却是arr = [['1'],null]按照我们的想法应该arr只剩下[‘1’]这一个子元素，可能是forEach删除后会导致数组下标重置导致的问题吧所以，这里使用filte
2020-07-21 17:09:34
1279
原创 js函数节流+防抖
function throttle (func, duration) { // duration 以秒计 let last return function () { let now = Date.now() if (last && (now - last) < duration * 1e3) ...
2020-05-07 15:36:55
1006
原创 img使用src动态请求图片，同时需要设置请求头header的问题
目前做的项目里面有个二维码是动态加载出来的，最初使用vue双向绑定src实现了src能自动请求图片。html<img :src="src">jsdata:{ src:''},mounted: function(){ this.src = 'xxxxx/xxxxx/xxx?phoneNum='+phoneNum+'&width=200&height=20...
2020-03-22 16:16:37
32695
2
原创 vue-waterfall-easy的基本使用
最近项目中有个页面需要做成瀑布流，查找了相关的组件大多推荐vue-waterfall-easy，自己也就通过中文文档尝试了一下。添加链接描述安装就不多赘述了，关键是使用的时候要在当前页面中引入、注册import vueWaterfallEasy from 'vue-waterfall-easy'components: { vueWaterfallEasy}接着是使用<...
2020-01-20 16:38:26
6965
2
原创 vue 父组件传子组件的值实时更新
今天做菜单管理时，需要在登录完成后请求到个人权限以及能看到的菜单，菜单栏是作为子组件在index.vue中注册的，而菜单栏需要的内容是index中请求继而传给它的，所以用到了vue中的父传子。<menubar :list="menuList"></menubar>子组件接收：props: ['list']其实只要父组件的menuList更新，子组件是会实时更新的...
2019-12-02 14:22:48
2704
原创 elementui 级联选择器 el-cascader props的设置问题
先上代码<el-cascader :options="arr" style="width: 100%;" :show-all-levels="false" v-model="menuForm.xxxxx" @change="handleChange" :prop...
2019-11-18 15:10:04
7235
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人