vue
_freely
这个作者很懒,什么都没留下…
展开
-
input输入日期时间,自动格式化组件/工具
【代码】input输入时间,自动格式化组件/工具。原创 2023-07-15 14:11:39 · 2303 阅读 · 0 评论 -
vue 分模块运行、分模块打包
web前端分模块运行、打包原创 2022-07-24 15:53:39 · 2385 阅读 · 1 评论 -
electron + vue2.X本地运行及打包遇到的各种版本问题、文件找不到问题汇总
electron + vue2.X本地运行及打包 ps: 打包环境为windows 7基础配置及版本node版本 node v11.7.0npm版本 v6.2.0electron版本 v7.3.3electron-packager v14.2.0.NET Framework v4.5powershell v5.1ps:1、node v14版本需要windows 102、electron v13.1.9需要node v14以上版本支持3、electron-packager原创 2021-08-19 21:17:50 · 3496 阅读 · 1 评论 -
el-table 自定义表头el-checkbox,实现全选、单选
表格表头自定义el-checkbox,全选单选实现思路table数据添加勾选属性itemCheck,默认为false表头添加render函数,渲染el-checkbox,绑定chang事件在change事件中处理table数据,给itemCheck重新赋值,改变行勾选状态改变行勾选状态,处理表头全选、部分选中、取消全选状态处理table数据for (let val of data) { val.itemCheck = false;} this.dataList = dat原创 2021-07-29 22:24:30 · 11036 阅读 · 2 评论 -
vue实现极简swiper
极简swiper效果图HTML<template> <div class="swiperModule"> <div class="swiper_container"> <div class="slide_item" :style="{transform: `translateX(${ 300 * (index - (activeIndex - 1)) }px) scale(${index === (activeIndex原创 2021-06-30 21:49:43 · 166 阅读 · 0 评论 -
模拟实现element-ui的消息通知notification
实现消息通知notification创建vue文件<template> <transition name="fade"> <div class="zh_notification" v-if="notificationVisible"> <div class="notificationModule"> <div class="notifiTitle"> <span>有一条消息</span>原创 2021-06-29 22:25:45 · 922 阅读 · 1 评论 -
vue动态滑入动画
从左侧滑入最新信息的动画动画效果代码实现父组件,定时器模拟推入消息<children :infoList='debtBerthWarnList'></children >setInterval(()=>{ // 这里去掉最后的补充数据 that.debtBerthWarnList.pop(); // 模拟接口数据 let list = [{ warnType: 1, areaN原创 2021-06-29 22:12:34 · 707 阅读 · 0 评论 -
echarts实现3个Y轴柱状图
在vue中使用echarts实现3个Y轴的柱状图效果图如下代码实现安装echartstemplate数据格式初始化左侧Y轴数值变为日期提示信息,如何展示百分比柱状图顶端展示百分比完整代码效果图如下有同学要说了,这不只有两个Y轴,接着往下看代码实现安装echartsnpm install echarts --save// 导入import echarts from 'echarts'template<template> <div> <div id原创 2020-05-19 23:47:38 · 6973 阅读 · 1 评论 -
vue中使用antv/g6 绘制关系图、结构图
使用antv/g6绘制关系图效果图代码实现npm install @antv/g6 --save<template> <div id="app"> <!-- <button @click="toUpdate">切换数据</button> --> <div id="container"></div> </div></template><script>原创 2020-05-15 21:56:53 · 9703 阅读 · 6 评论 -
element ui form表单动态prop规则校验问题
应用场景如图:选择第三方平台右侧计费规则非必选选择手动配置,右侧计费规则必选解决方案1. rules校验规则stationFeeType: [{ required: true, message: '请选择计费配置方式', trigger: 'change' }]2. prop动态,...原创 2020-03-30 20:38:42 · 5105 阅读 · 3 评论 -
vue-ls 本地存储
一种可以设置有效期的本地存储方式安装npm install vue-ls --save使用import Storage from 'vue-ls';let options = { namespace: 'vuejs__', // key prefix name: 'ls', // name variable Vue.[ls] or this.[$ls], stor...原创 2019-12-18 20:54:11 · 2890 阅读 · 0 评论 -
海康威视的视频web端(vue开发)的实时预览、录像回放和页面拖拽
效果图实现步骤1. 安装海康web插件,去海康威视官网上下载,官方不支持Mac,只支持Windows https://open.hikvision.com/2. 在index.html引入js文件,安装包里面有<script src="static/jquery-1.12.4.min.js"></script><script src=...原创 2019-11-20 22:04:52 · 26063 阅读 · 119 评论 -
项目中封装vue组件要点
最近在进行项目版本迭代时遭遇很尴尬的问题,跟各位道友分享一下在项目中二次封装了一个vue-awesome-swiper组件,复用达到八次尴尬的事情来了产品提了一个需求,要求某一个页面使用组件的时候,不允许请求当前时间的图片,需要延迟5分钟,比如当前时间 2019-10-14 20:10:00,就是说不允许请求2019-10-14 20:05:00之后的图片其他页面正常使用,无需延时...原创 2019-10-14 22:02:57 · 880 阅读 · 0 评论 -
element列表跳转路由时记录当前页,返回列表时还在跳转页
点击处理跳转到详情页,要求返回时还在当前页,其他页面进入时加载第一页数据代码实现// 使用sessionStorage记录当前页码sessionStorage.setItem('exceptPage', this.currentPage);// 路由进入时beforeRouteEnter(to, from, next) { if (from.path === '/n...原创 2019-10-09 20:59:59 · 898 阅读 · 0 评论 -
vue+axios+element formData实现文件上传
文件下载分为两步1. 上传模板EXCEL,使用formData提交2. 提交成功后,接口返回文件流,前端写入EXCEL实现下载ps: 使用表单提交的原因是,excel文件中包含ID,后端需要读取ID查询记录后,再把数据流通过接口返回代码实现1. vue组件<template> <el-dialog title="批量导入" ...原创 2019-09-19 21:50:43 · 1249 阅读 · 0 评论 -
vue项目打包报错UnhandledPromiseRejectWarning: CssSyntaxError
npm run build 打包vue项目报错UnhandledPromiseRejectWarning: CssSyntaxError(node:22088) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections th...原创 2019-08-29 21:18:28 · 2240 阅读 · 0 评论 -
vue之全局组件注册
注册全局vue组件,避免多次导入、注册1. 创建一个index.js文件 // 导入组件import bigImg from './bigImg';let _vue;bigImg.install = function(Vue, options) { // 避免多次注册 if (_vue) return; _vue = Vue;// 注册组件 Vue.c...原创 2019-08-13 22:26:42 · 298 阅读 · 0 评论 -
vue之组件封装图片的放大、拖拽
组件封装<template> <div class="bigImgBox" ref="maskBox" @mousedown="onmousedown"> <img :src="srcPath" alt="加载失败" :style="{'width': imgW + 'px','height': imgH + 'px','top':...原创 2019-07-30 21:06:45 · 1813 阅读 · 0 评论 -
vue-cropper 截图组件踩坑记
安装npm install --save vue-cropper封装组件 <template> <vueCropper height="562px" ref="cropper" :img="imgUrl" :outputSize="option.size" :outputType="option.outputType" :info=&原创 2018-12-26 21:29:02 · 20113 阅读 · 8 评论 -
vue之输入框在火狐浏览器不能弹出问题
列表展示,点击修改弹出对应的输入框,并获取光标代码实现<span v-show="scope.$index !== idx" style="color: #337ABE;cursor:pointer;" @click="amend(scope.$index, $event)">修改</span&...原创 2018-12-26 21:49:11 · 968 阅读 · 0 评论 -
vue 引入高效率时间控件jquery.datetimepicker.full.js 踩坑记
一、 在index.html引入依赖文件<linkrel="stylesheet"href="/static/jquery.datetimepicker.min.css"><scriptsrc="/static/jquery.min.js"></script><scriptsrc="/static/jquery-mousewheel.js...原创 2018-12-25 23:57:18 · 2641 阅读 · 0 评论 -
在vue自定义组件上使用v-model
vue2.0之后,子组件不允许修改父组件传递的数据下面介绍,子父组件之间的数据双向绑定子组件data () { return { isFocus: false }; },watch: { value: { handler (newB, oldB) { this.isFocus = newB; }, ...原创 2019-02-19 21:29:11 · 243 阅读 · 0 评论 -
vue之axios二次封装
响应拦截器// http response拦截器axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 40...原创 2019-02-25 20:19:01 · 193 阅读 · 0 评论 -
vue之封装多个组件调用同一接口的方法
背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => { all ...原创 2019-02-25 21:23:51 · 7043 阅读 · 2 评论 -
element-ui之dialog对话框组件title插槽的使用
dialog对话框组件title属性的slot使用方法使用背景需要单独控制title中某个数据显示及样式 <el-dialog // 也可以这样写,但是没有办法单独控制name age的显示 // title="name+ '' + age" title="提示" :visible.sync="dialo...原创 2019-03-06 08:53:04 · 21481 阅读 · 0 评论 -
vue之路由懒加载,以及Loading chunk {n} failed解决方法
路由懒加载的目的,避免单页面应用一次性加载时间import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);// 路由配置let router = new Router({ mode: 'history', routes: [{ path: '/', // component: lo...原创 2019-03-30 14:59:03 · 3217 阅读 · 0 评论 -
vue之动态加载图片列表
最近开发中遇到一个问题,后端只给返回图片名称,不返回图片路径需要前端动态拼接图片路径,根据返回的图片名称,显示对应的图片 <div v-for="(item, index) in imgList" :key="index"> <img :src="'../assets/images/'+ item.n +'.jpg'"> &...原创 2019-03-26 20:46:04 · 3843 阅读 · 2 评论 -
vue设置路由登录权限
在路由文件index.js中,将需要登录权限的路由设置meta属性let router = new Router({ mode: 'history', routes: [ { path: '/parkPay-list', component: ParkPayList, meta: { requireAuth: true ...原创 2019-04-08 20:53:34 · 1966 阅读 · 0 评论 -
vue & 类class实现3D相册
效果图相册组件<template> <div class="imgBox"> <div class="imgList" v-for="item in list" :key="item"> <img :src="require('./img/' + item + '.jpg')" alt=""> </div>...原创 2019-05-05 22:30:12 · 4395 阅读 · 0 评论 -
vue非父子/非兄弟组件通信bus发布/订阅者模式
使用背景如下图二级菜单为一级菜单的子路由,二级菜单加载M组件业务逻辑:一级菜单中有一个功能按钮,点击按钮可以改变状态state,组件M根据按钮状态state加载数据实现思路,使用事件总线,发布/订阅者模式1. 创建一个公共的Vue实例 新建一个bus.js,导出实例import Vue from "vue";export default n...原创 2019-05-07 21:49:50 · 244 阅读 · 0 评论 -
vue实现文件下载的两种方式
项目背景将列表数据导出到excel文件,下载到本地<button @click="exportFile">导出</button>代码实现调用接口,将后端返回的流数据new一个文件对象exportFile () { Vue.prototype.$axios[method]("http:// xxxxxx.com", { data: {id:...原创 2019-05-29 21:27:10 · 15433 阅读 · 2 评论 -
在vue项目中使用H5新属性draggable,对菜单的拖拽,实现菜单的添加及删除
vue与H5结合使用,实现菜单的拖拽效果业务需求,将菜单一下面的子菜单,使用拖拽添加到菜单二的子菜单中点击一级菜单,显示对应一级菜单下的子菜单,拖拽子菜单到其他任意一级菜单下HTML<div id="dragBox"> <div class="targetBox"> <div>目标盒子 一级菜单</div...原创 2019-06-20 21:02:32 · 3314 阅读 · 0 评论 -
vue之引入图片的两种方式
导入方式一:import Img from './images/car.png'data: { return { img: img }}方式二:data() { return { img: require("../assets/images/pic.png") }}使用<img :sr...原创 2018-12-26 20:35:30 · 10209 阅读 · 1 评论