dmr123456的博客

原创 CSS实现的数量对比图

【代码】CSS实现的男女数量对比图，接壤处斜角展示。

原创 umi react菜单配置（router文件路由+接口路由组合）

【问题描述】：项目路由由前端路由文件以及后端接口获取到的路由组合而成，接口获取到的路由菜单选中无标记，且会自动折叠。如果接口返回的菜单格式与前端路由文件中的有些许不一致，则需重写。，重写菜单选中、打开逻辑。,对数据进行改造组合。

原创 VUE Element ui el-switch文字在开关里面显示

UE Element ui el-switch文字在开关里面显示

原创 antd3.X Upload组件上传的文件下载

问题描述】：使用Upload组件时，默认不显示下载图标不能下载上传的文件。是否展示文件列表, 可设为一个对象，用于单独设定。【要 求】：增加上传文件的下载。在组件的props属性中增加。最后对下载处理方法进行实现。这样就显示下载图标了。还要增加下载处理方法。...

原创 vue 项目页面增加水印

vue添加水印

原创 Element UI tree组件折叠

element ui tree 折叠

原创 vue拨打电话

需求：点击电话号码，弹出对话框，确定后直接调用手机拨打电话功能（ps：不允许弹出是否允许调用手机通讯录的提示）。验证后仅思路3满足需求。思路1：---简单但不满足（不允许弹出是否允许调用手机通讯录的提示）需求window.location.href = 'tel:' + 8888410;思路2：-------方法存在问题 <a id="call" @click="showDialog" style="color: #336699">8888410&l....

原创 后端返回的字节流图片处理

1、字节流图片转换为base64 const src = "data:image/png;base64," + btoa( new Uint8Array(res).reduce( (data, byte) => data + String.fromCharCode(byte), "" ) );图片可直接使用img标签显示出来

原创 js小技巧

1、用??代替||,用于判断运算符左侧的值为null或undefined时，才返回右侧的值??运算符是ES2020引入，也被称为null运算符它的行为类似||,但是更严||运算符是左边是空字符串或false或0等false值，都会返回后侧的值。而??必须运算符左侧的值为null或undefined时，才会返回右侧的值，因此0||1的结果是1,0??1的结果为0.2、使用?.简化&&和三元运算符?.也是ES2020引入，有人称为链判断运算符。?.直接在链式调用的时候判断

原创 vue，绘制内部填充圆形（​​带外阴影）的环形

<template> <div class="circular" :style="{ border: border }"> <div class="info" :style="{ 'box-shadow': boxShadow }"> <div class="text"> <el-row class="textAlign"> <el-col :span="24" .

