HYeeee的博客

方式1：把整个 body 全屏，真正需要全屏的内容通过样式处理成全屏的样子。这样既可以利用全屏的ESC和自带的退出按钮，又不会存在遮挡弹窗的问题。： 需要全屏的节点部分被传入 screenfull 中，弹窗的层级永远低于全屏，所以被遮挡。方式2：直接iframe嵌入，不会有遮挡问题，但加载会慢点。在退出全屏时，重新设置宽高。

3.0可不用配置，默认就是该模式，无法关闭。按需加载样式，定义在extend中的样式也一样，没被用到，不会加载。另外，如果在一个页面中，有动态计算的样式，会因为在编译阶段没有该样式导致不生效;这里的需求是：显示卡片个数根据页面宽度自适应，1600及以上显示4个，以下显示3个。模式下，如果样式可预见，可以在某个页面处固定写死那些动态生成的。模式下动态定义的样式不会解析出来。函数 —— （推荐方式）批量生成配置，从而获得对应。这个最大问题在于只能是。

marquee标签是HTML标签中创建文字滚动的标签。

由于tabs是absolute脱离文档流的，如果在第一个区域的时候也要出现，那么需要把tabs的区域空出来，比如下面：第一个内容块设置。antdMobile tabs 当锚点使用中，发现存在一个问题： 最后一个锚点的内容如果高度很小，则选不到最后一个节点。2、当需要滚动到第二个区域块才显示tabs，如果只有一个锚点或者在一个区域内是没有的。增加这种需求的标志位。1、如果已经滚动到最后了，直接选中最后一个节点（参考百度百科的锚点效果）

1、使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。2、使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理，但显示效果没有renderer : 'svg’好，肉眼可见的感觉有锯齿。在我们的示例中，legent字体设置的是10px，外部通过scale实现放大1.25倍，最终得到字体12px的效果。

