自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(22)
  • 收藏
  • 关注

原创 vue引入海康播放实时监控(包含遮挡裁剪,销毁窗口方法,设置初始化窗口数)

vue引入海康播放实时监控(包含遮挡裁剪,销毁窗口方法,设置初始化窗口数)

2022-10-28 10:16:11 6567 1

原创 echarts设置折线图圆滑渐变(自定义颜色,超出数量后随机设置颜色)

echarts设置折线图圆滑渐变(自定义颜色,超出数量后随机设置颜色)

2022-06-29 17:12:47 2192 2

原创 使用VideoPlayer播放mp4(隐藏控件,点击全屏,窗口自适应父级)

1.npm2.main.js引入3.页面使用wacth监听methodcss设置自适应父级

2022-06-29 17:03:58 2153

原创 按钮实现模块左右滑动

实现效果html代码 <div style="display:flex;width:100%;height:calc(100% - 28px)"> <div ref="scrollOuterA" id="scrollOuterA" class="overflowBox scroll-box" @mouseS

2022-05-26 10:28:57 291

原创 echarts饼图显示引导线,图例过多翻页

实现效果父组件 <echartsPie echartsNo="two" :echartsPieData="echartsPieRecorder" />子组件<template> <div :id="'mainPie' + echartsNo" class="mainPie"></div></template><script&gt

2022-05-19 16:10:15 1340

原创 echarts折线图圆弧渐变,横坐标间隔显示

实现效果父组件 <echartsGradient echartsNo="one" :echartData="echartGraidVisit" />子组件<template> <div :id="'main' + echartsNo" class="mainBox"></div></template><script>import * as echarts from "echarts";

2022-05-19 15:14:48 1204 2

原创 echarts3d柱状图贴图带箭头带阴影

实现效果父组件 <echartsColumnar :carVioDistribution="carVioDistribution" echartsType="carVio" ></echartsColumnar>子组件<template> <div class="app_rank"> <div :id="'ech

2022-05-19 15:06:21 850

原创 日期组件限制时间范围

1.日期组件限制不可选当前时间之后的日期 <el-date-picker v-model="value1" :picker-options="pickerBeginDateBefore" :clearable="false" type="date" placeholder="选择日期" value-for

2022-05-19 14:54:28 670

原创 自定义组件可展开收缩的选择器过滤

实现效果 1652928347422 父组件代码//引用组件 getList查询事件 <select-filter :selectForm="selectForm" :selectMoreForm="selectMoreForm" :getList="getList" ></select-filter

2022-05-19 11:16:37 132

原创 级联选择器可选择父级

<el-cascader v-model="formData.orgId" ref="orgTree" popper-class="cascaderBox" :style="{ width: '100%' }" :options="orgOptions" :props="{ ...

2022-04-08 13:50:43 736

原创 基于ele引入全局深色样式scss

1.main.js引入import './assets/theme/dark/styls.scss'跑项目问题------this relative module was not found解决2.安装scss-loadernpm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //

2022-04-08 11:07:20 123

原创 表格可添加行可删除行可编辑

父组件调用import addTable from “@/views/materialManagement/components/在这里插入代码片addTable”; <addTable style="max-height: 350px; overflow: auto" :tableData="formData.field113" :handleCellClick="handleCellClick".

2022-04-08 11:04:50 174

原创 vue的computed复杂计算if语句

