- 博客(29)
- 收藏
- 关注
RSS订阅原创 vue启用打印机打印-二维码条形码打印
使用px来设置距离需谨慎，相同px在不同纸张呈现大小可能是不相同的。小距离的变动px是无法呈现的。（举个栗子：在某一纸张上1px=0.3mm，此时我只想上移0.2mm）构建所需要打印的内容，利用vue-print-nb进行打印。二维码条形码打印的本质就是图片打印。注意：在页面上设置的样式打印时是没效果的，这里需要用过媒体查询来设置样式。所需插件 vue-print-nb 本文版本1.7.5。资产、设备管理必备的二维码条形码打印。
2023-10-11 16:53:02
806
2
原创 vue扫码枪应用
扫码枪本质是键盘按键输入，扫码枪在扫码完成会有一个回车输入，我们可以将回车键视为扫码完成。所以监听扫码枪输入实际就是监听按键输入。barCode ：储存扫码数据。
2023-08-02 17:59:20
356
原创 vue关于json数据格式的展示＜pre＞标签的使用
直接展示或者利用JSON.parse()展示页面上数据都会挤成一坨。需要把字符串按json格式展示到页面上。
2023-08-02 17:30:44
649
原创 vue使用jquery.wordexport导出word文档（批量导出为zip）
网上查了很多jquery.wordexport的文章都是只支持单独导出word，不符合业务需求。因此修改了jquery.wordexport、利用jszip、file-saver批量导出word。
2023-02-07 14:53:27
835
原创 vue 利用v-model语法糖封装组件并实现＜component＞动态组件
利用v-model语法糖封装组件并实现动态组件主要是为了统一渲染element组件和自定义组件。v-model双向绑定实际就是数据绑定+事件绑定的一个语法糖。我们可以利用v-model的实现原理对组件进行封装。...
2022-08-01 15:21:59
1374
原创 列表自动滚动的实现及＜Element＞ which has only a getter错误的解决
问题最近在做列表自动滚动时遇到了Cannot set property scrollTop of # which has only a getter"错误原因在style中，未添加overflow属性解决.box { overflow: hidden;// 重点 width: 800px; height: 600px;}附上列表自动滚动代码handleScroll(num) { // 初始化定时器 if (this.timer
2022-01-11 16:49:22
5440
原创 vue模拟a标签设置请求头headers接受文件流，导出xlsx文件
今天后端提供了一个导出xlsx文件的接口，这里做一篇实现xlsx文件导出的技术总结。分别关于后端是否提供xlsx文件流，还是json格式数据a标签导出xlsx文件我们可以直接通过，a标签href，浏览器直接调接口导出xlsx文件。但是当接口有权限认证时，a标签不能添加请求头，权限认证通过不了。<a href="url接口地址">导出文档</a> axios模拟a标签注意这里响应类型要设置为blob this.axios .get(
2021-11-24 15:42:02
4088
1
原创 vue路由$router.push()的三种传参方式
$ router.push() 的三种传参方式最近在工作中遇到需要使用$router.push传递一个对象，在这里做一下技术总结通过path传参很常用的一种，传递的参数会显示到path中，在刷新页面时数据不会丢失，常用于数据的新增、编辑、查看详情。this.$router.push(`pushAdd/${id}`)路由配置{ path: '/pushAdd/:id', component: () => import('@/v
2021-11-23 15:44:48
49590
5
原创 js数字转为中文数字
最近业务需要数字转为中文的数字，本来想直接插件解决的，看了下又没有啥好用的插件。就只有自己写了。这里做一篇技术笔记由于业务是ejs+jQuery，为了满足业务需求，有些地方写的复杂了，下次使用再优化。var $=require('jquery')$(function(){ let value= numToCN(parseInt($('#countCN').text())+1) $('#countCN').text('第'+ value+'集')})//数字转换为中文数字function
2021-10-27 16:08:15
473
原创 构造函数、实例、原型、原型链、类class的关系
知道了构造函数、实例，学习了原型、原型链，了解了es6的类。是不是还是觉得总是有一点理不清。是的，之前一直没时间理清楚，这里做一篇学习笔记。（学了就忘）推荐：想必会有人和我一样，问为什么要够着函数和原型，请看这篇。别人写的很清楚了，我就不做搬运工了看完这篇，真正理解JS面向对象编程思想类请看这个一万字ES6的class类，再学不懂，请把我锤死（语法篇） 构造函数和实例function Person(name,age){ this.name=name,
2021-10-15 15:26:44
153
原创 vue elment-ui选择框select动态加载
遇到业务需要下拉选择框动态请求接口数据，element又没有提供动态加载api，就只能自己写了代码<template> <div> <el-select v-model="organization_id" placeholder="请选择"> <el-option v-for="(item) in oranizeList" :key
2021-09-18 17:22:47
2227
原创 十分钟，学会使用js三种方法创建本地json数据文件
前言在干业务时，需要得到一份全国省市到街道的区划数据，刚好业务中连接了高德地图，高德地图又提供了区划的api，这下只需要把数据写到json里了。什么！你说你还不会用js创建json文件？没关系，只需十分钟阅读文章，学会使用js三种方法创建本地json文件！一、使用html5创建json文件通过a标签来下载获取到我们创建的json文件。缺点：必须要下载一次，下载目录不可控，当大量json文件下载时，会储存到同一个文件夹，显的很杂乱。<script>//我们写入json文件的内容let
2021-09-01 17:07:28
12967
原创 element-ui利用.sync和$attrs,$listener简化封装对话框组件dialog(一次、二次封装）
在干业务时，总会遇到需要封装对话框组件。这里总结一下对话框的一次、二次（优雅永不过时！）封装一次封装普通封装对话框：这里注意不能直接更改props里的值，否则会报错<template> <div> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>内层dialog消息</span> <span slot="
2021-08-27 15:50:26
1106
2
原创 vue+element实现鼠标滚轮控制轮播图
实现鼠标滚轮控制轮播图：使用element走马灯:<template> <div class="box"> //添加@mousewheel鼠标滚轮事件 <div style="height: 100%" @mousewheel="rollScroll($event)"> <el-carousel direction="vertical" :autoplay="false" trigger
2021-08-19 11:22:55
1883
4
原创 听说她还不会组件传值，我连夜为她写了组件传值的七种方式
前言在抽离公共组件时，会遇到很多需要组件传值的地方，特别是封装对话框组件。回想最初只会props、$emit的我在遭遇组件二次封装时越写越复杂，内心万分悲痛。痛心疾首的我熬夜写了这篇文章，帮助你们掌握组件传值的各种花式，玩弄各种业务需求，高强度对线面试官。是的，我心里装的是谁你们都清楚了吧？。props、$emit最基础的传值方式，主要用于父子之间，也可以用于爷孙之间（需要父组件做中转）父子之间父传子：子组件通过props接收父组件：<template> <div>
2021-08-18 16:35:11
97
原创 （canvas入门案例）vue利用canvas实现在线签名
导读最近看了三心大佬的canvas教程（发现新玩具），canvas真**好玩（优美中国话），附上三心大佬教程https://juejin.cn/post/6986785259966857247。废话不多说，上正餐创建canvas标签<canvas ref="saveCanvas" width="600" height="400" @mousedown="ctxDown" @mousemove="ctxMove($e
2021-08-09 14:18:40
584
1
原创 vue watch侦听器有无immediate的运行顺序
刚写项目的一个需求中遇到了watch运行顺序的坑，本打算把项目弄完再来看看，结果leader说产品还在改需求（高强度学习开始！！>_>）watch普通监听属性（无immediate）在初始化时不会执行watch created() { this.id = 1; console.log(this.id); console.log(this.name); }, watch: { id: function (val) { if (val
2021-07-22 16:48:58
1026
1
原创 浅谈vue中watch监听器的触发时机（watch的坑）
起因我需要在页面created时获得商家的类型id值，然后监听id值，动态的改变请求接口的地址。请求接口的函数在mounted中执行。业务逻辑写完后发现，页面在第一次加载时，接口没有数据，原因接口地址为空，即接口地址没有改变。代码 created() { this.typeId = this.$route.params.id; console.log("this.typeId的值发生改变，触发watch"); }, mounted() { console.log(
2021-07-22 14:09:55
5642
2
原创 vue项目vue.config.js devServer.proxy配置
devServer.proxy配置在vue.config.js文件中devServer: { before: require('./mock/index'), host: 'localhost',//target host port: 8080, //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target proxy: { '/api': {
2021-07-08 16:22:36
1648
原创 vue 基于elementUi根据路由表动态加载侧边栏导航
vue 基于elementUi根据路由表动态加载侧边栏导航在学习element-admin后，发现动态路由很有意思，打算自己重现一下动态路由功能路由router.js:在路由中可以添加hidden字段判断该路由是否显示const routes = [ { path: '/', redirect: '/container', hidden: true//控制该路由是否显示 }, { path: '/container', name: 'Contain
2021-07-08 14:20:35
2147
3
原创 vue组件如何自己调用自己（组件递归）
vue组件如何自己调用自己（组件递归）在做侧边栏导航动态加载时，需要用到vue的组件递归，最开始打算直接写函数递归来解决问题，结果没什么卵用，越写越复杂。直接上代码给组件name值<script>export default { name: "SideItem", } <script>直接在组件中调用即可<template> <div> <SideItem :tree="item"></SideItem&g
2021-07-08 14:06:48
2996
原创 element checkBox复选框隐藏文字label
element checkBox复选框隐藏文字label要做个只有框复选框，又不想用原生html，element又没有提供api上代码！<el-checkbox :label="item.id"></el-checkbox>这里label显示的是id值我们在el-checkbox标签间加东西发现<el-checkbox :label="item.id">1111111</el-checkbox>动态加载的id值被替代了最后插入br标签
2021-07-06 13:58:30
2285
5
原创 vue使用ecahrts实现省市县地图上下钻到县一级（甘肃省为例）
实现echarts地图上下钻直接食用代码中的散点图是根据json文件中’cp’字段对应的坐标来定位的，有些地图json文件是’centroid’字段，建议配合https://blog.csdn.net/qq_41206305/article/details/116404455?spm=1001.2014.3001.5501食用最佳<template> <div> <!-- <button @click="a1">1111</button&g
2021-05-04 21:21:34
590
1
原创 爬取全国各省市县geo地图json文档的脚本（甘肃省各县为例）
python爬取全国各省市县geo地图json文档的脚本（甘肃省各县为例）大哥要我做一个地图上下钻的功能，要求要下钻到县一级。然后我发现了一个可以得到省市json的网站（强推： http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5）里面有在线的api（这下做起来容易了），大哥又告诉我最好把json放到本地文件。。。作为一个程序员手写是不可能手写的上代
2021-05-04 20:28:22
554
原创 如何封装一个vue组件
最近在学习vue的工程化，记录下如何封装vue组件废话不多直接上代码子组件<template> <div> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-bu
2021-04-01 10:25:47
587
原创 在vue中echarts自定义label 标签样式formatter（饼状图把label标签颜色设置为饼图内容相应颜色）
在用echarts做图时，label样式默认。在这里记录怎么修改label样式echart1() { let Mychart1 = echarts.init(document.getElementById("chart1")); let option = { tooltip: { trigger: "item", }, legend: { orient: "vertical",
2021-03-31 17:52:18
5401
2
原创 实习笔记1-vue登陆实现验证码js
实习笔记1-vue登陆实现验证码js在实习的时候遇到的一些坑和经历，想在这里记录一下问题和解决方式问题解决方法：废话不多说上代码在script中引入组件data数据初始化结点初始化方法验证输入login完整代码verifyCode.js在实习的时候遇到的一些坑和经历，想在这里记录一下公司让我们实习生做个公司内部使用的一个系统，我恰好负责登陆注册模块（内心狂喜，这不是分分钟的事？），结果同组的后端孩子没时间给我做验证码（当场懵逼？？？），就只有自己js撸了。经过楼楼各种调试发现是js里储存验证码验证的数
2021-03-30 21:27:48
253
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人