- 博客(60)
- 收藏
- 关注
RSS订阅
原创 前端实现无痛刷新
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
690
1
原创 项目随笔小记
VuePDF插件https://blog.youkuaiyun.com/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
276
1
原创 vue+sherio封装一个自定义指令，判断权限
权限验证封装一个自定义指令，判断是否有该权限，显示页面的按钮将一下代码引用到main.js里面，在页面直接使用就可以了。import Vue from "vue";Vue.directive("has", { bind: function (el, binding) { //需要在DOM更新完成以后再执行以下代码，不然通过 el.parentNode 获取不到父节点，因为此时还没有绑定到 Vue.nextTick(function () { var role = b
2020-11-12 15:23:05
264
原创 vue2中使用事件总线（EventBus）传值
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
2023-07-20 11:13:27
779
原创 vue3 中使用pinia，实现持久化存储
pinia可以根据名称直接划分模块，不需要借助modules。新建store文件夹，新建index.ts。新建user.ts，shop.ts。在main.ts中引入。在main.ts中引用。
2023-07-05 16:06:02
1879
原创 vue3 依赖注入 Provide/Inject
在项目中如果需要将父组件的值传入孙子组件vue提供了一个简便的方法，依赖注入，可以直接将父组件的值传入孙子组件，且数据是响应的，可以修改。在孙子组件中修改值，父组件和子组件里的值全部更新。
2023-07-05 10:13:28
304
原创 vue3混入mixins
新建mixins文件夹，新建mixins.ts文件。Vue中混入的作用是分发组建中可复用的功能。注意：二者的函数复用，但是数据不共享。
2023-07-05 09:21:03
1017
原创 vue3 父子组件双向数据
众所周知，在vue中父组件传来的值是只读不可修改的，但是在vue3中父子组件使用v-model可以修改父组件传来的值。
2023-07-03 17:26:02
151
原创 vue2 的 Object.defineProperty和vue3 的proxy
在vue2中实现数据双向绑定用的是Object.defineProperty。vue3中使用Proxy实现数据双向绑定。
2023-06-30 17:23:00
149
原创 Vue自定义指令
Vue自定义指令参考文章：https://blog.youkuaiyun.com/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
967
原创 【无标题】小程序封装http请求
uniapp 和小程序封装HTTP请求uniapp 参考 https://www.cnblogs.com/yeziyou/p/13463531.html小程序封装http请求uniapp 参考 https://www.cnblogs.com/yeziyou/p/13463531.html小程序封装http请求新建 config文件夹，新建untils文件夹api.js//测试地址const ApiRootUrl = 'https://192.168.28.185:8192/jhSeal/';m
2022-02-17 18:34:12
525
原创 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
1056
原创 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
1099
1
原创 vue 下载lodop时页面数据丢失问题
在Vue 中使用lodop时，如果未下载lodop会出现页面数据丢失的情况其问题在于Lodop的JS是将下载的数据直接插入到body下，此时app里面的内容就会被阻塞，如果不行出现数据丢失问题，则需要将数据插在APP下，下面代码仅供参考，有需要的可以自己改。//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;//==判断是否需要CLod
2021-05-26 09:23:33
611
原创 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
6593
5
原创 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
1155
原创 element UI表格双击变成输入框输入数据
<template> <div class="Table"> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" show-summary border style="width: 100%" @selection-change="handleSelectionChange" @cel
2020-11-21 20:22:12
2487
原创 Vue登录过后无法在Main页面取到SessionStorage值的问题
Vue登录过后无法在Main页面取到SessionStorage值的问题最近在做权限管理的项目，项目需要判断是否是管理员来加载显示的页面。登陆的时候管理员不返回companyCode，返回roleId,其他人登陆的时候返回companyCode。管理员登录时返回所有的单位，默认展示第一个单位的信息，单位登录时显示单位信息。我现在需要做的事情如下图每一个不通的颜色代表不同的组件，我在asideMenu里面取到CompanyCode，需要在Echarts组件里面使用，但是我可以在asideMenu里面从
2020-11-20 16:30:53
1694
原创 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
227
原创 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
4284
原创 如何在vue里面实现评论功能
前几天做了文章的评论功能，现在用文字记录下来，希望帮助更多的人//html<div class="bottom"> <div class="coomment" @click="show"> <i class="el-icon-chat-line-round"></i>评论 <...
2020-04-30 18:39:34
5646
1
原创 如何在vue项目中判断是移动端还是PC端
如何判断用户当前是使用移动端还是PC端在Vue项目中我们会遇到移动端和PC端展现不同界面的情况，那么我们怎么判断用户此时是使用什么设备来浏览我们的页面呢？mounted(){ if(this._isMobile()){ alert(" 手机端") //在此处嵌入手机端页面 }else{ alert(" PC端") //在此处嵌入PC端页面 }}，mothods:{...
2020-04-10 14:08:47
1719
原创 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
1057
原创 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
705
原创 利用JSON_handel解析客户端的数据
开发中我们经常会用到JSON格式的数据，但是我们拿到的数据通常是这个样子的我们很难清晰地看见数据是什么样子的，这里我们可以下载JSON_handle 点击下载 来帮助我们查看我们的数据。之后我们打开chrome://extensions/将文件拖到这里面，当你看见右上角是这个样子的时候就已经安装好了。...
2019-12-14 16:57:30
147
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人