vue的computed复杂计算if语句计算数组对象某属性和this.addConfigObj.addConfigData.reduce((c, item) =>c +item.costEquipmentRental +item.costComposite,0)vue的computed复杂计算 totalPrice() { if (this.formButton.type === "0") { return ( (parseInt(t

2022-03-10 15:14:08 2374

原创 线性树,加结构线

安装与使用# npmnpm install element-tree-line -S# yarnyarn add element-tree-line -S完整使用<template> <div class="app-main-content"> <div class="treeLineBox"> <el-tree class="tree" :data="treeData"

2022-03-03 15:06:56 303

原创 FormData()同时上传文件和对象post请求

const form = new FormData();//上传图片 if (this.ruleForm.fileList.length) { for (let i = 0; i < this.ruleForm.fileList.length; i++) { if (this.ruleForm.fileList[i].raw) { form.append("file", this.ruleF...

2022-03-03 14:56:37 864

原创 自定义组件树级组件与输入框过滤对应点亮,自定义父级可点不可点,修改树节点高亮样式

项目场景:自定义组件树级组件与输入框过滤对应点亮,自定义父级可点不可点,且点亮样式为蓝色组件引用://父级可点选parent-true <treeFilterBox ref="mychild" :default-props="defaultProps" :tree-data="treeData" :current-spot="currentSpot" :tree

2022-03-03 14:45:05 345

原创 获取树节点的父属性拼接字段

项目场景:拼接点击的树节点的所有父节点的name属性# 代码片段: handleNodeClick(data, node, value) { this.getTreeNode(this.$refs.treeList.getNode(data.nodeId), ""); },//获取父属性并拼接 getTreeNode(node, xx) { if (node.parent.data.nodeName) { xx = no

2022-03-03 11:30:25 474

原创 找父组件属性方法

代码如下(示例): familyExpandTree(arr1, id) { var temp = []; var forFn = function (arr, id) { for (var i = 0; i < arr.length; i++) { var item = arr[i]; if (item.id === id) { temp.push(item); forF

2021-11-09 15:32:09 399

原创 vue引用three.js详细步骤

three.js:官网效果预览:先去官网找想要引入的模板首先先下载依赖npm install three --save然后是贴官方代码,需要修改的地方主要是window.innerWidth改为dom元素的container.clientWidth,添加this详细代码如下1.官方代码引入import * as THREE from '../build/three.module.js';import { OrbitControls } from './jsm/controls/O

2021-10-27 15:00:53 6306 1

原创 图片地址报406--非私密链接的地址

项目场景:从后台获取的图片地址没有.png类似的后缀,是一个非私密链接的地址问题描述:解决方案:在index.html里面加上<meta name="referrer" content="no-referrer">

2021-10-26 13:47:10 156

原创 输入框与多选树级选择器联动可搜索

功能:做一个输入框可以和多级树选择器联动且可以过滤搜索的效果效果预览:代码:提示:这里描述项目中遇到的问题:例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据APP 中接收数据代码:<div class="fliterBox"> <span class="demonstration">抓拍点:</span> <el-popover placement="bottom

2021-10-21 14:28:23 373

原创 ele组件上传图片--图片更换功能

ele组件上传图片–图片更换功能:要写一个图片上传之后可以更换删除的功能。例如:QQ头像上传效果预览:代码:提示:这里描述项目中遇到的问题:例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据APP 中接收数据代码:<el-upload action="#" list-type="picture-card" class="imgBox" :auto-upload="false" :file-

2021-10-21 10:40:34 980

复合可编辑表格组件vue实现,可新增行,可删除行可校验,可设置下拉框树形选择器多选

功能描述:可编辑表格,可新增行,可删除行,可触发表单校验,可设置下拉框树形选择器多选文本框等格式,可编辑表格可设置编辑和只读两种状态 适用人群:具备一定编程基础,工作1-3年的前端研发人员 适用场景:应用场景需要批量添加字段相同取值不同的数据,数据处理可用可编辑表格的功能实现,本组件的编辑表格组件可添加行,可删除行,可默认赋值进行修改,可点击数据查看详情表格只读。本组件可对表格字段进行自定义,可将填写数据设置成单选下拉选,树形结构选择器,多选下拉选,文本框,可对某字段触发特定校验,可设置字段的必填选填,还可以将某行的值复制到其他所有行避免用户重复填写 技术范围:vue,js,html,css 阅读建议:此资源以开发简化版组件学习其原理和内核,不仅是代码编写实现也更注重内容上的需求分析和方案设计,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码,编写可复用组件代码,避免重复造轮子

2022-09-20

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除