- 博客(160)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 react实现Enter发送，Ctrl+Enter换行的textarea输入框
【代码】react实现Enter发送，Ctrl+Enter换行的textarea输入框。
2024-09-03 15:54:07
706
原创 React 全屏问题解决方案
方式1：把整个 body 全屏，真正需要全屏的内容通过样式处理成全屏的样子。这样既可以利用全屏的ESC和自带的退出按钮，又不会存在遮挡弹窗的问题。： 需要全屏的节点部分被传入 screenfull 中，弹窗的层级永远低于全屏，所以被遮挡。方式2：直接iframe嵌入，不会有遮挡问题，但加载会慢点。在退出全屏时，重新设置宽高。
2024-09-03 11:26:04
810
原创 tailwindcss 使用
3.0可不用配置，默认就是该模式，无法关闭。按需加载样式，定义在extend中的样式也一样，没被用到，不会加载。另外，如果在一个页面中，有动态计算的样式，会因为在编译阶段没有该样式导致不生效;这里的需求是：显示卡片个数根据页面宽度自适应，1600及以上显示4个，以下显示3个。模式下，如果样式可预见，可以在某个页面处固定写死那些动态生成的。模式下动态定义的样式不会解析出来。函数 —— （推荐方式）批量生成配置，从而获得对应。这个最大问题在于只能是。
2024-05-22 16:09:54
1447
原创 echarts的坐标轴处理算法
参考原文：https://www.cnblogs.com/vicky-li/p/11653415.html。2、可用于双轴的情况，指定splitNumber，保证左右两边的线没有交叉显示的情况。1、设置echarts显示的最大最小值，让数据显示比较有起伏。处理echarts的一些问题。
2024-01-02 16:34:49
464
原创 elementUI——el-table自带排序使用问题
源码中没有监听default-sort的变化，导致外面数据变更，但表格还是之前的排序操作按钮点亮。），改变日期，触发表格数据更新，发现列的排序还点亮在之前的操作上，没有按照默认来（在我们自己的代码中，手动执行这个代码即可。排序表格默认第一列按降序排（），当点击其他列后（
2023-09-07 19:07:45
1025
原创 移动端 antdMobile tabs + 锚点滚动定位功能
由于tabs是absolute脱离文档流的，如果在第一个区域的时候也要出现，那么需要把tabs的区域空出来，比如下面：第一个内容块设置。antdMobile tabs 当锚点使用中，发现存在一个问题： 最后一个锚点的内容如果高度很小，则选不到最后一个节点。2、当需要滚动到第二个区域块才显示tabs，如果只有一个锚点或者在一个区域内是没有的。增加这种需求的标志位。1、如果已经滚动到最后了，直接选中最后一个节点（参考百度百科的锚点效果）
2023-05-25 16:10:00
1966
原创 解决echarts 在缩放中模糊的问题
1、使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。2、使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理，但显示效果没有renderer : 'svg’好，肉眼可见的感觉有锯齿。在我们的示例中，legent字体设置的是10px，外部通过scale实现放大1.25倍，最终得到字体12px的效果。
2023-05-04 17:35:33
3793
原创 组件等比例放大——scale和zoom
使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理。问题： scale放大，占据宽高不变，导致内容高度不够，锚点定位到最后，菜单上移消失问题。加载完之后，获取放大后的高，在html中设置该高度。还有锚点的交互，和滚动定位，可以定位到。
2023-05-04 10:22:43
1747
原创 elementUI 在移动端使用的一些问题
1、字体顶部被截掉一部分在部分机型上显示正常，大部分都表现为顶部字体被截掉， 原本的height和line-height都是和font-size一样大，改为：.info__bus-name { font-size: 16px; height: 20px; line-height: 20px; }2、ios的问题2.1 el-select下拉框，要点两次才选中//解决 element-ui 下拉框在ios上 点击两次才能选中.el-scrollbar { >.
2022-08-04 10:04:29
6046
原创 dom-to-image 将vue中未显示的组件转成图片， 并上传
1、基本使用npm地址import domtoimage from 'dom-to-image'export function dom2img(node) { return domtoimage.toPng(node, { cacheBust: true }) .then(function(dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img
2022-07-19 17:17:21
7638
原创 element 图标乱码问题
参考： https://blog.youkuaiyun.com/weixin_43845090/article/details/120850617网上大部分解决办法是说将dart-sass替换为node-sass，elementUI官方使用的确实是node-sass，但是node-sass已经不再是主流，并且node-sass经常安装失败。主要原因是dart-sass在打包过程中会将伪元素content中的内容转义，修改配置即可css: { // 避免dart-sass将伪元素中的字符集转义
2022-05-20 09:14:28
1126
3
原创 vue文件使用iconfont
1、导入字体文件到assets中2、main.js 导入import '@/assets/icon/iconfont.css';3、使用注意前面一定要加iconfont，否则是个空框框 <div class="iconfont icon-label"></div>
2022-02-14 15:57:44
599
原创 vue 学习——路由
Vue路由实现原理浅谈vue-router原理路由原理更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：hash和history interface，mode取值其实还有abstract，用于非浏览器的情况。hash方式主要是通过url中的#，在HTML中#是锚点，指向页面中的位置，#后面的数据改变，不会重新请求页面。通过hashchange监听实现更新页面操作。在vue中，hash模式主要是创建HashHistory对象，然后通过调用push和re
2022-02-14 15:53:26
432
原创 elementUI——tab定位和渐变色图标
tab定位问题当tab中的某个内容需要以整个tab来定位时，比如我在tabs栏右上角放一个input组件，这个input是属于某一个tab页中的。1、先改变原始content的定位 ::v-deep .el-tabs__content { position: static; } 2、 tab定位设置成 position: relative3、右上角，组件定位 .input{ position: absolute; right: 20px; top: 10px; }
2022-02-14 15:50:01
749
原创 elementUI ——el-select 如何实现input中label的特殊显示
1、选项列表中的label值官网示例 <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"> <!-- 直接通过插槽写自定义内容--> <span style="f
2022-02-14 15:48:28
2047
原创 忽略埋点记录的ResizeObserver - loop limit exceeded
参考来源：ResizeObserver - loop limit exceeded这个一个良性的报错，可以忽略
2022-02-14 15:42:31
1301
4
原创 vue-cli 3.x 开发插件并发布到 npm
参考博客：https://www.cnblogs.com/wisewrong/p/10186611.html我的目录与上面博客不太一样：index.js 文件import ElementTextarea from './components/ElementTextarea'// 创建 install 函数// vue.use 会默认查找并调用 install 函数ElementTextarea.install = function (Vue) { // 注意：第一个参数是组件名称，我们在
2022-02-14 15:41:23
552
原创 vue使用template模式报错:You are using the runtime-only build of Vue where the template compiler is not ava
vue使用template，报错的问题局部注册这个组件：// 父组件<div> <input type="text" v-model="input" placeholder="please input" /> <test-child :test="test" /></div> // 子组件， 通过局部注册方式components: { testChild: { template: `<div v-bind="$attr
2022-02-14 15:40:05
6839
原创 $attrs中的对象没有变化，但触发了watch监听？
假设$attrs中有个变量info1、当info不管是基本数据类型还是引用数据类型时， 都存在以下问题： 不管这个对象改没改变，watch都认为它改变了<card :info="info"></card>data中的info: {a:1} // 为1 同样有这个问题// 在card组件中监听watch: { '$attrs.info': { handler(newV, oldV){ console.log(newV == oldV)
2022-02-14 15:39:21
2965
原创 自定义公式输入框
需求自定义公式输入框，要求：1、通过点击的方式添加数据和符号；2、自定义输入框中可以像普通输入框那样，在光标位置插入输入；3、用户通过delete和backspace按键可以删除；4、点击输入框，光标定位到最后；
2022-02-08 09:15:55
2247
4
原创 记录一些vue使用中的小点
1、number类型的input标签2、v-model 还是 value/input3、监听按键+点击事件4、elementui 的样式修改5、当用vuex出现死循环的时候，你一定watch了非固定的对象6、watch 表单时，新旧值一样7、vuex 中的getter - 待完善8、如何实现配置化表单 - 待完善9、关于图片的引用10、v-show 和 v-loading 冲突问题11、this.$emit 无效的问题
2022-01-12 11:05:50
614
1
原创 简单实现矩形面积块
利用flex布局构造整个面积图内的各个块。<template> <div class="rec-area-map" :style="parentStyle"> <div v-for="(item, index) in items" :key="item.id" :style="{ width: item.width + 'px', height: item.height + 'px',
2021-12-22 11:26:13
383
原创 vue里面的全局变量那些事
::v-deep .el-main { //FIXME el-main中设置为auto，使得内部组件的阴影设置不显示 overflow: visible; }媒体查询和scss只能 @mixin 不能 @extend
2021-09-13 16:31:16
838
原创 last-child不生效问题
写css的时候碰到一个神奇的问题，first-child生效、但last-child失效。观察样式和代码结构如下：<div class="c0"> <div class="c1"></div> <div class="c1"></div> <div class="loading"></div></div>.c0 .c1:last-child { padding: 10px;}
2021-08-19 11:36:20
5336
1
原创 使用el-table懒加载树形表格时的注意点
先放个简单的el-table例子<el-table ref="refTable" :data="tableData" :load="loadOrgTable" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="orgId" lazy @expand-change="expandChange"></el-table>1、数据显示1、tableData
2021-07-22 20:11:44
3614
1
原创 页面实现 “实时数据响应” 的注意事项
假如我们需要实现一个功能，页面左边是多选列表，页面右边是根据选中的值进行数据请求之后显示的数据。一、普通操作等用户勾选完之后，点击确定按钮后，才向后台发请求，然后右边渲染显示。这种形式，请求都是一个选中列表作为参数。这种操作在用户使用上会存在一个问题：问题一： 用户点击确定后，接口5s之后才返回数据，这个时候用户取消勾选示例4，然后又点击了确定，这时用户要删除的数据4都没有返回，就会导致程序报错。如果采用这种方式，那么我们需要做两件事：1、 确定按钮的防抖2、 在上次数据请求返回前禁用确
2021-07-09 14:37:53
627
原创 动态设置卡片的主题色
需求做一个卡片，可以更换主题色，如下：首先找你的UI切一张背景图，上面底色为白色，下面为透明色，透明部分用于显示修改颜色。代码<template> <div class="card"> <span class="card-title" :style="bgStyle">背景图示例</span> <div class="card-bg" :style="lnBgStyle"></div> </di
2021-06-21 16:52:43
1908
原创 基于el-table的树形表格及js-xlsx实现下载excel功能（二）
这篇主要是利用xlsx下载表格，网上参考的资料挺多的安装xlsxxlsx npm我用到的也就前三个就最简单的使用来说：aoa_to_sheet 就是把一个数组arr塞到一个sheet页中，arr类似于这种结构arr = [ ['姓名', '年龄', '性别'], ['张三', '18', '男'], ['李四', '23', '女'],]json_to_sheet 的json数据长下面这样， 它会自动将键值变成表头，注意键值不能重复arr = [ {'姓名': '张三', '年
2021-06-16 16:53:52
1022
原创 基于el-table的树形表格及js-xlsx实现下载excel功能（一）
一、表格下载需求https://www.npmjs.com/package/xlsx显示饿如果显示的表格和下载的表格一模一样，可以直接使用官方提供的aoa-to-excel ，直接获取表格的DOM作为参数传入即可。但我们下载的excel需要进行首列缩进的处理，新增几列条件列，所以就没法使用上面的方法，而是改用二、方法设置标识1、展开这里展开了3层，每次展开操作，将所有的孩子都打上show为true的标记，show为true即表示该行显示，后续下载时，只需要遍历出树里面show为true的节
2021-06-16 16:16:10
1087
原创 vue 中基于drag drop拖放实现左菜单和右画布的功能
参考vue 中基于html5 drag drap的拖放功能代码<template> <div class="drag"> <el-container> <el-aside width="300px"> <!-- 左边待选菜单区域 --> <ul> <li v-for="item in tags" :key="item">
2021-05-27 19:07:00
1561
2
原创 el-table单元格中加上横向柱状图
1、需求如图：把上面的柱状图改成下面这种，在表格列中显示条形图。2、解决方法首先这个图肯定要对这一列进行处理，这里的表格用的是elementUI的table，官方文档提供了自定义列样式的方法通过这个方法动态的改变单元格的背景即可达到要求！但是，实际操作中发现，设置背景是满单元格的，没法通过设置高度达到上面的效果！但是我们可以通过linear-gradient，以蓝色为底色，白色去覆盖多余的蓝色也可以达到目的，所以就有下面的代码：// 白色是从上到下覆盖的，要显示蓝色部分用透明色过渡； 蓝
2021-05-11 15:16:31
1987
原创 vue-draggable-resizable 插件使用总结
一、安装和基本用法npm官方文档npm install --save vue-draggable-resizable1、全局注册组件// main.js中写入：import Vue from 'vue'import VueDraggableResizable from 'vue-draggable-resizable'// 可选择导入默认样式import 'vue-draggable-resizable/dist/VueDraggableResizable.css'Vue.compon
2021-04-13 14:35:00
14042
4
原创 echart 动态改变主题json时无效问题
解决方法：加上this.myChart.dispose() initChart() { if(this.myChart){ // 重要 释放之前的图表实例， 否则改变的主题无效果 this.myChart.dispose() } var dom = this.$refs.chart // 注册主题 - 可从主题编辑器中获取json echarts.registerTheme('customed', this.themeObj)
2021-02-22 16:43:22
780
原创 在el-table中href跳转与row-click事件冲突时
需求：表格内某项点击时，不触发el-table的行点击事件。举个栗子：toExplor(id){ //根据id return 相应的网址}<el-table-column label="浏览器" > <template slot-scope="scope"> <el-link :href="toExplor('chrome')">谷歌浏览器</el-link> <el-link :href="toExplor('IE')">I
2021-02-09 15:35:00
1063
算法图解pdf（非扫描）
2018-09-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人