- 博客(20)
- 收藏
- 关注
RSS订阅原创 element plus按需导入的坑
element plus版本2.1.8，用了官网的方法，靠unplugin-auto-import和unplugin-vue-components实现按需导入后，因为element plus默认是英文，所以要转成中文。此时，官网给了两个方法：方法一在main.js里添加如下代码。如果你是按需导入，千万别用，直接破功变成全局注册了。用了以后打包，包变大了两兆多。import ElementPlus from 'element-plus'import zhCn from 'element-plus/e
2022-04-12 23:38:24
3429
原创 webpack5优化学习（三）——如何压缩体积
一、压缩体积1、压缩js、css、html、图片js、css、html、图片，都有插件可以压缩。可用的插件有：js：terser-webpack-plugincss：optimize-css-assets-webpack-pluginhtml：html-webpack-plugin图片：image-webpack-loader安装好后的代码配置如下：const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-web
2022-03-30 16:35:34
1408
原创 webpack5优化学习（二）——如何编译提速
编译提速缩小查找范围extensionsrequire和import的时候可以省略扩展名，然后查找文件时的先后顺序会根据extensions的配置进行比如：resolve: { extensions: ['.js', '.jsx', '.json'],//指定文件的扩展名,找不到会报错}alias配置别名比如，当你想直接用【import “bootstrap”】或者【require(“bootstrap”)】引入bootstrap的css时，webpack.config.j
2022-03-27 23:48:02
1386
原创 webpack5优化学习（一）——可以帮助分析打包数据的插件
基于webpack5的优化分析打包数据有几个插件可以帮助你分析数据：1. friendly-errors-webpack-plugin及node-notifier更友好的错误提示插件webpack.config.jsconst FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');const notifier = require('node-notifier');module.export = {
2022-03-26 00:25:24
1944
原创 element ui表单验证原理
1.获取用户传的rules进行验证，主要是安装了async-validator插件。2.点击提交按钮验证所有表单，主要是触发了父组件el-form的validate，validate会查找所有el-form-item，然后调用el-form-item的validate。el-form.vuemethods:{ validate(cb){ let r = this.$broadcast('elFormItem').every(item=>item.valid
2022-03-15 11:09:13
2798
原创 iview表格固定原理
本来以为这种表格固定就是靠css就可以了，但发现主流的一些组件显然不是这么搞的，还是拿js操控的。cloneNode是原生js，默认克隆父节点，如果传了true会连子节点一起拷贝。以固定头部为例，表格固定原理是，拷贝出一个空的table父节点，再把要固定的节点取出来，appendChild进这个table节点，再用固定定位放到头部即可。mounted() { if (this.height) { // 固定表头必须有height属性 this.table = this.$refs.
2022-03-13 20:56:00
947
原创 element ui解决tooltip延迟显示问题
tooltip默认open-delay是0，导致鼠标快速滑动的时候，会触发N个tooltip，如下图：如何让它延迟显示呢，虽然element ui给了属性open-delay，但是我们总不能每写一个tooltip都加一次，这样很麻烦。有没有全局控制它的方法？有。我们引入element ui往往是这么引的：import ElementUI from 'element-ui';Vue.use(ElementUI);让我们来打印一下，ElementUI是啥？熟悉不？element ui所有的
2022-03-09 23:32:31
3359
4
原创 用uniapp写堆叠卡片式轮播图
<template> <view class="focus" :style="{'width': width + 'rpx'}"> <view class="ul"> <view v-for="(item,index) in list" :key="item.id" class="li" :style="{'z-index': -1 * index,'width': itemWidth + 'rpx','transform':translateX
2021-09-22 00:38:03
2658
2
原创 【css】实现全网默哀及根据用户屏幕背景色切换样式
1.全网默哀，页面变成灰色是怎么做到的？filter:grayscale(100%)2.如何根据用户屏幕背景色切换样式prefers-color-scheme可以检测用户系统主题颜色@media(prefers-color-scheme:dark){设置深色时的样式}@media(prefers-color-scheme:light){设置浅色时的样式}...
2021-03-08 23:48:05
438
原创 vue中如何用纯js调用组件
项目中有这样的需求创建任务的抽屉需要在多个页面中调用，如果每个页面都要写import然后写html啥的很麻烦，所以决定模仿组件库的this.$message，这种一行调用的方法。主要功能如下：1.能给抽屉传值2.抽屉关闭后有callback函数，方便刷新主页面数据代码如下：drawer.vue<template> <el-drawer title="我是外面的 Drawer" :visible.sync="drawer" size="50%" @closed="clo
2021-01-09 23:30:34
4107
1
原创 echarts有涟漪效果的世界地图
项目要求实现一个带涟漪效果的世界地图。设计要求哪个区域有值，哪个区域就高亮，颜色不要求，全部设成同一种就行。我参考了echats官网的样例，官网样例是这样的：附官网地址：https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-map其实和我想要的效果已经很接近了，再改成世界地图，有数值的国家高亮就ok了。我改造的结果如下：option = { backgroundColor: '#404a59',
2020-10-19 22:49:39
1620
原创 用echarts写饼图轮播
vue项目需要实现这么个效果，饼图要有轮播效果，轮播的时候不是echart默认的highlight，而是需要凸出，中间要有空隙，如果下图。研究了一下，觉得echarts的dispatchAction方法太烦了，所以选用操控data里的selected属性。主要实现这几个功能：1.页面初始化会自动开启定时器2.鼠标hover上去，定时器暂停3.鼠标离开，定时器重启，从上次鼠标选中的扇形开始重新轮播4.当用户切屏，暂停定时器5.当用户回到页面，定时器重启6.防止用户恶意快速mouseover
2020-10-18 21:21:36
2252
3
原创 自定义的组件如何触发element ui的表单校验
碰到一个问题，如果用原生html封装组件无法触发element ui的表单校验，需要点击提交按钮后才能校验。rules里的trigger: 'blur’已经不起效了。研究了一下解决办法。主要发现有两招：1、在父组件里手动触发el-form里的validateField事件<childComponent v-model="ruleForm.fatherValue" @input="validateField('fatherValue')"/>validateField(type) {
2020-09-26 20:34:01
4963
2
原创 用element-ui封装vue自定义指令的demo
先上效果图,鼠标hover左边的盒子可以出现tooltip，点击右边的图标，可以自动复制右边的文字在src文件夹里建以下文件在/directives/index.js里暴露安装插件接口import Copy from './vcopy/v-copy.js'export default { install (Vue) { Vue.directive('copy', Copy) }}在main.js里引用import Directive from './directives/
2020-09-06 11:45:44
885
转载 气泡箭头
/*气泡箭头*/.popup:after { content: ''; position: absolute; width: 0; height: 0; top: -10px; right: 42px; border-style: solid; border-width: 10px; border-color: transp...
2020-04-27 20:25:38
179
原创 vue项目select选择器报错
正在移植项目，在老项目跑得好好的代码，移到新项目就报错了。错误提示如下：v-on handler:cannot convert undefined or null to object并且提示问题出在select选择器。网上说是因为用了object.keys，虽然我平时也喜欢用这个函数，但报错的那个页面，我真的没用它。找得眼睛都快瞎了，忽然发现，是因为v-model绑定的变量初始值我设成了nu...
2020-04-08 15:50:58
520
转载 vue 动态加载并注册组件且通过 render动态创建该组件
<template> <div class="content-left-menu"> <div class="item-contain layout-content"> <Tabs class="cmcc-ivu-tab2" type="card" closable> <TabPane v-for="k ...
2020-04-02 23:32:04
924
1
原创 递归的侧边栏
<template> <div> <!-- 根据实际情况做修改 --> <el-submenu v-for="(item,index) in navlist" :key="index" v-if="!!item.children.length" :index="item.adminMenu....
2020-02-12 16:14:40
282
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人