原创 antv x6自定义节点(使用vue渲染节点）

1、安装@antv/x6-vue-shape# npmnpm install @antv/x6-vue-shape# yarnyarn add @antv/x6-vue-shape# 在 vue2 下还需要安装 @vue/composition-apiyarn add @vue/composition-api --dev主文件引入@antv/x6-vue-shapeimport "@antv/x6-vue-shape";安装并应用该包后，指定节点的shape为vue-...

原创 VUE中this、$el

$el用于获取vue实例挂载的dom元素，this.$el只在mounted中才有效this指向当前组件的实例参考：vue组件中this和$el指向_她说她说的博客-CSDN博客

原创 vue中文本超过一行省略，并悬浮显示完整文本，未超过一行的无悬浮

<template> <div class="tooltip-wrap"> <el-tooltip ref="tlp" :content="text" effect="dark" :disabled="!tooltipFlag" :placement="placement" > <p class="over-flow" @mouseenter="visibilityChan.

原创 vue中引入echart图及遇到的问题记录

引入tree图引入echarts图，需要指定容器有明确的宽高。根据官方文档，需要先定义一个<div>节点，并使用CSS使得该节点具有宽度和高度。，初始化的时候，传入该节点，图标的大小默认即为该节点的大小，除非声明了opts.width或opts.height将其覆盖。（引自官网：Handbook - Apache ECharts）。<template> <div id="chart-panel" :class="className" :style="{ hei

原创 VUE Element UI中el-input-number组件无法实时触发change事件

el-input-number组件添加必填校验，不使用组件自带增减符号进行填充，手动填充值无法及时清除校验提示，组件失去焦点时才会消失。希望在输入值之后即时清除校验提示。解决方案 <el-input-number v-model="form.eventDisposalRange" :min="1" label="描述文字" :disabled="edit" @input.native="eventDisposalRangeChange()

原创 vue 使用element ui样式无法覆盖问题记录

1、覆盖el-tab字体样式使用/deep/样式穿透<style lang="scss" scoped>/deep/ .el-tabs__item { font-size: 19px; color: rgba(0,0,0,0.85);}报错：解决方案：使用::deep 替换/deep/<style lang="scss" scoped>::v-deep .el-tabs__item { font-size: 19px; color:.

原创 使用nvm解决多个版本node切换问题

nvm下载地址：https://github.com/coreybutler/nvm-windows/releases安装nvmnode_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/

原创 vue+ElementUI 复杂表单的验证、数据提交问题

原创 git常用命令

1、本地找不到远程仓库分支，执行下列命令进行同步git remote update origin --prune

原创 addEventListener()方法

addEventListener()方法用于向指定元素添加事件句柄。使用removeEventListener()方法来移除addEventListener()方法添加的事件句柄。注：IE8及更早的IE版本不支持addEventListener()方法。语法element.addEventListener(event,function,useCapture)event 必须。字符串，指定事件名。“click”、"mousedown"等 function 必须。指定要触发

原创 VUE--列表渲染（v-for）及key的使用

v-for用法<div v-for="item in items"> {{item.text}}</div>或<div v-for="(item,index)in items"> {{item.text}}</div>v-for的默认行为会尝试原地修改元素而不是移动它们，即“就地更新”策略。如果数据项的顺序发生改变，vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。也就是说

原创 事件穿透与禁止穿透(e.stopPropagation()、e.preventDefault()、return false)

问题：点击立即预约按钮会同时触发查看详情事件解决方案：在顶层事件中添加禁止穿透事件可防止触发底层事件。const goAppointment = e => { e.stopPropagation(); // 禁止事件冒泡};const AuthenticateItem = ({ appraisalType, data, onClick = () => {} }) => ( <div className={styles.lawyerItem} ..

原创 ‘yield‘ expression implicitly results in an ‘any‘ type because its containing generator lacks a ...

解决方案：export interface ResponseGenerator { config?: any, data?: any, headers?: any, request?: any, status?: number, error?: any, statusText?: string, records?: any, pageNum?: any, total?: any}const response:ResponseGenerator = yield .

原创 常用校验规则及应用

电话号码校验（座机、手机号） /** react中的应用*/<FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} label="电话"> {form.getFieldDecorator('contactPhone', { rules: [{ pattern: /^((\d{11})|(\d{7,8})|(0\d{2,3}-?\d{7,8})|(0\d{2,3})(\d{7,8}))$..

原创 相等运算符==与严格运算符===的使用

区别：==比较两个值是否相等； ===比较它们是否为‘同一个值’。如果两个值不是同一类型，===直接返回false,而==会将它转换成同一个类型，再使用===进行比较。严格相等运算符1、不同类型的值两个值得类型不同，直接返回false.1 === '1';//false2、同一类的原始类型值同一类型的原始类型值（数值、字符串、布尔值）比较时，值相同就返回true,不同就返回false。1 === 0x1; // trueNaN === NaN; ...

原创 antd 和vue post请求下载表单文件

// 创建虚拟表单，使用a标签方式下载postDownload= async (url, params)=> { const request = { body: JSON.stringify(params), method: 'POST', headers: { 'Content-Type': 'application/json;charset=UTF-8' } } const response = await fetch(u...

原创 文本中回车的换行符号↵，在react table中如何处理（react中）

文本框中输入的回车符号在react table换行，无换行符号时则自动换行。{ title: '反馈内容', dataIndex: 'content', width: '50%', render(val) { let br = <br></br> let content = val.split('\n') let result = '' for (let j

原创 Image属性之resizeMode,resizeMethod