- 博客(137)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 js 数组对象转为 key对应的数组
可以使用forEach循环遍历原始数组，并将每个对象的属性值分别存储在一个新的对象中。然后，使用Object.values()方法获取这些属性值的数组。
2023-09-21 19:20:40
517
原创 vue a-table 排序字段高亮
效果如图背景：按照哪个字段排序，对应列高亮显示<a-table :columns="columns" :data-source="data" /><style scoped lang="less"> /deep/ .ant-table-column-sort .ant-table-column-title{ color: red !important; }</style>...
2021-12-16 15:01:06
529
原创 Select 组件或 Dropdown 组件下拉框随页面上下滑动的问题
背景：当页面数据过多需要滚动时，展开Select组件或Dropdown组件的下拉框后，滚轮页面，下拉框会跟着上下滑动 <a-select v-model="k.propertyContent" :filter-option="filterOptionSelect" show-search ref="entitySel" option-label-prop="label" :getPopupContainer="(triggerNode) => tr.
2021-08-25 09:24:29
1413
2
原创 antdesign vue a-table 单选勾选一行
页面效果页面methods中 onSelectChange(selectedRowKeys, selectionRows) { console.log('onSelectChange--',selectedRowKeys, selectionRows) this.selectedRowKeys = selectedRowKeys this.selectionRows = selectionRows },
2021-07-15 13:55:18
3386
原创 Lottie-前端实现AE动效，json文件引用
文章目录一、页面效果二、vue-lottie三、使用1、安装2、在main.js 引用3、代码中使用注意一、页面效果实际效果小树可以跳动二、vue-lottievue-lottie git地址 : link.三、使用1、安装npm install --save vue-lottie2、在main.js 引用import lottie from 'vue-lottie';Vue.component('lottie', lottie)3、代码中使用// html <div
2021-03-11 11:33:02
948
原创 css实现坐标点位效果
<html><body> <style type="text/css"> span { height: 40px; width: 40px; display: block; position: relative; } .demoSpan1 { width: 22px; } .
2021-03-11 09:43:54
950
原创 vue全局引入过滤器
使用npm命令安装momentnpm install moment --savemain.jsimport * as filters from '@/utils/filter'Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})filter.jsimport Vue from 'vue'import Moment from 'moment'// 定义全局时间戳过滤器Vue.filte
2021-02-21 13:36:25
288
原创 moment获取当前时间
<script>var moment = require("moment");export default { data() { return { curTime: moment().format("YYYY-MM-DD"), curWeek: "", curHello: "", }; },mounted() { this.curWeek = this.getWeek(); this.curHello = this.
2021-02-20 10:26:45
7038
原创 computed使用场景
computed computed: { lnglat() { return { lng: this.click_station_info.lng, // 对应页面v-model“站点经度”，“站点纬度” lat: this.click_station_info.lat, }; }, },watch 经纬度的变化watch: { lnglat(n, o) { if (!n.lng || !n.lat) .
2021-01-18 10:50:05
519
原创 JS实现复制功能
需求：地图上一个弹出层，无法用鼠标直接选中复制需要的文字，解决：点击【复制】，将弹出层标题复制到剪贴板，使用JS中document.execCommand(“Copy”)实现去掉 input 选中时边框 .title { width: 84%; background-color: #0a5e9c; border: 0; } .title:focus, .title:hover { outline: none; }..
2021-01-18 10:40:12
379
原创 Git创建dev分支并提交
创建新分支devgit branch dev查看分支，创建成功git branch -a切换分支git checkout dev 将分支切换到dev同理git checkout master 将分支切换到mastergit push --set-upstream origin dev设置本地分支追踪远程分支设置后，以后再push时，只需 git push 命令即可...
2021-01-06 14:31:07
3501
1
原创 键盘控制swiper翻页
文章目录1、页面效果2、引入3、页面中使用欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1、页面效果2、引入3、页面中使用template中 <!-- Swiper
2020-12-14 10:04:59
495
原创 moment获取时间
1、moment.js 获取今日时间this.$moment();2、获取前一天的时间this.$moment().subtract(1,'days');
2020-12-09 18:55:56
1277
原创 ant-design-vue中Form表单校验
页面效果实现 <a-form :form="form"> <a-row> <a-col :span="12"> <a-form-item label="城市区域" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }"
2020-11-26 12:03:56
4566
原创 Vue+Vant的组件自定义使用阿里图标库图标
Vant自带图标较少，可以搭配使用阿里图标库下载到本地方式1、下载至本地2、下载后的文件放在assets下3、在main.js中引入4、应用 <van-search v-model="searchValue" shape="round" left-icon="alisearch" class="toolbar-search" placeholder="请输入名称或ID" > <van-icon slot="left-icon"
2020-11-10 13:09:18
2544
原创 Vue使用百度地图 报错 BMap is not defined
由于Eslint 造成的，在package.json 中添加下列代码"globals": { "BMap": true }
2020-11-10 08:46:26
3780
3
原创 对VUE+vant项目进行 rem适配
Rem 布局适配Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值1、安装npm install postcss-pxtorem --save-devcnpm install --save lib-flexible2、引入在main.js 中引入 import ‘lib-flexible’3、PostCS
2020-11-09 15:41:15
521
1
原创 highcharts使用downloadCSV导出数据时间与实际时间不对应
let charts = this.$refs.xchart.chart;charts.downloadCSV({ filename });导出数据与实际展示数据少8个小时，因为所处时区的问题解决：设置time配置
2020-11-06 11:35:52
213
原创 不改变数组顺序，替换某个字段
更改前更改后 fields = fields.map((element) => { if(element == "so2"){ element = "so2_f" } return element });
2020-11-04 19:47:40
183
原创 filters中的this问题，及在computed中调用函数
背景过滤器内this的指向是undefined，因而不能在过滤器内使用this引用组件实例的变量或者方法vue中过滤器更偏向雨文本数据的转化我们可以使用computed作为替代方案
2020-09-24 10:05:16
712
原创 使用vite创建vue3项目
vite这个是尤大开发的新工具，目的是以后替代webpack，原理是利用浏览器现在已经支持es6的import了，遇到import会发送一个http请求去加载文件，vite拦截这些请求，做一些预编译，省去了webpack冗长打包的时间，提升开发体验命令创建npm install -g create-vite-appcreate-vite-app 01-vue3-vitecd 01-vue3-vitenpm installnpm run dev项目目录...
2020-09-23 14:46:34
16091
原创 elementUI中日期时间插件（DateTimePicke）daterange 时间跨度为15天 且 时间小于当前时间
要求1、时间跨度为半个月2、不能选择大于当前日期的时间页面效果api 语法实现 <el-date-picker v-model="value1" type="daterange" :picker-options="pickerBeginDateBefore" @change='selectData' range-separator="至" start-placeholder="开始日期" end-
2020-09-21 13:23:29
1402
原创 Element UI 自定义正则表达式验证金额
form表单 <el-form-item label="计划付款金额" prop="plannedAmount"> <el-input v-model="form.plannedAmount" clearable placeholder="请输入计划付款金额" /> </el-form-item>校验规则 plannedAmount: [ { required: true, trigger: 'blur', message:'金额不能为空'},
2020-09-09 17:32:54
3621
原创 vue 面试总结（一）
文章目录一、v-if和v-for 哪个优先级更高二、key的作用三、双向绑定及其原理四、你了解vue中的diff算法吗一、v-if和v-for 哪个优先级更高先给出结论为什么是这样的他们能放一起吗如果不能，应该怎么办总结回答范例：6. v-for 优先于v-if被解析7. 我曾经做过实验，把他们放在一起，输出的渲染函数中可以看出会执行循环再判断条件8. 实践中也不应该把它们放在一起，因为哪怕我们只渲染列表中的一小部分元素，也得在每次渲染的时候遍历整个列表9. 通常有两种情况导致我们
2020-09-04 16:59:07
692
原创 elementUI 去掉form 表单单个校验
去除form表单默认校验的这两个值 this.$nextTick( ()=> { this.$refs['form'].clearValidate(['firstParty']); this.$refs['form'].clearValidate(['secondParty']); })拓展：移除所有表单项的校验： this.$refs[‘form’].clearValidate();resetFields() 和 .clearValidate() 区别t
2020-08-28 17:23:06
11719
1
原创 Error in v-on handler: “TypeError: Cannot read property ‘clearValidate‘ of undefined“
因为Dom元素没有加载完毕，导致refs取不到值，使用 $nextTick() this.$nextTick( ()=> { this.$refs['form'].clearValidate(['firstParty']); })
2020-08-28 17:17:09
2589
原创 浏览器内核、网络安全、XSS、CSRF相关
1、浏览器内核1、IE浏览器内核：Trident内核，也是俗称的IE内核；2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；4、Safari浏览器内核：Webkit内核；5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；7、搜狗、遨游、QQ浏览器内
2020-08-17 17:52:26
395
原创 vue backtop全局回到顶部组件
文章目录1、实现 BackTop.vue 组件页2、注册组件3、使用4、效果背景：当页面内容很多时，为了方便用户快速回到顶部1、实现 BackTop.vue 组件页<template> <div class="pages-content-scroll"> <el-backtop target=".pages-content-scroll" :visibility-height="visibleHeight" :
2020-08-14 16:25:46
1007
原创 小型状态管理器Vue.observable
文章目录背景页面效果仅使用 state 方式自定义 mutation 复用更改状态的方式背景在一些小型项目或状态简单的项目中，为了管理几个状态而引入一个库，显得有些笨重，因而我们使用Vue.observable 可以帮助我们快捷的解决页面效果仅使用 state 方式store.js使用自定义 mutation 复用更改状态的方式store.js应用...
2020-08-04 11:18:30
292
原创 Vue定时器使用方法
1、基本用法<script> export default { mounted() { this.timer = setInterval(() => { ... }, 1000); }, beforeDestroy() { clearInterval(this.timer); } };</script>2、使用hook<script> export default { mount
2020-07-28 11:35:02
9694
1
原创 el-table 合并行
1、页面效果2、table3、 watch: { implementationList: { handler(n, o) { this.getSpanArr(this.implementationList) }, immediate: true } },methods: { //合并行 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
2020-07-22 10:08:59
11001
7
原创 vue路由传参的三种方式
文章目录1、方案一1.1定义路由1.2 页面传参1.3 页面获取1.4 页面效果方案二2.1 定义路由2.2 页面传参2.3 页面获取2.4 页面效果方案三3.1 定义路由3.2 页面传参3.3 页面获取3.4 页面效果总结1、方案一1.1定义路由 path: '/circulation', component: () => import('@/views/reSeManage/circulation/index'), name: 'Circulation', met
2020-07-20 11:05:30
1945
原创 Element-ui 移除表单校验 clearValidate和resetFields
一、clearValidate 移除表单校验 初始化 一般用于添加form 表单修改时，点击“确定”按钮，提示 “金额不能为空”rules: { oneUpAmount: [ { required: true, trigger: 'blur', message:'金额不能为空'}, { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保
2020-07-06 15:00:51
6677
4
原创 vue项目中mockjs+axios实现前后端分离
文章目录方式一1、开始&安装2、使用3、控制台打印方式二1、页面效果2、创建mock.js3、main.js中引入mock.js4、在需要渲染的页面使用mockjs 官方文档: 直达链接.mockjs GitHub地址: 直达链接.方式一1、开始&安装安装npm install mockjs --save2、使用3、控制台打印方式二1、页面效果2、创建mock.js3、main.js中引入mock.js4、在需要渲染的页面使用...
2020-07-01 17:09:45
471
原创 vue eslint 报错 Identifier XXX is not in camel case
解决：“camelcase”: [1, {“properties”: “never”}],
2020-06-30 17:37:56
9434
1
原创 vue3.0脚手架搭建
1、安装vue-cli 3.0先卸载旧版本npm uninstall vue-cli -g再安装Vue CLI 3npm install -g @vue/cli安装成功查看版本 vue-V2、创建项目去指定目录下创建项目vue create project-name（自己定义项目名，不可使用驼峰式命名）3、选择配置（自定义配置）4、在css预编译我选择了less5、在语法检测工具选择了 ESLint + Standard config6、在选择语法检测方式中，这
2020-06-30 10:43:54
6086
百度路书添加回调方法后js
2019-11-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人