vue-web
文章平均质量分 74
vue-web
BMG-Princess
愿每个人心里的炽热,在妥协后还没有死去。
展开
-
vue实现循环滚动列表vue-seamless-scroll
vue实现循环滚动列表vue-seamless-scroll原创 2022-11-18 14:31:36 · 284 阅读 · 0 评论 -
Vue2+JS平铺多级联动数据复选的实现
Vue2+JS平铺三级联动的实现原创 2022-10-10 14:02:23 · 897 阅读 · 0 评论 -
vue3.0项目实战系列文章 - 多种版本引入国际化
vue3.0项目实战系列文章 - 多种版本引入国际化原创 2022-08-01 14:29:04 · 421 阅读 · 0 评论 -
vue3.0项目实战系列文章 - 使用周期函数
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令第三章vue3.0项目实战 - ElementUI框架版第四章【TypeScript】在vue3中遇到的问题及解决方案,未完待续第五章vue3.0项目实战系列文章 - 登录页面...............原创 2022-07-29 14:12:48 · 429 阅读 · 0 评论 -
vue3.0项目实战系列文章 - 登录页面
第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令第三章vue3.0项目实战 - ElementUI框架版第四章【TypeScript】在vue3中遇到的问题及解决方案,未完待续第五章vue3.0项目实战系列文章 - 登录页面第六章vue3.0项目实战系列文章 - 使用周期函数............原创 2022-07-21 14:11:52 · 4982 阅读 · 0 评论 -
Vue2自定义指令使用—按钮级别权限控制 + vue3中按钮级别权限控制的扩展
Vue自定义指令使用——按钮级别权限控制 + vue3中按钮级别权限控制的扩展原创 2022-05-18 16:44:14 · 3468 阅读 · 2 评论 -
setup与defineComponent:用例子详解
import {ref, reactive, defineComponent, Ref, onMounted} from "vue";import {settingsStore} from "/@/store/module/settings";import {IRoleList} from "/@/interface/role/list.interface";import {IHttpResult} from "/@/interface/common.interface";import { ILo.原创 2022-05-18 14:12:10 · 3075 阅读 · 0 评论 -
vue3.0项目实战 - ElementUI框架版
vue3.0项目实战 - ElementUI框架版原创 2022-04-13 17:54:10 · 9909 阅读 · 0 评论 -
element-UI 源码解析加注解,未完待续
没有下载源码可以比对下面两个文件Button组件文件 button.vue<template> <button class="el-button" @click="handleClick" :disabled="buttonDisabled || loading" :autofocus="autofocus" :type="nativeType" :class="[ type ? 'el-button--' +原创 2022-05-11 14:52:42 · 1244 阅读 · 0 评论 -
同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令
同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令原创 2022-05-09 17:41:00 · 2127 阅读 · 0 评论 -
【Vue2+Vue3】开发指令使用总结,未完待续
一、watch监听及深度监听二、directive自定义指令详解+实例三、vue父子组件中数据双向绑定的几种方法四、Message消息提示每次只弹出一个 + 设置全局message弹框的格式五、什么是重定向六、为什么要进行重定向?什么时候需要重定向?七、HTTP协议详解之响应篇八、export与export default区别九、路由传参-使用encodeURI加密参数十、base64格式的加密与解密十一、vite十二、快速生成vue3代码模板.....................原创 2022-05-11 14:40:38 · 7463 阅读 · 0 评论 -
【组件通信 provide 和 inject 】使用
目录前提provide和inject使用缺点前提近期研究Element源码,里面遇到了provide 和 inject;以前未用过,现在进行了一个小小的调研,此处需要针对项目的需求进行不同方式的引用!曾用过session、localStorage、vuex、prop;父子组件,通过prop ; props是一层一层向下传的,比较笨重;如需引用,只能父子传递哦! 非父子组件,通过vuex ; 引入vuex会导致代码性价比比较低,项目本身没有使用vuex的必要;如需引用,储存变量.原创 2021-05-26 11:21:35 · 225 阅读 · 0 评论 -
【Vue】JS Proxy(代理)
前言Proxy也就是代理,可以帮助我们完成很多事情,例如对数据的处理,对构造函数的处理,对数据的验证,说白了,就是在我们访问对象前添加了一层拦截,可以过滤很多操作,而这些过滤,自主定义。语法 let p = new Proxy(target, handler);参数target :需要使用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。 handler: 一个对象,其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。具体的.原创 2021-05-17 10:26:31 · 501 阅读 · 2 评论 -
vue中slot的多种用法
1、基本用法//组件<template> <div class="com"> <slot name="header"></slot> <slot>如果没有插槽或者不具名就是显示当前</slot> <slot name="floot"></slot> </div></template><script>...转载 2021-04-19 09:23:25 · 807 阅读 · 0 评论 -
Vue全局配置按钮防止被重复点击,请使用第三种全局配置,简单有效
方法一:1.common.js首先引入Vueimport Vue from 'vue';const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setT...原创 2021-03-31 17:34:22 · 1543 阅读 · 1 评论 -
【Element】日期时间选择器【封装 】- 开始时间不能晚于结束时间+底部”清空“按钮不关闭日期框
目录始于2018,结于2021具体说明template:data:监听值的变化 :在接口中传入:时间日期选择器 - 开始时间不能晚于结束时间始于2018,结于2021具体说明template: <el-date-picker type="datetime" :time-arrow-control="true" :picker-options="pickerOptions0" v-model="startDate" format="y......原创 2021-02-24 16:16:50 · 1436 阅读 · 0 评论 -
【vue】 如何刷新系统
执行F5:location.reload()原创 2020-11-27 17:22:35 · 174 阅读 · 0 评论 -
【vue-baidu-map】给点添加信息窗口
目录效果上代码效果使用前的引用前面有说,翻翻博客上代码<bm-info-window :position="{lng: infoWindowContent.longitude, lat: infoWindowContent.latitude}" :width="0" :height="0" :show="infoWindowShow" @close="infoWindowClose" @open="infoWindowOpen"> .原创 2020-11-03 09:16:08 · 942 阅读 · 2 评论 -
【vue-baidu-map + mapv】结合实现动态水流动画
目录实现技术引用此方案对于电脑要求有点高,GPU直接就占满了,没想到好的解决方案,但功能实现了实现技术mapv vue-baidu-map 百度地图 引用固定弹框封装插件引用index.html<script src="https://api.map.baidu.com/api?v=3.0&ak=***"></script><script src="https://unpkg.com/vue-baidu-map">...原创 2020-10-30 10:29:31 · 3101 阅读 · 3 评论 -
【vue-baidu-map】绘制带方向箭头的【多条】折线
目录需求技术说明官方文档地址实现方案啥都不说,上效果图大家就懂了需求点为站点,白框显示名称+报警图标 站点颜色根据参数设置 站点间有河流方向技术说明引用 vue-baidu-map 引用自定义插件,以下会做说明官方文档地址vue-baidu-map 原生JS在折线上添加方向箭头官方案例实现方案原文档是满足不了我们需求的,所以我们需要自己封装。(本来我这边只是CDN加速引用,但是自己封装用到了源文件,所以还是要npm一...原创 2020-10-30 10:20:52 · 1757 阅读 · 1 评论 -
【Vue - computed】 计算属性,方法和侦听器
所以,对于任何复杂逻辑,你都应当使用计算属性。(官方原话)<body> <div id="app"> {{FullName}} </div> <script> var vm = new Vue({ el : "#app", data:{ FirstName : "Liu", LastName: "Runsen", FullName: "Liu原创 2020-10-28 11:31:34 · 160 阅读 · 0 评论 -
【VUE+Element】 show-overflow-tooltip内容过长时显示不全
简单!在公共css里加:.el-tooltip__popper{max-width: 200px;}原创 2020-09-22 09:36:42 · 3411 阅读 · 1 评论 -
【VUE+Elemet】el-form中验证后取消某个验证提示语 + 验证时同时出现多种类型时的处理
问题:在上传图片后发现提示语未消失,如图:解决:上传成功之后<el-form-item label="上传缩略图:" prop="licenseUrl"></el-form-item>handleSucess(response, file, fileList) { this.form.licenseUrl = response.data.url; this.$refs['form'].validateField('li.原创 2020-09-02 16:08:08 · 1295 阅读 · 0 评论 -
【VUE+Elemet】对于el-cascader多级联动的扩展功能+解决隐藏问题
1、多级联动的回显问题想要回显成这个样子,需要后台给这三个id,然后初始时走三个接口;以此类推,可以走多个接口,获取多级。上代码<el-cascader v-model="form.area" placeholder="请选择" clearable ref="refArea" :options="areas" :show-all-levels="true" @change="handleChangeColumn" @active-item..原创 2020-08-25 17:45:18 · 948 阅读 · 0 评论 -
vue 去掉#
文件router>index.jsroutes: [ { path: '*', redirect: '/home' },]加一行即可原创 2020-08-25 16:53:58 · 312 阅读 · 0 评论 -
【el-tree】懒加载+整体刷新+搜索定位+初始展开+初始高亮显示+通过 keys 设置节点子元素+添加子节点下拉框
【el-tree】懒加载+整体刷新+搜索定位+初始展开+初始高亮显示+通过 keys 设置节点子元素+添加子节点下拉框原创 2020-08-12 09:31:04 · 7023 阅读 · 0 评论 -
Vue 全局挂载自定义函数(全局函数)、全局变量几种方式
Vue 全局挂载自定义函数(全局函数)、全局变量几种方式原创 2020-07-08 09:55:53 · 12602 阅读 · 2 评论 -
【VUE+Element】vue-quill-editor的使用,上传图片+音频+视频+自定义上传方式
效果:1、引入vue-quill-editorcnpm install vue-quill-editor2、使用vue-quill-editortemplate:<!-- 上传组件辅助--> <el-upload class="avatar-uploader-editor" :action="serverUrl" name="img" :headers="header" :show-file-list="false" :on.原创 2020-07-02 10:28:40 · 6208 阅读 · 22 评论 -
【vue+element】 对日期时间选取做限制+时间格式的判断
首先,我们要说明下需求!开始时间及结束时间默认为三天前到今天 开始时间不能选取结束时间之后(结束时间同理) 上传时间为yyyy-MM-ddhh:mm:ss格式 其中一个需求是只能选择未来一个月的数据,代码在下注意: 当时间为空时,不能设置为yyyy-MM-ddhh:mm:ss格式template:<el-date-picker type="datetime" :picker-options="pickerOptions0" v-model="startDate" placeh..原创 2020-06-29 16:19:33 · 1022 阅读 · 0 评论 -
【vue+Element】 el-table根据换行符(回车)换行
数据格式:处理方式:效果:原创 2020-06-29 15:51:13 · 4512 阅读 · 1 评论 -
vue中使用vue-quill-editor富文本编辑器,自定义toolbar修改工具栏options,上传图片+美化头部+实用功能
前提:要知道vue-quill-editor是没有文字说明的,现在加个文字说明和上传图片,代码有用!1、效果图2、原创 2020-06-15 10:32:58 · 1493 阅读 · 1 评论 -
关于element table 动态表头+动态表头及内容+表格优化+初始化表格+隐藏功能,技术提升请来!
1、第一个就是表格头部与内容对不齐的问题了,一直以来都感觉他不算啥大问题,关键是测试还没测出来,但是完美主义者还是想改,哈哈。在App.vue文件中加入: body .el-table th.gutter{display: table-cell!important;}完美解决。2、不知道有没有为了表格内容过长占地儿苦恼,有个超简代码来解决:<el-table border :data="historyData"> <template sl原创 2020-05-22 16:15:07 · 5219 阅读 · 2 评论 -
前端拼图滑动验证,兼容IE
1、前提:刚开始引用这个插件时,是不兼容 IE的,修改了一行代码 ctx.globalCompositeOperation='lighter'2、调研:这两项经测试是可以正常显示的,个人认为lighter显示更好。3、效果图代码插件已上传,欢迎来取,有用记得点赞哦~4、应用此插件登录页面引用 template //用户名//密码//点击完成验证<div @click="clickVerify" class="login-click-ver...原创 2020-05-19 15:08:54 · 1370 阅读 · 0 评论 -
扩展!vue+element 循环获取 form表单内容,并判断格式,另:附上里面select格式
在form表单里包含一个select选择框,并需在编辑时验证并回显,附上代码如下:template:isAdd==true时为添加,list1.isRequired==1为非必填,<div v-if="isAdd==true" v-for="(list1,key) in form.lists"> <el-form-item v-if="list1.isRequired==0" :label="list1.name+':'" :prop="'lists.' +原创 2020-05-15 10:46:07 · 1229 阅读 · 0 评论 -
element中全屏展示+bug的解决
说明 :全屏展示在IE浏览器下对页面整体样式是有要求的#app{position:fixed;top:0%;left:0%;height:100%;width:100%;overflow:hidden;}此处绝不可为position: absolute;<!-- 全屏显示 --&...原创 2020-04-13 14:57:56 · 1084 阅读 · 0 评论 -
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项
最全最全正则验证 + 表单验证 + 注意事项一、正则验证1.输入字母/数字/下划线:2.请输入中英文/数字/下划线:3.请输入中文/英文:4.规范金额:5.用户名不能全是数字:6.中文:7.非中文:8.限制长度:9.数字:10.正整数及整数:11.请输入数字(可正负)12.请输入数字/小数点:13.请输入0-999914.大写,小写,数字,特殊字符,至少上面的三种,至少八位15.自定义校验16.是否合法IP地址:17.是否手原创 2020-04-09 10:52:05 · 21259 阅读 · 1 评论 -
【VUE+Elemet 】动态设置el-menu导航,刷新页面保持当前菜单选中项及路由,与此同时标签同时变化
(1)、 设置属性 :default-active=“activeIndex”(2)、watch方法检测路由变化(3)、created生命周期设置路由具体代码如下:<template> <div id="app"> <el-menu :default-active="activeIndex" background-color=...原创 2020-03-06 11:20:18 · 1703 阅读 · 5 评论 -
element-ui table多选CheckBox参数解析
前提现在需要对表格中的数据进行判断,判断是否可选。上代码添加:selectable=“IsCheck”<el-table-column :selectable="IsCheck" type="selection" width="55"> </el-table-column>methods:{}添加IsCheck(row, index) { ...原创 2019-12-26 17:20:29 · 403 阅读 · 0 评论 -
element ui el-checkbox竖排列
只需要在el-checkbox 中加入样式:style="display:block;"例如<el-checkbox-group v-model="checkList" @change="changeCheckbox"> <el-checkbox v-for="item in controlDatas" :label="item.Paramet...原创 2019-12-26 17:11:34 · 6471 阅读 · 0 评论 -
【VUE+Elemet 】Message消息提示每次只弹出一个 + 设置全局message弹框的格式+Message距离窗口顶部的偏移量
- Element UI的Message消息提示是点击一次触发一次的,如果一直点,然后就会出现打开多个的情况。 - 在后台弹消息的时候,也会同时出现 - 设置全局message弹框的格式 - Message距离窗口顶部的偏移量...原创 2019-12-24 08:57:36 · 6861 阅读 · 0 评论