Vue
文章平均质量分 57
Faith_ZL
这个作者很懒,什么都没留下…
展开
-
Vue自定义指令
Vue自定义指令参考文章:https://blog.csdn.net/weixin_58032613/article/details/122759818什么是指令我们看到的使用的v-model,v-bind都是内置指令,除此之外我们可以设置自己的指令v-xxx。怎么使用自定义指令//会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中,如`v-html="'<p>内容</p原创 2022-04-11 15:07:45 · 945 阅读 · 0 评论 -
vue 2.0 使用Swiper
如何在Vue 2.0里使用SwiperSwiper 官方文档 https://www.swiper.com.cn/在低版本中使用swipernpm install swiper vue-awesome-swiper --savehtml<template> <div class="hello"> <div class="swiper-container"> <div class="swiper-wrapper">原创 2021-07-28 15:44:06 · 1013 阅读 · 0 评论 -
lodop将判断是否安装lodop与打印分开执行
Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下:● PRINT_INIT(strPrintTaskName)打印初始化● SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小● ADD_PRINT_HTM(intTop,intLeft,intWidth,i原创 2021-05-26 09:35:10 · 1029 阅读 · 1 评论 -
vue如何使用lodop
如何在Vue中使用lodop最近在项目中需要打印,lodop是web端常用的打印工具,安装打印机驱动之后,连接打印机,看是否能实现正常打印。打开lodop官网,http://www.lodop.net/index.html 下载lodop客户端。把lodopFuncs拷贝到utils文件夹下,import { getLodop } from '@t/lodop' //这块就是引用的上面一大坨暴露出来的方法喽const PrintAccount = (qrTitle, codetype, url原创 2021-04-21 15:42:59 · 6222 阅读 · 5 评论 -
前端实现无痛刷新
refresh_token实现无痛刷新import axios from 'axios'import qs from "qs";import Vue from 'vue'import router from './router'import store from '@/store'import { config } from 'shelljs';const baseURL = process.env.BASE_APIconst http = axios.create({ baseURL,原创 2020-12-22 16:39:46 · 654 阅读 · 1 评论 -
element UI table合计后的值的修改
element UI 合计后的样式或者值的修改最近做的项目有关人民币的数值计算,但是发现element UI的合计有问题,不能显示标准的人民币显示模式,所以找到了这个方法可以修改合计的值//htmtl<el-table :data="tableData" style="width: 100%" show-summary :summary-method="getTotal" > <el-tabl原创 2020-12-03 10:55:21 · 1130 阅读 · 0 评论 -
项目随笔小记
VuePDF插件https://blog.csdn.net/weixin_42398301/article/details/107672466样式初始化npm install --save normalize.cssimport 'normalize.css/normalize.css'//table对齐.el-table { th.gutter { display: table-cell !important; } }//vuexthis原创 2020-11-25 10:38:05 · 238 阅读 · 1 评论 -
Vue登录过后无法在Main页面取到SessionStorage值的问题
Vue登录过后无法在Main页面取到SessionStorage值的问题最近在做权限管理的项目,项目需要判断是否是管理员来加载显示的页面。登陆的时候管理员不返回companyCode,返回roleId,其他人登陆的时候返回companyCode。管理员登录时返回所有的单位,默认展示第一个单位的信息,单位登录时显示单位信息。我现在需要做的事情如下图每一个不通的颜色代表不同的组件,我在asideMenu里面取到CompanyCode,需要在Echarts组件里面使用,但是我可以在asideMenu里面从原创 2020-11-20 16:30:53 · 1666 阅读 · 0 评论 -
Vue封装axios请求
前端封装axiosimport axios from 'axios'//参数序列化//qs.parse()是将URL解析成对象的形式//qs.stringify()是将对象 序列化成URL的形式,以&进行拼接import qs from "qs";import Vue from 'vue'import router from './router'//判断是生产环境还是开发环境const baseURL = process.env.NODE_ENV === 'production'原创 2020-11-12 15:43:35 · 194 阅读 · 0 评论 -
Vue + element UI实现搜索功能
如何用Vue+element实现搜索功能呢?接下来的代码可能会对你有帮助呦。//html <div class="search"> <div class="demo-input-suffix"> <el-autocomplete v-model="state" :fetch-sugg...原创 2020-07-15 07:44:48 · 4243 阅读 · 0 评论 -
如何在vue里面实现评论功能
前几天做了文章的评论功能,现在用文字记录下来,希望帮助更多的人//html<div class="bottom"> <div class="coomment" @click="show"> <i class="el-icon-chat-line-round"></i>评论 <...原创 2020-04-30 18:39:34 · 5305 阅读 · 1 评论 -
如何在vue项目中判断是移动端还是PC端
如何判断用户当前是使用移动端还是PC端在Vue项目中我们会遇到移动端和PC端展现不同界面的情况,那么我们怎么判断用户此时是使用什么设备来浏览我们的页面呢?mounted(){ if(this._isMobile()){ alert(" 手机端") //在此处嵌入手机端页面 }else{ alert(" PC端") //在此处嵌入PC端页面 }},mothods:{...原创 2020-04-10 14:08:47 · 1680 阅读 · 0 评论 -
Vue 实现分页功能
VUE 前端实现分页<template> <div class="waitcheck"> <div class="page-bar"> <ul> <li v-if="cur>1"> <a v-on:click="cur--,pageClick()">上一页&...原创 2020-01-01 19:39:23 · 1035 阅读 · 0 评论 -
VUE 好用的图片放大功能
最近做项目,项目中需要图片放大功能,发现了一个很好用的插件。vue-directive-image-previewer首先下载npm i vue-directive-image-previewer然后再mian.js 组件中引用import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue...原创 2019-12-28 19:38:01 · 664 阅读 · 0 评论 -
利用JSON_handel解析客户端的数据
开发中我们经常会用到JSON格式的数据,但是我们拿到的数据通常是这个样子的我们很难清晰地看见数据是什么样子的,这里我们可以下载JSON_handle 点击下载 来帮助我们查看我们的数据。之后我们打开chrome://extensions/将文件拖到这里面,当你看见右上角是这个样子的时候就已经安装好了。...原创 2019-12-14 16:57:30 · 129 阅读 · 0 评论 -
将项目打包成基于electron打包的桌面程序
将现有的项目打包成electron打包成桌面应用程序1.克隆官方项目https://electronjs.org将项目clone到本地:git clone https://github.com/electron/electron-quick-start2.cd electron-quick-start->npm install->npm start这样就可以运行项目了,讲项目...原创 2019-12-10 19:08:07 · 292 阅读 · 0 评论 -
好用的时间戳转化插件
项目中我们经常会遇见要把时间戳转换成时间的情况,或者是把当前的时间转换成时间戳传给后台。给大家介绍一个好用的插件 dayjs可以方便的把时间戳转换成想要格式的日期。附上官网地址 https://www.npmjs.com/package/dayjsnpm i安装dayjs,在文件中引入dayjs import dayjs from ‘dayjs’...原创 2019-11-03 19:38:59 · 1549 阅读 · 0 评论 -
如何简单处理精灵图
OMG 看它 这篇文章绝对是干货,妥妥的干货最近在学习的时候发现一个神奇的网站,我们在处理大型网站的各种图标的时候会遇到需要用精灵图减少请求优化网页的情况,可是往往图标定位这种东西很难测量,今天给大家介绍一个网站,可以自动定位精灵图坐标的网站。http://www.spritecow.com/网站就是这个样子的,上传图片后上传图片后显示这个样子,可以在下图地方调整图片的尺寸,根据UI给...原创 2019-11-01 19:52:38 · 406 阅读 · 0 评论 -
Vue 2.0使用sass
如何在Vue 2.0中使用sass在项目中使用sass,less等css预处理器语言方便我们更快捷高效的开发。但是在Vue 2.0cli安装sass的时候会报错。最终已经解决,现在贴出我的解决方法。首先安装所需的模块。npm i node-sass style-loader sass-loader@7.3.1安装sass-loader的时候一定要指定版本,如果sass的版本太高,webp...原创 2019-10-31 18:57:00 · 283 阅读 · 0 评论 -
如何安装Vue.js devtools
Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools选择一个空的文件夹下载文件,然后执行cd vue-devtoolsnpm install找到shells文件夹,进去找...原创 2019-10-22 19:50:30 · 304 阅读 · 0 评论 -
Vue如何遍历包含数组的对象
最近写项目遍历数组内对象的时候含有数组,那么如何拿到数组中对象的值呢?我们来看一下:items: [ { id: 1, name: "实力档口", shop: [ { name: "小丫头服饰" }, { name: "jds" }, { name...原创 2019-10-22 15:59:59 · 4287 阅读 · 0 评论 -
VUE cli 电脑端配置屏幕自适应
如何在用VUE cli 处理PC端rem自适应1. 安装npm i lib-flexible --save-dev2. 安装npm i px2rem-loader --save-dev3.在main.js 中引入 lib-flexibleimport "lib-flexible"4.build/until.js 文件里找到 exports.cssLoaders ,插入以下代码cons...原创 2019-10-18 18:49:52 · 1619 阅读 · 4 评论 -
Vue PC端 滑块的实现
VUE PC端实现滑块效果在项目中我们做登录验证的时候经常会遇到滑块验证,但是 Element UI 中没有滑块的组件的,所以我们可以用以下方法来解决这个问题。效果如图Vue组件化开发用法也比较容易,所以我写了一个Slider 组件,代码如下<template> <div class="jc-component__range"> <div cla...转载 2019-10-11 15:52:28 · 4112 阅读 · 0 评论 -
Vue配置路有报错
为什么在配置Vue路由的时候会出现Cannot read property ‘$createElement’ of undefined的错误。刚学习Vue的时候没有犯过那么低级的错误,因为好久没有独立开发,自己配置Vue cli 所以在遇到这种问题的时候一瞬间有一点懵逼。后来检查后发现是component 写成了components 导致的问题。希望以后大家不会范那么低级的错误。改正后...原创 2019-10-11 13:53:47 · 147 阅读 · 0 评论