- 博客(36)
- 资源 (15)
- 收藏
- 关注
RSS订阅转载 vue element-ui级联选择器选中后下拉框自动收起
Cascader 级联选择器设置 严格的遵守父子节点不互相关联(checkStrictly: true)，此时每一级都可以选择(选项前会有圆圈可勾选)，实现点击选中后下拉框自动收起。设置监听选择器值变化的时候，把 dropDownVisible 属性设置为 false 即可。<el-cascader ref="deptIdCascader" v-model="updateInfo.deptId" :props="{checkStrictly: true}"&g
2022-02-25 15:19:40
1689
原创 echarts实现立体柱状图
基于象形柱图pictorialBar实现。var rocket = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAeCAYAAACPOlitAAAAAXNSR0IArs4c6QAADOdJREFUaEPFmttvXNd1xn9r7TNnOBzeRIkSRetiW7Lk0q5tWXIcSS2qFrENFMlLADtNAyc24tZAC/ShL+1b1H+hQAuoqKvIjlvAfstLYSNFpCRO4tiMGsryTfcL
2021-12-29 10:16:23
2079
转载 iview弹窗拖拽效果和遮罩层同时使用
iview弹窗开启了 draggable 之后会强制不显示遮罩层，想要实现同时使用拖拽效果和遮罩效果，这时只能手动设置除弹框区域外其他区域不能点击，通过增加ivu style样式实现。<template> <Modal draggable v-model="isShow"> </Modal></template> <style> .ivu-modal-no-mask...
2021-08-24 10:59:26
621
原创 js数组去重
利用语法自身键不可重复性1、利用ES6的setSet数据结构，它类似于数组，其成员的值都是唯一的。利用Array.from将Set结构转换成数组function unique (arr) { return Array.from(new Set(arr))}拓展运算符(...)内部使用for...of循环return [...new Set(arr)] 缺点：不能对对象类型数据去重2、利用hasOwnPropertyfunctio...
2021-08-22 16:07:13
149
转载 vue组件之间相互传值
Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。1、父组件向子组件传值父组件通过属性的方式向子组件传值，子组件通过 props 来接收。在父组件的子组件标签中绑定自定义属性/* 父组件页面 */<t...
2021-08-20 17:20:26
193
原创 vue生命周期
1、生命周期概念在Vue中实例对象从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程。注意：在Vue生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算，这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())2、生命周期阶段其他特殊场景的生命周期：ac...
2021-08-20 14:49:07
102
原创 CSS选择器
1、元素或组选择器这是在CSS中使用的最基本的选择器之一。元素选择器允许您选择所有具有相同指定元素名称的元素并为其指定样式。如果有多个具有相同样式定义的元素，则可以将所有元素分组并将样式应用于所有元素。这样，您就可以最小化代码，因为您不必为每个元素使用类。示例1：在这里，页面上的所有段落都将右对齐，文本颜色为黄色p { text-align: right; color: red;}示例2：现在，看下面的CSS代码…...
2021-08-17 16:23:32
843
原创 HTML标签属性
结构化标签标题越高权重越高，一般一个页面只有一个h1标签 <main></main>主区域标签，一般一个页面出现一次 <header></header>头部区域 <footer></footer>尾部区域 <nav></nav>导航区域 <article></article>一段独立的内容区域 在article里面可以使用<section&g...
2021-08-12 15:05:08
62
原创 input标签 --- 文件上传与删除
上传<div class="pic_part" v-show="modalData.addPic.url"> <img alt :src="modalData.addPic.url" style="width: 100%; height: 100%"> <div class="pic_part-cover"> <Icon type="ios-trash-outline" class="pic_delete_icon" @clic
2021-07-09 17:38:59
1013
原创 vue常用指令
1、v-ifv-if指令可以完全根据表达式的值在 DOM 中生成或移除一个元素。如果v-if表达式赋值为false，对应元素的一个克隆将被重新插入 DOM 中；如果v-if表达式赋值为false，那么对应的元素就会从 DOM 中移除。2、v-showv-show指令是根据表达式的值来显示或者隐藏HTML元素。当 v-show赋值为 false时，元素被隐藏， 此时元素上多了一个内联样式style="displa...
2021-06-29 17:37:38
292
原创 基于vue项目 验证码生成组件
1、安装验证码组件npm install captcha-mini2、项目引入 import CaptchaMini from 'captcha-mini'; //引入验证码生成组件注：在使用页面引入3、定义验证码容器<template> <div> <canvas id="captcha" class="captcha"></canvas> </div></...
2021-06-29 15:12:06
815
原创 基于vue-cli3项目实现不同分辨率显示屏幕适配
1、安装lib-flexible 插件npm i lib-flexible -S2、安装换算 px 换算 rem 插件npm install postcss-px2rem --save3、 修改vue.config.js 文件module.exports = { // css中加入 css: { loaderOptions: { postcss: { plugins: [ ...
2021-06-29 11:51:12
856
原创 不使用新变量交换两个变量的值
1、利用变量与变量间的加减法this.a = 22;this.b = 29;this.a = this.a + this.b; //此时this.a 为 51this.b = this.a - this.b; //此时this.b 为 51-29=22this.a = this.a - this.b; //此时this.a 为 51-22=292、利用数组this.a = 22;this.b = 29;this.a = [this.a , this.b]; this.b = t
2021-06-28 15:56:41
67
原创 CSS3渐变效果
1、线性渐变多个终止色<template> <div> <div class="more_color"></div> <div>多个终止色</div> </div></template><style> .more_color{ background: linear-gradient(to right, red,
2021-06-24 15:59:23
72
原创 字体颜色设置 ---- 渐变背景、图片背景等
重点： -webkit-background-clip: text; 规定背景绘制区域（背景可以是颜色、图片、动图、视频）1、渐变背景字体默认渐变方向<template> <div class="default">默认渐变</div></template><style> .default{ background: linear-gradient(red, yellow, blue); ...
2021-06-23 16:30:14
307
原创 图片放大镜-----放大部分单独显示
主页面<template> <div> <my-magnify :previewImg="data.min" :zoomImg="data.max"></my-magnify> </div></template><script> import MyMagnify from '../page1.vue'; import pic from '../../assets/im
2021-06-22 17:39:28
59
原创 vue-cli3项目中引入jquery
1、安装jquerynpm install jquery --save2、或则在package.json中指定版本号，然后运行npm install命令
2021-06-18 16:27:24
326
转载 HTML中 ； &ensp； &emsp； &thinsp；等6种空白空格的区别
HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（      ‌‍）在不同浏览器中宽度各异。 它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTM...
2021-06-18 10:25:30
689
原创 动态粒子、连线特效
动态粒子、连线特效效果视频效果图安装组件：npm install vue-particles --save-dev引入组件（main.js）：import VueParticles from 'vue-particles'Vue.use(VueParticles)使用：<template> <div> <!-- 线特效 --> <vue-particles ...
2021-02-08 17:06:52
229
原创 图片循环轮播
图片循环轮播效果演示直接上代码<template> <div id="slider"> <div class="window" @mouseover="stop" @mouseleave="play"> <ul class="container" :style="containerStyle"> <li> <i
2021-02-05 17:20:11
167
2
原创 div模块边框中间添加文字（边框线在文字两边横穿文字）
div模块边框中间添加文字（边框线在文字两边横穿文字）需求图如下：其他三个边框可通过设置border完成，包含文字的一边可以分布实现：左边线 + 文字 + 右边线html：<div class="pop"> <div class="pop_title"> <span class="line_left"></span> <span class="title">控制器主网络配置</s.
2021-02-05 15:53:33
3720
转载 14 个 JavaScript 代码优化建议
14 个 JavaScript 代码优化建议1. 删除不使用的代码和功能程序包含越多的代码，给客户端传递的数据就越多。浏览器也需要更多的时间去解析和编译代码。有时，代码里也许会包含完全未使用到的功能，最好只将这些额外的代码保留在开发环境中，并且不要把它们留到生产环境中，因为无用的代码可能会增加客户端浏览器的负担。 经常问自己那个函数、特性或代码是否是必需的。你可以手动的删掉无用的代码，也可以用工具 Uglify 或 谷歌开发的 Closure Compiler 帮你删。你甚至可以使用一种叫做 tr
2021-02-04 11:43:49
186
原创 vue使用百度地图----离线地图
vue使用百度离线地图三要素：1、地图API文件；2、依赖文件；3、地图瓦片。1、文件结构注：相关文件需放在public文件夹下2、api文件修改修改 bmapcfg.tiles_dir 值为本地瓦片路径或自己的瓦片地址3、引入map_load.js引入index.html引入4、页面使用HTML部分<div class='baiduMap' id='mapShow' ref="mapShow"></div>JS数据方法部分
2020-10-09 15:11:43
2941
10
原创 vue使用百度地图----在线地图
Part1 在线地图1、安装组件npm install vue-baidu-map --save2、在main.js中引入组件import BaiduMap from 'vue-baidu-mapVue.use(BaiduMap, { ak: '**********************' //此处为百度地图秘钥});百度AK秘钥申请地址3、HTML部分<div id="baidu_map"> <baidu-ma
2020-10-09 11:31:23
198461
4
转载 visualMap属性
视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。visualMap=[ { show:true,
2020-09-30 16:10:04
1916
原创 vue使用Echarts地图展示并标注坐标点、点击进入省市子区域地图
1、安装echarts依赖npm install echarts --save2、main.js中引入echartsimport echarts from 'echarts';//引入echartsVue.prototype.$echarts = echarts;3、HTML部分<!-- 地图容器div --><div class="overview_mian_mapBox" id="mapChart" ref="mapChart" ></div>
2020-09-30 14:31:49
4826
9
原创 IP地址、端口号、子网掩码、手机号、数字校验
IP地址、端口号、子网掩码、数字校验IP地址验证isValidIP(ip) { const reg = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/; return reg.test(ip);},端口号验证isValidPort(port){ var reg = /^([0-9]|[1-9]\d{1,3}|[1-5
2020-08-21 17:47:54
600
原创 VUE列表和表格滚动显示
VUE列表和表格滚动显示自动滚动主要注意三个变量:1,要显示的滚动区域,2,滚动时间,3每次滚动的位移量滚动效果主要是根据transition样式进行设置: transition: width 2s; 第一个参数是指方向,第二个是移动时长。再通过数据的需求设置每次需要移动的距离,可视区域外的元素遮盖(overflow:hidden)，最后在设置定时器定滚动就好。列表 <template>部分<ul class="dper_list_ul"> <l
2020-08-20 16:20:36
1645
原创 CSS段落文字只显示一行，超出部分显示省略号，鼠标悬浮显示全部段落内容
CSS段落文字只显示一行，超出部分显示省略号，鼠标悬浮显示全部段落内容1. 给段落设置属性.longlinedots{ max-width: 900px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}max-width: 900px; // 设置容器最大宽度white-space: nowrap; // 设置段落文本不换行(不换行才有可能行溢出)；overflow: hidden; //
2020-07-06 17:36:57
5157
原创 element-ui 下拉框选择器selete多选是，单行显示所选内容
element-ui 下拉框选择器selete多选是，单行显示所选内容只需重写 el-select 原生样式.el-select__tags { flex-wrap: inherit !important; overflow-x: auto !important;}特别注意：重写原生样式时，去掉当前 style 的 scoped 效果图;...
2020-07-02 18:13:09
942
原创 iview可编辑表格 表格行添加输入框、选择器
iview可编辑表格 表格行添加输入框、选择器表格的列定义中，在需要编辑的字段下使用render函数Input输入框{ title: '控制器名称', key: 'conName', align: 'center', render: (h, params) => { return h('Input', { props: { value:params.row.conName },
2020-07-02 15:30:23
2390
2
原创 VUE模块滚动条实现鼠标进入显示，移除隐藏
VUE模块滚动条实现鼠标进入显示，移除隐藏设置模块样式，overflow设置为hidden.dper_table{ margin-top: 18px; margin-bottom: 10px; height: 90%; overflow-y: hidden; //关闭滚动条 overflow-x: hidden; //关闭滚动条 }给该模块样式设置伪类 :hover ，在伪类中设置需要悬浮显示的滚动条为auto
2020-06-30 16:20:22
1915
原创 iview表格行设置前置图标
iview表格行设置前置图标1. 单行前置在需要设置前置图标的表格列定义中使用render函数{ title: '报警信息', key: 'alarmInfo', ellipsis: true, width: 300, render: (h, params) => { var stateClass; if ( params.row.alarmLevel == 1) { stateClass = "alarm_leve
2020-06-30 15:55:17
592
原创 table列内容超出显示省略号
element-ui 和iview的table列内容超出部分省略并悬浮提示1. element ui element表格中在列标签中设置属性show-overflow-tooltip值为true<el-table-column :show-overflow-tooltip="true"></el-table-column>2.iviewiview在列定义中使用render函数调整表格行样式{ title: '报警信息', key: 'alarmIn
2020-06-30 15:38:37
407
原创 vue设置LED字体
vue设置LED字体插件: UnidreamLED.ttf将插件放在项目静态文件里边CSS中引用字体插件/*UnidreamLED字体*/ @font-face { font-family: "UnidreamLED"; src: url("./../../static/font/UnidreamLED.ttf") format("truetype"); //UnidreamLED.ttf在项目中的位置 } .UnidreamLED {
2020-06-29 10:44:14
1361
2
表格循环滚动播放.mp4
2020-09-01
/element-ui/lib/index.js
2020-08-21
基于script标签引入vue.js
2020-08-21
表格滚动显示.mp4
2020-08-20
列表项滚动显示.mp4
2020-08-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人