![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
人间清醒小仙女
hello world
欢迎转载,但请注明出处,共建开源前端,祝大家技术越来越好~~
展开
-
快速创建一个单页面vue页面 引入elelement-ui组件
转自https://element.eleme.cn/#/zh-CN/component/installation。直接从网上链接进文件里,省去下载包(不安全,慎用) https://www.bootcdn.cn/原创 2023-04-21 08:55:52 · 683 阅读 · 1 评论 -
tki-tree 树组件控制默认展开第几层数据
有一个这样子的需求tki-tree没有配置项控制展示到第几层数据,所以需要我们自己扩展我在组件里扩展了两个配置项1.openRank 控制展开到树的第几层2.showAllFlod 全部展开然后处理方法中的数据原创 2022-08-06 15:57:50 · 1031 阅读 · 14 评论 -
给大家分享一个选择困难症必备点餐方法吧 吃点什么好呢 早餐 午餐 晚餐
var arr = ['谭鸭血','花甲粉','胡姬酒肆','螺狮粉','新辣道','榴莲烤肉-烤肉','榴莲烤肉-大酱汤','权味石锅拌饭','新中关楼下酸辣粉','鬼瘾食','呷脯呷脯','醉面','e世界-粥','-1美食城','新中关盖饭','喜家德','焦耳食堂', '将太无二'];function random(a,b){ var randomNum = Math.round(Math.random() * (b - a) + a); return randomNum;};原创 2021-03-26 11:05:17 · 257 阅读 · 1 评论 -
uniapp app打包 提交清空数据清空不掉的
uniapp app清空数据清不掉原创 2022-06-17 18:48:55 · 1055 阅读 · 0 评论 -
代码规范 vue eslint 组件属性必填 eslint常见代码规范
vue的eslint组件校验原创 2022-06-17 18:31:09 · 611 阅读 · 0 评论 -
echarts 甘特图详解做时间轴
let fontcol="#00000087" ;option = { tooltip: { formatter: function (params) { return params.value[3]; } }, xAxis: { min: 1620576000000, type:'time', scale: true, .原创 2022-04-09 16:05:39 · 3529 阅读 · 0 评论 -
echarts饼图图例和图表分布在两侧,图例文字对齐,自定义图例,自定义饼图展示位置,echarts饼图展示在盒子右侧
const dataList = [{ title: '正常文字多的', key: 'normal', rate: '1' }, { title: '调', key: 'debugger', rate: '2' }, { title: '停', key: 'stop', rate: '3' }, { title:.原创 2022-04-07 17:55:34 · 7234 阅读 · 0 评论 -
uniapp根据数据生成二维码 app生成二维码
目前组件只支持根据字符串生成<template> <view class="qrcode" v-if="show" @click="hideQrcode"> <uqrcode ref="uQRCode" :mode="mode" :text="text" :size="size" :margin="margin" :background-color="backgroundColor" :foreground-color="foregroundColor" :e..原创 2022-04-01 13:54:43 · 1550 阅读 · 0 评论 -
分组展示echarts图表数据
分组展示echarts图表数据,按照季度进行筛选原创 2021-07-02 11:28:58 · 875 阅读 · 0 评论 -
自定义uniapp标题栏按钮以及按钮触发的事件
page.json"path": "你自己的路径地址", "style": { "enablePullDownRefresh": true,// 是否配置下拉刷新的功能 "navigationBarTitleText": "标题",/// 标题 "navigationBarBackgroundColor":"#147bc3",// 背景颜色 "navigationBarTextStyle":"white",// 文字颜色 "app-plus": { .原创 2022-03-24 15:52:41 · 3384 阅读 · 0 评论 -
eventbus注销的事件取消不掉
派发事件注意: this.EventBus.off(′event′);不能传参数,this.EventBus.off('event');不能传参数,this.EventBus.off(′event′);不能传参数,this.EventBus.off(‘event’, {});是不行的大家谨慎使用EventBus,如果事件车变多会导致方法名不够用哈,另外一定要在绑定的页面进行off卸载...原创 2022-03-04 16:04:20 · 543 阅读 · 0 评论 -
eventbus回调,回传参数
通知子或者兄弟组件发出校验消息this.EventBus.$emit('validatePlace', { value: this.editorSelectedNode, validate() { that.showNodePorts(that.editorSelectedNode?.id, false); that.$store.commit('clearSelectedNode'); } });做出校验的组件mounte原创 2022-02-28 14:22:36 · 636 阅读 · 0 评论 -
antdv自定义a-form-model label属性的悬浮title
<a-form-model-item :title="名称" :label="name "> <a-input v-model="name" placeholder="请输入名称" /></a-form-model-item>一开始是想直接在item上增加title属性,发现没有生效<a-form-model-item> <span slot="label" :title="名称">{{ name }}</span&原创 2022-01-15 16:21:56 · 1903 阅读 · 2 评论 -
a-select 下拉加载更多
<template> <a-select v-model="value" @popupScroll="handlePopupScroll" > <a-select-option v-for="(item, index) in options" :key="index" :value="item"> {{ item }} </a-select-option> </a-select></tem原创 2021-07-06 19:31:55 · 863 阅读 · 2 评论 -
ant-design-vue 实现可伸缩列 Module parse failed: Argument name clash (40:29)
是因为这里开头字母是大写,改为小写即可原创 2021-03-11 16:43:54 · 1565 阅读 · 0 评论 -
抛出具名插槽,element,antdv,vue,uniapp,uni-table,表格的具名插槽,作用域插槽
table.vue<template> <a-table :columns="columns" :data-source="data"> <template v-for="item in columns" :slot="getTableSlotName(item)" slot-scope="record, text"> <slot :name="item.dataIndex" :text="text" :record="record"&原创 2021-02-23 14:24:11 · 515 阅读 · 0 评论 -
vue源码- getter setter 依赖跟踪
依赖跟踪首先创建一个叫Dep的类类有两个方法depend和notifydepend表示当前正在执行的代码,收集这种依赖项notify表示依赖发生改变,任何之前被定义过的表达式,计算,函数都会被通知重新执行,所以我们就需要一个函数或者一段表达式或者某种算法让他们产生关联,并且可以把这种关系叫做依赖,也可以被认为是订阅者模式还有一个叫函数autorun接受一个update函数,函数体中属于响应区间创建一个dep实例const dep = new Dep()autorun(() =>翻译 2020-12-10 23:57:18 · 176 阅读 · 0 评论 -
vue动态组件 & 异步组件 vue动态生成组件,循环生成组件
动态生成组件<!-- 动态组件由 vm 实例的 `componentId` property 控制 --><component :is="componentId"></component><!-- 也能够渲染注册过的组件或 prop 传入的组件 --><component :is="$options.components.child"></component>参考vue官方文档https://cn.vuejs.org/v原创 2020-11-10 23:40:09 · 1764 阅读 · 0 评论 -
浏览器解析html与渲染顺序问题
写项目的时候发现在chrome没问题的样式到ie就变形了,所以对这一现象进行了搜索和了解,找到了这篇文章获益匪浅https://www.cnblogs.com/web-easy/p/5067680.html一:为什么要了解浏览器渲染页面和加载页面机制,主要还是性能的优化。了解浏览器如何进行加载,我们可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以最快的速度将文件加载完毕。了解浏览器如何进行解析,我们可以在构建DOM结构,组织css选择器时,选择最优的写法,提高浏览器的解析速率。转载 2020-10-09 17:17:00 · 419 阅读 · 0 评论 -
阻止事件传播,点击父元素不希望子元素也触发父元素的事件
背景:子元素相对于父元素定位,width和left通过起始位置和结束位置计算,空白的位置有点击事件进行添加元素,已经有元素的位置右键进行修改,没有点击事件这就需要禁掉父元素的事件传播,否则子元素也会有父元素的点击事件 <div // 父元素事件 ref="stockyardGroup" class="stockyard_item" @click="e => handleAdd(e, item.id)"原创 2020-08-29 11:29:42 · 2359 阅读 · 0 评论 -
阻止浏览器右键事件,自定义右键事件
阻止浏览器事件并且自定义浏览器右键事件<div @contextmenu.prevent="handleEdit(item)"> </div>事件绑定方法和其他事件绑定方法一样,也可以传值阻止浏览器右键事件<div @contextmenu.prevent></div>自定义浏览器右键事件<div @contextmenu="handleEdit(item)"> </div>...原创 2020-08-29 11:05:14 · 643 阅读 · 0 评论 -
通过父元素的宽动态计算子元素的宽, ref拿到的是上一次的dom结构不是最新的怎么解决
可能是vue的元素复用机制,只需要给元素外面设置一个唯一的可以区分的一个key值引发元素数据重绘就可以<div v-for="item in list" :key="item" class="flex-wrapper"> <div ref="item"> </div></div>如果页面中有上下滚动条的情况下需要的带this.$refs.item的宽度来重新计算item里面元素的宽度现在这样写无法每次都触发dom结构更新,需要增加key值触发重绘<原创 2020-08-29 10:58:00 · 491 阅读 · 0 评论 -
数组去重 根据对象中的某个参数去重
let ab = [{ id: 0, name: "总合计"},{id 0, name: "二级合计"‘ },{ id: 0, name: "三级合计" }]function unique (arr) { const res = new Map(); return arr.filter((item) => !res.has(item.id) && res.set(item.id, 1)); };c原创 2020-08-18 14:43:02 · 319 阅读 · 0 评论 -
echarts折线图改变symbol颜色,让圆球颜色和折线相同
title: { text: '', left: 'center' }, xAxis: { type: 'category', }, yAxis: { type: 'value' }, series: [{ type: 'line', // 接下来三句是重点,将默认形状改为圆形 symbol: 'circle', symbol...原创 2020-07-25 10:01:36 · 6796 阅读 · 0 评论 -
小程序父子组件传参
子组件 const a = { a: 1 } const eventChannel = this.getOpenerEventChannel() eventChannel.emit('test', a) },```父组件跳转到子组件的时候```wx.navigateTo({ url: '/pages/application/travel/createTogether/createTogether', events: { test: d原创 2020-07-17 22:00:32 · 146 阅读 · 0 评论 -
小程序导航栏全屏navigationStyle自定义导航栏,小程序轮播图导航栏
<!-- swiper --> <view class="page-section page-section-spacing swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{ba..原创 2020-07-15 13:42:35 · 1095 阅读 · 0 评论 -
echarts自定义鼠标悬浮显示内容,自定义tooltip,formatter回调
tooltip: {trigger: ‘item’,// 悬浮框背景颜色backgroundColor: ‘#fff’,// 悬浮框边框颜色borderColor: ‘#000’,textStyle: {color: ‘#000’},formatter: function (a, b) {// 可以通过回调返回的参数判断选择的是哪一个,除了name还有其他标识,看个人需求if (a.name === ‘1月’) {return ‘我是自定义文案’}}},控制圆点在什么范围内.原创 2020-06-20 16:11:34 · 3488 阅读 · 0 评论 -
echarts线性图折线变为圆滑的线
{ type: 'line', symbol: 'circle', symbolSize: 10, // 展示曲线上的点 showSymbol: false, // 让曲线更加圆滑 smooth: true, data: data } ] ![在...原创 2020-06-18 11:24:34 · 3955 阅读 · 0 评论 -
echarts怎么让x轴坐标从紧挨着y轴开始
xAxis: {boundaryGap: false,},加一个这个属性就可以了原创 2020-06-17 16:18:01 · 3705 阅读 · 0 评论 -
可按照tr拖动的表格
<div class="fluid container"> <table class="col-md-3"> <tr> <td class="thead_style"> <th>表头第1列1111111111111</th> <th>表头第2列2222222222222</th> <th>表头第3列33..原创 2020-06-11 20:00:59 · 179 阅读 · 0 评论 -
echarts线性图拖动效果,echarts拖动
var symbolSize = 20;// var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];var lineText5 = '标题'var data5 = [ [0, 0], [1, 2.2], [2, 3], [3, 4], [4, 3.1], [5, 3.8], [6, -6.5], [7, -3] ]option = { title: { text: 'Try Draggin原创 2020-06-10 14:58:42 · 1997 阅读 · 0 评论 -
组件中通过:before(伪类)给文字前面加样式-vue
要求实现效果:如果不是组件内使用把props中传的参数改为data中挂载即可实现方案1. <div class="status"> <div class="outer-circle" :style="{'margin-left':left}"> <span :class="colorClass"></span> ...原创 2020-04-29 22:40:13 · 3227 阅读 · 0 评论