业务问题解决方案
文章平均质量分 57
业务问题解决方案
akatukijohi
菜鸡前端成长史
展开
-
【踩坑记录】uni-app工程转vue-cli 工程
uniapp改成npm打包原创 2022-11-04 10:10:26 · 1901 阅读 · 2 评论 -
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 · 3608 阅读 · 0 评论 -
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 · 3834 阅读 · 4 评论 -
用echarts写饼图轮播
vue项目需要实现这么个效果,饼图要有轮播效果,轮播的时候不是echart默认的highlight,而是需要凸出,中间要有空隙,如果下图。研究了一下,觉得echarts的dispatchAction方法太烦了,所以选用操控data里的selected属性。主要实现这几个功能:1.页面初始化会自动开启定时器2.鼠标hover上去,定时器暂停3.鼠标离开,定时器重启,从上次鼠标选中的扇形开始重新轮播4.当用户切屏,暂停定时器5.当用户回到页面,定时器重启6.防止用户恶意快速mouseover原创 2020-10-18 21:21:36 · 2379 阅读 · 3 评论 -
用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 · 919 阅读 · 0 评论 -
自定义的组件如何触发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 · 5358 阅读 · 2 评论 -
递归的侧边栏
<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 · 297 阅读 · 0 评论 -
用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 · 2963 阅读 · 2 评论 -
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 · 954 阅读 · 1 评论 -
echarts有涟漪效果的世界地图
项目要求实现一个带涟漪效果的世界地图。设计要求哪个区域有值,哪个区域就高亮,颜色不要求,全部设成同一种就行。我参考了echats官网的样例,官网样例是这样的:附官网地址:https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-map其实和我想要的效果已经很接近了,再改成世界地图,有数值的国家高亮就ok了。我改造的结果如下:option = { backgroundColor: '#404a59',原创 2020-10-19 22:49:39 · 1755 阅读 · 0 评论 -
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 · 4397 阅读 · 1 评论 -
气泡箭头
/*气泡箭头*/.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 · 212 阅读 · 0 评论 -
vue项目select选择器报错
正在移植项目,在老项目跑得好好的代码,移到新项目就报错了。错误提示如下:v-on handler:cannot convert undefined or null to object并且提示问题出在select选择器。网上说是因为用了object.keys,虽然我平时也喜欢用这个函数,但报错的那个页面,我真的没用它。找得眼睛都快瞎了,忽然发现,是因为v-model绑定的变量初始值我设成了nu...原创 2020-04-08 15:50:58 · 566 阅读 · 0 评论