DDD4V的博客

分析浏览器全屏和requestFullscreen全屏Api区别，requestFullscreen() 方法用于发出异步请求使元素进入全屏模式，exitFullscreen退出全屏事件，

el-input根据字数长度限制输入，超过变红并禁止输入

el-table动态列合并

Bug效果：当鼠标初次移入Echars，下方出现滚动条并且迅速消失原因：当时设置了tooltip时，鼠标移入会触发悬浮事件，并且会有一个默认的0.4秒过渡时间值当我们把值设置为0时，紧跟着鼠标移动就会解决抖动问题tooltip: { transitionDuration:0,//[defaule:0.4] echart防止tooltip的抖动}...

众所周知fixed是基于浏览器窗口定位，但是今天遇到个问题，发现fixed并不一定是这样有一个例外会使fixed是基于祖先元素定位。当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。<div class="container" style="transform:rotate(360deg);"> <div> <div class="box" style="position:fixed;"></div&

文档描述使用这个属性popper-class添加一个class<el-tooltip content="Top center" placement="top" popper-class="atooltip"> <el-button>Dark</el-button></el-tooltip>.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow { border-top-c

实现效果：ElementUI文档：el-table组件 <el-table-column label="水位高程(m)" header-align="center" align="center"> <el-table-column prop="swlel" label="传感器监测" align="center" :render-header="(h, { col

// 初始化时间（通用型） initTm(queryForm, isTwo = true) { const limitTm = window.HT_EnvConfig.limitTm || 8 let day = 0 if (moment().hours() < limitTm) { day = 1 } let fmtStr = 'YYYY-MM-DD ' if (limitTm < 10) {

在使用element-ui组件库的时候，其中有tooltip和dropdown组件，它们在显示弹出部分的内容时，实际上这部分内容是被放在body根节点下的。而如果放在根节点有时候我们的某一些需求就无法得到实现，不得不将其放在我们指定的地方。例如图例中dropdown出现不随div滚动条滚动的情况一、解决办法这里直接给出解决办法，先介绍tooltip组件，其实两者是差不多的、下面是方法：1、解决tooltip<template> <div> &lt

组件元素<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template>父传子propprops: { identifyCode: { type: String, default: '12

目前主流浏览器不能直接嵌入并且播放FLV文件，所以直接用video标签播放是行不通的。因此提供两种解析方法嵌入一个swf媒体播放文件，并利用该文件来播放你预设的文件。这里推荐dplayer——http://dplayer.js.org/zh/guide.html#flv（亲测同样好用）利用B站开源的flv.js，通过将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后通过Media Source Extensions API 将mp4段提供给HTML5 元素。git

安装npm i crypto-js在utils下创建secret.js文件import CryptoJS from 'crypto-js'// 十六进制密钥const CRYPTOJSKEY = CryptoJS.enc.Utf8.parse('HTKJhtkjHTkj1234') // 加密 function encrypt(plaintText) { var plaintTexts = plaintText var options = { mode: Crypto

父级菜单<template> <div> <ul> <li v-for="(item,index) in asideList" ::key = "index" > <p class="main-title"> <span class="title">{{item.title}}</span> <span class="iconfont icon-arrow-right-1"&g

this.$refs['rainChart'].showLoading({ text: '请稍后......', color: '#327EF3', textColor: '#327EF3', maskColor: 'rgba(28,31,99,0.31)' }) this.$refs['rainChart'].hideLoading();

时间格式处理// 把时间的分秒值去掉export const formatTM = item => { if (item) { let newItem = item.replace(':00.0', '') if (newItem.indexOf('.') > 0) { newItem = newItem.substr(0, 16) } return newItem } else { return '' }}//

需求原型开发工作中有一项，需使用复选框控制echarts的显隐，找了很多办法没有实现直到看到一篇文章，echarts配置项中自带legend可以控制图标的数据显示隐藏因此我们可以通过checkBox的来对selected对象进行操作来修改图标的状态首先配置legend并让他不显示 legend: { data: ['水位', '流量', '温度'], show: false },其次通过组件的checkBox组件..

<el-upload class="upload-demo" :limit="3" :before-upload="beforeUpload" :action="fileUpload" :on-exceed="handleExceed" :on-success="handleSuccessZl" > ...

子组件正常触发$emit传参：// 子组件this.$emit('test',this.param)// 父组件@test='test($event,scoped.row)'当子组件传出多个参数时：如果仍用$event接收，只能接收子组件传出的第一个参数因此我们通过设定为数组来进行接收子组件传来的数据// 子组件this.$emit('test',this.param1，this.param2, this.param3)// 父组件 arguments 是以数组的形式传

添加picker-options属性在data中声明属性disabledDate禁用效果

思路分析点击修改，节点由span变input，input中显示的内容为原节点内容，并获得焦点全选修改后，失去焦点，由input变回span,节点内容修改<h4>那这样我们需要一个数据内容来控制input和span切换的值</h4>数据内容.在接口返回的数据中，添加showInput字段，来控制什么时间切换节点标签Html结构 <el-tree class="tree" :data="t

数据格式是数组这时候渲染出来的数据都是undefined需要提前处理这个数组的数据内容我们查看elementUI 的 table文档之后，发现Table-column Attributes 中包含一个格式化文档的属性questionData(row){ let arr = [] row.file.forEach((item, index)=>{ if (index > 2) { retur..

1.elementUI的树形组件官网样例节点之间是没有连线的，想要实现如下图节点之间出现连线需要自己定义树形插件的样式覆盖el-tree内部的样式类首先要给el-tree添加两个样式类一个添加到el-tree本身的class上，另外一个添加到包裹el-tree的外层div,具体的样式代码如下/* 树形结构节点添加连线 */.tree /deep/ .el-tree-node { position: relative; padding-left: 16px;}.tree...

知识铺垫：计算属性：computed — 数据的二次加工，降低数据的逻辑的复杂程度作用：当模板当中使用较复杂的js表达式进行数据的转换，会造成你的模板逻辑过于复杂，不好维护，所以用计算属性来进行转换，返回一个新的数据，便与你对数据内容进行维护特点：在函数中也可以处理逻辑，也可以返回值，同时在模板中也可以通过调用来获得二次加工的数据优点：计算属性有缓存，如果数据没变化，再次使用不会重新执行场景：当你需要进行复杂逻辑的处理才需要进行计算属性的处理侦听器：watch作用：监听某个数据的变化

如何让组件支持v-model指令前置知识：父组件如何给子组件传值父组件：<template> <my-child :value="title"><my-child></template><script>export default{ name:'my-parent', data(){ return{ title:'父组件数据' } }}<

分析问题原因network中预览的idnetwork中response的id数值不相符原因原因 js有自己的最大安全整数（相应数据数值太大，导致有误差）js在解析数据时会自动执行 json.parse（方法）通过number.MAX_SAFE_INTEGER可以查看js最大安全整数当请求回的数据超过这个数值就会导致不准确解决方案下载json-bigint包来覆盖默认的json.parse方法axios官方文档// `transformResponse` 在传递给 then/c

创建组件.vue文件在template中添加插槽标签并导出组件<template> <span>内容</span> <slot /></template><script> export defalut{ name:组件名 }</script>创建plugin.js插件js文件引入插件文件，创建install属性import 组件名 from '@/components/xxx.vue'exp

插槽：提升组件的复用度，通过提高的方式具名插槽（默认插槽）：当只有一处内容需要填充时候定义组件：my-com<template><header>头部</header><main><slot><slot></main><footer>底部</footer></template>使用组件：<template> <my-com> &lt