sinat_33255495的博客

利用 uni-forms-item ，在 picker 里边套 input 实现。

给echarts图表设置点击事件后，会导致出发多次请求，给点击事件设置 off 即可解决。

注意：监听的 georoam方法的前提：echarts实现的中国地图，option地理坐标组件的配制是geo。

【代码】echarts 地图流向图的实现方法。

【代码】echarts实现地图省份轮播。

我们在写弹出的遮罩层时，下方的页面依然可以滚动，这时我们就要想些办法来实现了。

qiun-data-charts 组件去掉 tooltip 前名称的样式：上图说明改之前的样子：改之后的样子：实现方法其实很简单，只需要加个属性就可以。只是之前没接触过，感觉有点难~~~完整的代码：

通过嵌套表头将两个标题设置在一个单元格内，再通过 CSS 样式增加斜线效果。知识点：el-table、::before、transform。

很多人不清楚中国地图要怎么实现，其实 echarts 已经为我们封装好了，只要我们配置好各省数据就可以快捷实现了。首先我们先来实现中国地图：（1）引入 echarts 及中国地图（2）配置地图数据实现的样子：（1）根据数值区间配置不同的颜色核心代码：（2）根据最大值和最小值，自动计算两个颜色的渐变核心代码：

【代码】解决 element ui 表格加载中与暂无数据同时显示的问题。

但是这次需求的是通过 tab 切换同时切换 el-date-picker,第一次初始化时是成功了，但每当点击 tab 就会重现上述遮盖问题。经过排查发现，tab 切换时时间筛选的焦点没有消失，导致绑定到 body 失败。此时我们只需清除焦点即可。

学习 vue3 源码，是不是一时不知道从哪里入手？不了解哪些有依赖关系，哪些能做什么事？今天我们就 vue 项目的初始化流程进行分析。

手把手教你准备源码调试环境安装，分享源码学习的方法

echarts 坐标轴滚动的实现方法

这里只摘出了seies的配置项。

通过在 canvas 上绘制出字体，设置好样式，然后以图片的样式导出，最后用图片作为水印层的背景图。

【代码】echarts tooltip 超出可视范围的解决方案。

代码】vant 二次封装实现选择月的日期组件。

有数据时记得调用 hideLoading() 否则图表将无法展示。实现原理是在图表上再增加一个图层，图层上写着暂无数据的提示。

需求场景：有一个tab切换，每一个tab下都有一个 下拉框，只是一个是多选一个是单选，问题是当切换tab标签的时候，下拉框的样式不会被清空。解决方案：简单到吐血，却困了我好几天。只需要在 el-select 上加一个 key 就可以完美解决。我想了一下，出现这个问题的原因就是组件没有重新渲染，加上 key 可以定位渲染，仅此而已。...

由于 el-table-column 上包裹了一层 div 导致，只要把div去掉即可。我实现了一个自动滚动的效果，代码也直接贴进去了。

很多场景下我们会重设滚动条的样式，下边把具体实现代码贴出来：实现效果：

走马灯的效果自己手动实现也并难，只是代码量比较大，要考虑的逻辑比较多，所以更多情况下我们会考虑用现有的框架来实现，比如 ElementUI。但在使用的过程中，我们通常需要的走马灯样式与官方提供的并不相同，尤其是指示器的效果。今天我来记录一下，自定义的指示器实现方法。实现效果：上方 tab 切换的时候，下方的文字部分会跟着变，也就是走马灯的效果，文字部分是示意，并没有做对应的 mock 数据，可忽略。tab 切换部分走马灯部分：至此，自定义的 tab 切换就与走马灯效果绑定到一起了，动手试试吧。...

其实很简单，只需要在 options 中加入配置 dataZoom 即可。亲测有效。

vue 中实现回到顶部的两种方式：（1）锚点方式通过点击锚点回到指定位置：<template> <div id="topAnchor" ref="faultTree" class="wrap"> <a id="TOPUp" href="#topAnchor"> <img style="width: 100%;height: 100%;" src="../../../../assets/top.png" alt="">

form 表单加验证Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-inpu

这个截图有点类似下载的那种，可以按照自己的需要在代码中指定要截屏的部分，点击截图会自动保存到本地，更贴切的说法可以说是快照。不同于我们常用的截图软件，这点要注意。实现结果如图：html2canvas 是 JavaScript 实现页面截图的类库，html2canvas 使你可以直接在用户浏览器上截取网页或部分网页的“屏幕快照”。屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上可用的信息来构建屏幕截图。具体实现方式如下：（1）安装 html2can

