Vue
文章平均质量分 54
眼小博
这个作者很懒,什么都没留下…
展开
-
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 · 5634 阅读 · 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 · 3111 阅读 · 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 · 777 阅读 · 0 评论 -
vue制作飘窗
前言春节即将到临,网站要加些新年贺词,要做成飘窗在网页上飘着,设置一个期限,到了规定的期限自动消失;关键(定位、获取浏览器窗口大小、定时器、清除定时器、判断时间是否过期);我是写在了单独的js文件里,通过mixins混入,你也可以直接写在页面里,内容如下:export default { data () { return { isShowBay: false, x: 50, y: 50, xin: true, yin: t原创 2021-02-04 16:16:33 · 1551 阅读 · 0 评论 -
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 · 222 阅读 · 0 评论 -
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 · 4517 阅读 · 0 评论 -
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 · 818 阅读 · 0 评论 -
点击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 · 800 阅读 · 0 评论 -
使用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 · 4459 阅读 · 21 评论 -
vue中组件间通信的几种方法(总结)
好记性不如烂指头,看了很多资料后,想把他们整合整合,方便如果忘了得话可以看一下。父传子(使用props)父组件<template> <div class="parent"> 父组件: <!-- 引入子组件 --> <chlidren :inputName="name"></chlidren> //...原创 2020-01-29 16:53:05 · 683 阅读 · 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 · 816 阅读 · 0 评论 -
vue键盘回车事件的使用
vue中键盘回车事件的不同使用方法让我们一起来绕坑,有时候我们会遇到当我们为input加些键盘事件的时候并不起效,下面让我们来看看原因吧!首先了解一下vue中常用的键盘事件@keydown 键盘按下时触发@kekup 键盘抬起时触发@keypress 键盘按住时触发@kekup.enter 回车@kekup.up 上键@kekup .down...原创 2019-12-19 12:53:04 · 2121 阅读 · 0 评论 -
vue-cli 解决跨域 proxyTable设置无效 报错504--- 解决方法
vue-cli 解决跨域 proxyTable设置无效 报错504— 解决方法这个问题搞得我快崩溃了,发现错误之后让我想起了一句话:“细节决定成败,态度决定一切”。下面说一下这点小细节,希望对同样错误的人有所帮助。下面是proxyTable的设置 (这里你能看出来有什么问题吗?)当我开始请求的时候浏览器报错504:这问题让我很懵逼,想是不是哪里少写了,然后百度proxyTable的...原创 2019-12-17 17:13:26 · 3501 阅读 · 0 评论