使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理。问题： scale放大，占据宽高不变，导致内容高度不够，锚点定位到最后，菜单上移消失问题。加载完之后，获取放大后的高，在html中设置该高度。还有锚点的交互，和滚动定位，可以定位到。

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 { >.

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

参考博客：https://www.cnblogs.com/wisewrong/p/10186611.html我的目录与上面博客不太一样：index.js 文件import ElementTextarea from './components/ElementTextarea'// 创建 install 函数// vue.use 会默认查找并调用 install 函数ElementTextarea.install = function (Vue) { // 注意：第一个参数是组件名称，我们在

需求自定义公式输入框，要求：1、通过点击的方式添加数据和符号；2、自定义输入框中可以像普通输入框那样，在光标位置插入输入；3、用户通过delete和backspace按键可以删除；4、点击输入框，光标定位到最后；

先放个简单的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

假如我们需要实现一个功能，页面左边是多选列表，页面右边是根据选中的值进行数据请求之后显示的数据。一、普通操作等用户勾选完之后，点击确定按钮后，才向后台发请求，然后右边渲染显示。这种形式，请求都是一个选中列表作为参数。这种操作在用户使用上会存在一个问题：问题一： 用户点击确定后，接口5s之后才返回数据，这个时候用户取消勾选示例4，然后又点击了确定，这时用户要删除的数据4都没有返回，就会导致程序报错。如果采用这种方式，那么我们需要做两件事：1、 确定按钮的防抖2、 在上次数据请求返回前禁用确

需求做一个卡片，可以更换主题色，如下：首先找你的UI切一张背景图，上面底色为白色，下面为透明色，透明部分用于显示修改颜色。代码<template> <div class="card"> <span class="card-title" :style="bgStyle">背景图示例</span> <div class="card-bg" :style="lnBgStyle"></div> </di

这篇主要是利用xlsx下载表格，网上参考的资料挺多的安装xlsxxlsx npm我用到的也就前三个就最简单的使用来说：aoa_to_sheet 就是把一个数组arr塞到一个sheet页中，arr类似于这种结构arr = [ ['姓名', '年龄', '性别'], ['张三', '18', '男'], ['李四', '23', '女'],]json_to_sheet 的json数据长下面这样， 它会自动将键值变成表头，注意键值不能重复arr = [ {'姓名': '张三', '年

一、表格下载需求https://www.npmjs.com/package/xlsx显示饿如果显示的表格和下载的表格一模一样，可以直接使用官方提供的aoa-to-excel ，直接获取表格的DOM作为参数传入即可。但我们下载的excel需要进行首列缩进的处理，新增几列条件列，所以就没法使用上面的方法，而是改用二、方法设置标识1、展开这里展开了3层，每次展开操作，将所有的孩子都打上show为true的标记，show为true即表示该行显示，后续下载时，只需要遍历出树里面show为true的节

参考vue 中基于html5 drag drap的拖放功能代码<template> <div class="drag"> <el-container> <el-aside width="300px"> <!-- 左边待选菜单区域 --> <ul> <li v-for="item in tags" :key="item">

1、需求如图：把上面的柱状图改成下面这种，在表格列中显示条形图。2、解决方法首先这个图肯定要对这一列进行处理，这里的表格用的是elementUI的table，官方文档提供了自定义列样式的方法通过这个方法动态的改变单元格的背景即可达到要求！但是，实际操作中发现，设置背景是满单元格的，没法通过设置高度达到上面的效果！但是我们可以通过linear-gradient，以蓝色为底色，白色去覆盖多余的蓝色也可以达到目的，所以就有下面的代码：// 白色是从上到下覆盖的，要显示蓝色部分用透明色过渡； 蓝

一、安装和基本用法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

需求：表格内某项点击时，不触发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

参考：VUE代码格式化配置vetur、eslint、prettier的故事需安装vetur、eslint、prettier 的vscode 插件，以及npm install eslintvscode的setting.json文件这个文件格式化的时候，能处理：js的双引号变单引号，去掉尾部; ， 解决space-before-function-parent:去掉函数括号前面的空格{ "[javascript]": { "editor.defaultFormatter": "

vue-grid-layout中文文档我需要用到这里面的可拖拽的效果。碰到的问题在安装完这个插件之后，在IE上无法打开，并报错缺少：，最终是下面这篇文章解决问题Vue项目下IE报错 SCRIPT1003: 缺少 ‘:’，导致页面空白的解决方案主要原因就是第三方库的兼容性问题，把vue-grid-layout引入到vue.config.js文件下的transpileDependencies集合中:module.exports = { ... transpileDependencies: [

瀑布流的参考实现可以看这篇博客：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

当一个容器中设置了flex的justify-content:center ，并且设置overflow时，看下面这个代码：<style> .test{ height:100px; border:1px solid #559; overflow:auto; /** 下面是垂直水平居中 */ display: flex; flex-direction: column; align-

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

测试代码假使我们现在需要对一个数组进行过滤，过滤掉其中为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

1、在vue中使用wangEditor网上的资料一堆，但基本都是wangEditor3的运用，wangEditor4只需要把customConfig 改成config即可。例如：关于在vue项目中使用wangEditor2、标题样式、斜体样式不生效感谢文章：https://blog.youkuaiyun.com/weixin_44258964/article/details/103213167原因：设置的全局样式导致样式失效解决：重新对编辑器的样式进行设置，覆盖全局即可通过查找原始默认样式：webkit内

1-3是3个tab页，通过对el样式的修改，去掉了选中状态的蓝线和灰色线， 要实现的箭头效果如下：想法：尝试性代码1、如果你的自定义tab宽度是固定的，那么可以使用以下代码实现2、但我这里的需求就是不能固定宽度的// 处理箭头位置 getAllTabWidth(){ const paddingWidth = 28 , magleftWidth = 45 return this.$refs.dataTabTitle.map(item => item.offset