- 博客(27)
- 收藏
- 关注
RSS订阅原创 vue打印问题（分页打印、批量打印条形码）
前言项目需求打印功能所遇到的问题。在此记录，望能帮到你一下问题：当内容超过一页时不会自动分页？当使用vue3-barcode 打印条形码时，不能批量打印？基础打印安装官网地址：https://github.com/Power-kxLee/vue3-print-nbnpm install vue3-print-nb --save引用// Global instruction import { createApp } from 'vue'import App from
2022-03-30 17:05:48
5710
2
原创 vue3、element plus多语言切换
前言最近接手一个项目，该项目多国家使用，需要支持多语言的切换，在此记录。解决一下问题：如何实现多语言切换 ？如何动态切换语言并更改elementUI语言 ？更改完elementUI组件视图不更新？如何全局使用 $t 函数 ？如何在js文件里使用vue-i18n ？如何实现多语言切换 ？1、安装包vue-i18nnpm i vue-i18n --save2、在src目录下新建如图：en.jsconst EN = { login: { title: 'Use
2021-12-08 21:24:11
3292
1
原创 Vue3.0中ref和reactive的底层实现
// ref和reactive底层实现function reactive (obj) { // 首先判断obj的类型 if (typeof obj === 'object') { if (obj instanceof Array) { // 如果是数组那么取出数组中的每一个元素，判断每一个元素是否又是对象，如果是对象也需要包装成Proxy obj.forEach(item => { if (typeof (item, index) === '
2021-03-13 21:35:49
793
原创 使用crypto-js加密
前言由于涉及到一些安全问题，项目里出现的手机号在传输的过程中都需要加密传输，于是使用crypto-js进行了一些加密，操作如下：一、安装依赖cnpm install crypto-js --save二、新建一个js文件（encryption.js）----CBC模式// CBC模式import CryptoJS from 'crypto-js'// DES加密export const encryptDes = (message) => { let key = 'xxxxx
2021-02-25 11:08:17
597
原创 vue制作飘窗
前言春节即将到临，网站要加些新年贺词，要做成飘窗在网页上飘着，设置一个期限，到了规定的期限自动消失；关键（定位、获取浏览器窗口大小、定时器、清除定时器、判断时间是否过期）；我是写在了单独的js文件里，通过mixins混入，你也可以直接写在页面里，内容如下：export default { data () { return { isShowBay: false, x: 50, y: 50, xin: true, yin: t
2021-02-04 16:16:33
1570
原创 小程序为页面滚动事件添加节流
前言实现目的就是解决页面滚动事件不断触发问题；方法一、节流封装节流函数，放在项目utils目录下utils.js文件里// 函数节流function throttle(fn, interval) { var startTime = null； var gapTime = interval || 300; // 如果不传间隔时间，默认300ms触发一次 return function() { var that = this; var endTime = new D
2021-02-02 18:49:02
704
原创 微信小程序中如何修改自定义组件中的默认样式
前言组件对应 wxss 文件的样式，只对组件wxml内的节点生效；但是如果修改组件中如：checkbox、radio等它们的默认样式，在组件wxss中修改也是无效的；并且怎么在组件引用的页面去控制组件中的样式呢？方法一、暴露class在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时对暴露出来的class进行class覆盖；在组件wxml中找到要修改的标签// 组件中需要修改的标签 如： <view class="myclass">我是.
2021-01-27 15:58:16
3790
原创 vscode settings设置
{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #去掉代码结尾的分号 "prettier.semi": false, // #使用带引号替代双引号 "prettier.singleQuote":
2021-01-18 11:42:32
692
原创 vue中自定义插件的使用
在vue中使用插件在src下新建libs文件夹，在其中新建Myplugin文件夹并新建index.js, 内容如下：myplugin.install = function (Vue, options) { // 可以在插件中定义全局方法/属性 Vue.myglobalMethod = function () { console.log('我是全局方法') } // 定义全局指令 Vue.directive('my-directive', { bind ()
2020-12-09 22:30:46
235
原创 echarts中设置饼状图默认高亮和设置柱状图颜色
设置饼状图默认高亮 // 默认高亮 let myChartReflect = echarts.init(this.$refs.echatsReflectPerson) myChartReflect.setOption(optionReflect) let index = 0; // 高亮索引 myChartReflect.dispatchAction({ type: "highlight", seriesIndex: in.
2020-10-28 14:31:04
1833
原创 less学习笔记
Less变量混合引入（import）可带参数条件表达式变量less 变量延时加载变量定义： @+变量名// 作为选择器和属性名的变量@kuandu: width;.@{kuandu} { @{kuandu}: 150px;}-定义多个相同的名称的变量时 变量存在作用域 —— 块级作用域@var: 0px;.class { @var: 1px; .brass { @var: 2px; height: @var; // 这里的值是3 @va
2020-09-24 14:12:20
156
原创 vue图片超出屏幕尺寸自动适应图片比例缩放
vue图片超出屏幕尺寸自动适应图片比例缩放 <div> <el-button class="blue-btn" @click="open">弹出dialog</el-button> <el-dialog :show-close="false" :before-close="close" :visible.sync="dialogVisible"
2020-09-02 20:04:34
4563
原创 vue动态绑定class、style的几种方法
vue动态绑定class、style的几种方法动态绑定style方法一// template 中<div :style="divStyle"></div>// data 中 data () { return { divStyle: { width: '100px', height: '100px', backgroundColor: 'red' } } }方法二//
2020-09-02 12:18:20
846
原创 !和!!的区别和用法
JavaScript中!和!!的区别和用法！可将变量转换为Boolean类型，能够把null、undefined和空字符串强制转换为ture,也可以用作Boolean的取反!null ---> true!undefined --- > true!'' ---> true!true ---> false!false ---> true！！常常用来做类型判断,在！强制转换后进行取反例如：当你不确定一个变量的类型时，并且该变量不希望为null、undef
2020-08-29 14:55:34
6044
原创 点击button实现复制文本
vue点击button实现复制文本今天遇到了一个需求:点击button按钮实现复制身份证号实现如下：使用 vue-clipboard2首先安装npm install --save vue-clipboard2全局引用（main.js）import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)页面中使用<button class="btn fs-12" v-clipb
2020-08-12 13:17:27
823
原创 前端WebSocket的使用
WebSocket 的使用websocket是HTML5开始提供的一种网络通信协议，它的目的是在浏览器之间建立一个不受限的双方通信的通道，比如说，服务器可以在任意时刻发送信息给浏览器。在websocket的API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。基本使用// 连接服务器var ws = new WebSocket("")// 连接成功触发ws.onopen = function() { alert("连接成功")}/
2020-07-29 09:20:23
1106
原创 input框和滚动条默认样式的修改
input框和滚动条默认样式的修改一、修改input默认样式鼠标悬浮：input:hover{样式}点击属性：input:focus{样式}去掉未选中状态边框： border: 0 ;去掉选中状态的边框： outline: none ;透明背景： background-color：rgba（0，0，0，0）；修改input的选中时的光标颜色： caret-color: red ;...
2020-04-14 21:21:05
1420
原创 前端面试题大综合（未完待续）
1、BFC是什么？BFC即 Block Formatting Contexts(块级格式化上下文)，它属于普通流，即：元素按照其在 HTML 中的先后位置至上而下，在这个过程中， 行内元素水平排列，直到当行被沾满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。可以把 BFC 理解为一...
2020-03-18 22:46:56
1510
原创 使用vue实现四级联动
一、使用vue+elementUI实现四级联动1、json数据： 借用大神的2、简单粗暴：代码如下<template> <div> <p>当前您选择了: {{form.province}}-{{form.city}}-{{form.region}}-{{form.street}}</p> <el-form > <...
2020-03-01 19:07:59
4502
23
原创 vue中组件间通信的几种方法（总结）
好记性不如烂指头，看了很多资料后，想把他们整合整合，方便如果忘了得话可以看一下。父传子（使用props）父组件<template> <div class="parent"> 父组件: <!-- 引入子组件 --> <chlidren :inputName="name"></chlidren> //...
2020-01-29 16:53:05
701
2
原创 vue中Mock及Axios-Mock-Adapter模拟调试器的使用
首先在vue项目中安装axios&mockjs&Axios-Mock-Adapteraxios官网mock官网axios-mock-adapter使用npm安装npm i axios // 安装axiosnpm i mockjs // 安装mockjs（通过mock模拟假数据)npm i axios-mock-adapter --save-dev //安装.....
2020-01-17 00:22:44
847
原创 nprogress 进度条插件的使用
一、基本本本的使用方法通过官网下载 官网 ，传统方法使用标签进入<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>通过nodejs安装npm install --save nprogress引入import NProgre...
2020-01-15 16:21:03
429
原创 怎么在已有的iconfont图标中添加新的字体图标
简单粗暴直接上菜：在iconfont官网找到你需要的图标并且加入购物车解压下载好的文件并修改其文件名修改好之后把文件放到原来旧字体图标存放的位置将新下载好的iconfont.css中的内容复制到旧字体图标iconfont.css的文件中，并修改其url中的路径地址然后。。。 然后。。。，然后保存啊，然后就可以用了...
2020-01-14 15:20:28
4220
原创 Ajax的基本用法及注意事项
Ajax的基本用法及注意事项一、了解AjaxAjax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax 是一种用于创建快速动态网页的技术。Ajax = 异步 JavaScript 和 XML。二、Aiax 的工作原理创建 XMLHttpRequest 对象。因为IE7+、Firefox、Chrome、Safari 以及 Opera使用 XMLHttpRe...
2020-01-11 18:33:39
313
原创 vue键盘回车事件的使用
vue中键盘回车事件的不同使用方法让我们一起来绕坑，有时候我们会遇到当我们为input加些键盘事件的时候并不起效，下面让我们来看看原因吧!首先了解一下vue中常用的键盘事件@keydown 键盘按下时触发@kekup 键盘抬起时触发@keypress 键盘按住时触发@kekup.enter 回车@kekup.up 上键@kekup .down...
2019-12-19 12:53:04
2160
原创 vue-cli 解决跨域 proxyTable设置无效 报错504--- 解决方法
vue-cli 解决跨域 proxyTable设置无效 报错504— 解决方法这个问题搞得我快崩溃了，发现错误之后让我想起了一句话:“细节决定成败，态度决定一切”。下面说一下这点小细节，希望对同样错误的人有所帮助。下面是proxyTable的设置 （这里你能看出来有什么问题吗？）当我开始请求的时候浏览器报错504：这问题让我很懵逼，想是不是哪里少写了，然后百度proxyTable的...
2019-12-17 17:13:26
3525
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人