虚拟DOM在当下流行的前端框架中是非常重要的概念，相信所有前端人都会有所耳闻。下面我们来研究一下 vue 中的虚拟 DOM 是怎样的。什么是虚拟 DOM我们知道 DOM 对象被称作文档对象模型，是用来操作 html 元素的。将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。而虚拟 DOM 简单来说就是用一个 JS 对象来描述一个 DOM 节点，如下示例：<div class="a" id="b">我是内容</div>{ tag:'div',

vue3 正式面市已经有一段时间了，但作为前端人却刚刚开始研究 vue3 简直太 out 了，只能老鸟晚飞靠勤来补拙了。vue 的双向绑定是我们乐于使用 vue 的重要原因之一，理解双向绑定背后的原理可以帮助我们更好的应用vue来开发。vue2.x 的双向绑定是基于 JavaScript 的 Object.defineProperty 的get，set属性，而升级后的vue3.x 改为Proxy代理。为什么要用Proxy重构？我们先来回顾一下 Object.defineProperty 的定义 :

（1）el-table 中增加 :cell-style 属性<el-table :cell-style="columnStyle" :default-sort="{prop: 'id', order: 'descending'}" style="width: 100%;">（2）在methods定义处理方法：cellStyle(row) { if (row.column.label === '审核结果' && row.row.res

微信小程序上没有类似 html 锚点链接的方法，但在一些开发场景下却又有这样的需求，我们只能想办法来实现曲线救国了。这篇文章主要介绍了实现跳转页面到其它页面的指定位置的方法(示例代码)以及相关的经验技巧。实现思路在微信小程序中，使用 scroll-view 实现长页面的标记跳转，锚点标记主要是使用 的 scroll-into-view 属性。实现锚点跳转主要以下几点：1、最外层容器使用 scroll-view2、赋值scroll-into-view，如：3、设置 scroll-view 滚动方向

登录认证简单介绍登录认证的整个过程有两个部分组成，分别是用户认证和权限认证。用户认证是对用户的相关登录认证，权限认证是对已经登录的用户的操作权限识别与限制。用户认证：核对数据库用户名和密码的相关信息是否正确。权限认证：查看用户是否具有相应的操作权限，例如：收到用户修改信息的请求，会首先判断用户是会否具有ROLE_DELETE权限，如果没有则告诉客户端没有访问权限；另外还有菜单权限、按钮权限等等。实现思路1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码

哪些情况需要封装组件一段代码在项目中出现两次就开始考虑是否应该进行封装，出现三次就肯定要封装，大到一个页面，一个组件，小到一个function和一个css样式。封装原则1、单一原则：负责单一的页面渲染2、多重职责：负责多重职责，获取数据，复用逻辑，页面渲染等3、明确接受参数：必选，非必选，参数尽量设置以_开头，避免变量重复4、可扩展：需求变动能够及时调整，不影响之前代码5、代码逻辑清晰6、封装的组件必须具有高性能，低耦合的特性7、组件具有单一职责：封装业务组件或者基础组件，如果不能给这个组

在vue项目中的template中注释为 js 的注释方法，解决办法为在 setting.json中加入以下代码 "files.associations": {​ "*.vue": "html"​ }

用饿了吗el-row，el-col布局页面的时候会因为el-col的内容高度不统一，造成布局混乱，解决方案就是在el-row中添加type=“flex”。<el-row type="flex"> <el-col> <textarea autocomplete="off" class="el-textarea__inner" style="min-height: 33.2333px;"></textarea> </el-col> &lt

原来用的少不知道，最近新搭建的项目，使用了各种版本的 vue ,每次导入 sass 都会出现问题，也是让我醉了。这一次是因为公司使用了 vue/cli 4.x 搭建的项目，我安装 sass 以后因为配置的问题让我的项目死活起不来，在网上找了各种改善方法都无效。最终让我试出来了，简直太不容易了，希望在网上发帖的伙伴们遇到问题一定要把查到的方法试过以后发现真的有用再转发，不要对其他人造成误导啊。都是学习工，不容易啊，搜到的每一篇帖子都是精华才好。报错信息看到这种报错第一反应肯定是配置的问题，我搜到的错误配

问题描述：vue项目运行后，在IE浏览器打开，页面为空白。分析问题成因Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-pol

使用vue-cli模板创建新项目：vue init webpack myvue这里使用的是 vue-cli 2.0配置流程：1、先安装sacc依赖npm install sass-loader --save-devnpm install node-sass --sava-dev2、找到配置文件 utils.js文件位于 根目录下 /build/utils.js3、找到配置项：scss: generateLoaders(‘sass’)把它替换成如下代码并保存就可以了：scss: g

（1）vue-cli 2系列创建 vue 项目vue init webpack myProject （2）npm 安装 sass 依赖包npm install sass-loader node-sass --save-dev（3）修改配置在build文件夹下的webpack.base.conf.js的rules里面添加配置： { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }（4）使用使用scs

年龄大了，果然脑力是跟不上了，这个图表已经用过几次了，每次还是或多或少的出现问题，现在把 echarts 在 vue 中的详细使用步骤记录下来，以备不时之需吧。echarts 图表绘制的思路是：1 获取一个有宽高的 DOM 元素 -->2 初始化echarts实例(echarts.init) -->3 指定图表的配置项和数据(option) -->4 使用刚指定的配置项和数据显示图表(setOption(option))1、安装npm install echarts -