- 博客(153)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 elementUI——el-table自带排序使用问题
源码中没有监听default-sort的变化，导致外面数据变更，但表格还是之前的排序操作按钮点亮。），改变日期，触发表格数据更新，发现列的排序还点亮在之前的操作上，没有按照默认来（在我们自己的代码中，手动执行这个代码即可。排序表格默认第一列按降序排（），当点击其他列后（
2023-09-07 19:07:45
720
原创 移动端 antdMobile tabs + 锚点滚动定位功能
由于tabs是absolute脱离文档流的，如果在第一个区域的时候也要出现，那么需要把tabs的区域空出来，比如下面：第一个内容块设置。antdMobile tabs 当锚点使用中，发现存在一个问题： 最后一个锚点的内容如果高度很小，则选不到最后一个节点。2、当需要滚动到第二个区域块才显示tabs，如果只有一个锚点或者在一个区域内是没有的。增加这种需求的标志位。1、如果已经滚动到最后了，直接选中最后一个节点（参考百度百科的锚点效果）
2023-05-25 16:10:00
1214
原创 解决echarts 在缩放中模糊的问题
1、使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。2、使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理，但显示效果没有renderer : 'svg’好，肉眼可见的感觉有锯齿。在我们的示例中，legent字体设置的是10px，外部通过scale实现放大1.25倍，最终得到字体12px的效果。
2023-05-04 17:35:33
2646
原创 组件等比例放大——scale和zoom
使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理。问题： scale放大，占据宽高不变，导致内容高度不够，锚点定位到最后，菜单上移消失问题。加载完之后，获取放大后的高，在html中设置该高度。还有锚点的交互，和滚动定位，可以定位到。
2023-05-04 10:22:43
1114
原创 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
5588
原创 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
6241
原创 element 图标乱码问题
参考： https://blog.csdn.net/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
1005
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
538
原创 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
354
原创 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
589
原创 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
1798
原创 忽略埋点记录的ResizeObserver - loop limit exceeded
参考来源：ResizeObserver - loop limit exceeded这个一个良性的报错，可以忽略
2022-02-14 15:42:31
1193
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
477
原创 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
6601
原创 $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
2365
原创 自定义公式输入框
需求自定义公式输入框，要求：1、通过点击的方式添加数据和符号；2、自定义输入框中可以像普通输入框那样，在光标位置插入输入；3、用户通过delete和backspace按键可以删除；4、点击输入框，光标定位到最后；
2022-02-08 09:15:55
1905
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
528
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
314
原创 vue里面的全局变量那些事
::v-deep .el-main { //FIXME el-main中设置为auto，使得内部组件的阴影设置不显示 overflow: visible; }媒体查询和scss只能 @mixin 不能 @extend
2021-09-13 16:31:16
646
原创 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
4855
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
3302
1
原创 页面实现 “实时数据响应” 的注意事项
假如我们需要实现一个功能，页面左边是多选列表，页面右边是根据选中的值进行数据请求之后显示的数据。一、普通操作等用户勾选完之后，点击确定按钮后，才向后台发请求，然后右边渲染显示。这种形式，请求都是一个选中列表作为参数。这种操作在用户使用上会存在一个问题：问题一： 用户点击确定后，接口5s之后才返回数据，这个时候用户取消勾选示例4，然后又点击了确定，这时用户要删除的数据4都没有返回，就会导致程序报错。如果采用这种方式，那么我们需要做两件事：1、 确定按钮的防抖2、 在上次数据请求返回前禁用确
2021-07-09 14:37:53
519
原创 动态设置卡片的主题色
需求做一个卡片，可以更换主题色，如下：首先找你的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
1487
原创 基于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
831
原创 基于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
830
原创 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
1348
2
原创 el-table单元格中加上横向柱状图
1、需求如图：把上面的柱状图改成下面这种，在表格列中显示条形图。2、解决方法首先这个图肯定要对这一列进行处理，这里的表格用的是elementUI的table，官方文档提供了自定义列样式的方法通过这个方法动态的改变单元格的背景即可达到要求！但是，实际操作中发现，设置背景是满单元格的，没法通过设置高度达到上面的效果！但是我们可以通过linear-gradient，以蓝色为底色，白色去覆盖多余的蓝色也可以达到目的，所以就有下面的代码：// 白色是从上到下覆盖的，要显示蓝色部分用透明色过渡； 蓝
2021-05-11 15:16:31
1664
原创 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
12194
2
原创 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
606
原创 在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
864
原创 vscode 配置格式化以及eslint文件
参考：VUE代码格式化配置vetur、eslint、prettier的故事需安装vetur、eslint、prettier 的vscode 插件，以及npm install eslintvscode的setting.json文件这个文件格式化的时候，能处理：js的双引号变单引号，去掉尾部; ， 解决space-before-function-parent:去掉函数括号前面的空格{ "[javascript]": { "editor.defaultFormatter": "
2021-02-08 10:32:53
1305
原创 vue-grid-layout 的使用
vue-grid-layout中文文档我需要用到这里面的可拖拽的效果。碰到的问题在安装完这个插件之后，在IE上无法打开，并报错缺少：，最终是下面这篇文章解决问题Vue项目下IE报错 SCRIPT1003: 缺少 ‘:’，导致页面空白的解决方案主要原因就是第三方库的兼容性问题，把vue-grid-layout引入到vue.config.js文件下的transpileDependencies集合中:module.exports = { ... transpileDependencies: [
2021-01-04 17:38:50
12565
5
原创 vue中实现瀑布流
瀑布流的参考实现可以看这篇博客：3种方式实现瀑布流布局1、利用css实现瀑布流/**flex布局实现 */.box { display: flex; align-items: center; flex-flow:column wrap; height: 100vh; // 为啥要设置100vh才有效果}.item { border: 1px solid #5592e5; margin: 10px; width: calc(100%/3 - 20p
2020-12-25 09:28:58
4990
6
原创 当flex的justify-content遇上overflow
当一个容器中设置了flex的justify-content:center ，并且设置overflow时，看下面这个代码：<style> .test{ height:100px; border:1px solid #559; overflow:auto; /** 下面是垂直水平居中 */ display: flex; flex-direction: column; align-
2020-12-15 15:31:47
1823
1
原创 animate.css 使用记录
1、animate.css官网2、vue使用animate.css没有效果一定要加上前缀animate__， transition中使用也要记得加。// 1 、安装npm i animate.css -s// 2、main.js 中加入import animated from 'animate.css'// 注册为全局组件Vue.use(animated)// 3、使用<router-view id="router-animate" class="animate__animat
2020-12-07 09:59:35
206
原创 for 和 filter 的效率哪个更高？
测试代码假使我们现在需要对一个数组进行过滤，过滤掉其中为0的部分，用作比较的for循环和filter的代码如下：var result = Array(500).fill(0)var result1 = [...result]console.time('for循环')var a = []for(var i=0; i<result.length; i++){ if(result[i] === 1){ a.push(result[i]) }}console.timeEnd('for
2020-12-03 15:57:18
3795
原创 wangEditor的一些坑记录
1、在vue中使用wangEditor网上的资料一堆，但基本都是wangEditor3的运用，wangEditor4只需要把customConfig 改成config即可。例如：关于在vue项目中使用wangEditor2、标题样式、斜体样式不生效感谢文章：https://blog.csdn.net/weixin_44258964/article/details/103213167原因：设置的全局样式导致样式失效解决：重新对编辑器的样式进行设置，覆盖全局即可通过查找原始默认样式：webkit内
2020-11-30 11:32:35
6340
算法图解pdf（非扫描）
2018-09-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人