白也blog - vue
type: channel
link: http://www.baiyeovo.cn/index.php/tag/vue/
items: Element-ui中 选择器（select）多选下拉框实现全选功能
items: echarts饼图封装
items: vue公共事件总线eventBus的简单理解和使用
items: 无聊,写个vue实现标签多选
items: 周末,分享一个博客的运行时间代码
items: 时间处理函数-工具函数
items: 文件导入组件上传
items: Echarts折线图组件封装
items: Element el-form根据选择条件动态控制表单必填项
items: vue3-实现手动注册组件和批量注册组件

Element-ui中 选择器（select）多选下拉框实现全选功能
type: item
date: 2022-09-20T19:52:57+08:00
description: 选择器组件（Select）支持多选，但是不支持全选。如果需要实现这个功能，该怎么修改呢？方案一：下拉项增加一个【全选】，实现以下几种功能下拉选项全都勾选时，【全选】自动勾选；下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；下拉选项全都勾选时，点击【全选】后，所有下拉选项不勾选；下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；方案二：直接添加一个【全选】复选框，实现的功能与方案一相同完整代码父组件 mulSelecteds = val"> mulSelecteds2 = val"> 方案一 方案二 全选 关于 select 标签拓展定义和用法select 元素可创建单选或多选菜单。< select > 元素中的 < option > 标签用于定义列表中的可用选项。全局属性< select > 标签支持 HTML 中的全局属性。事件属性< select > 标签支持 HTML 中的事件属性

echarts饼图封装
type: item
date: 2022-09-15T13:55:37+08:00
description: 最近频繁使用到饼图,烦.直接把代码c到博客来!!!哈哈哈

vue公共事件总线eventBus的简单理解和使用
type: item
date: 2022-09-08T13:36:03+08:00
description: 公共事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。通过一个中转(bus) A兄弟传值: import bus from '@/common/bus' bus.$emit('toFooter',this.msg) B兄弟接收: import bus from '@/common/bus' bus.$on('toFooter,(data)=>{ this.str=data //data就是this.msg的数据 })用法如下：第一步：项目中创建一个js文件（我通常给它取个名字为bus.js），引入vue，创建一个vue实例，导出这个实例，代码如下（一共就两行）：1 import Vue from 'Vue' 2 export default new Vue第二步：在两个需要通信的两个组件中分别引入这个bus.js1 import Bus from '这里是你引入bus.js的路径' // Bus可自由更换喜欢的名字 第三步：传递数据的组件里通过vue实例方法$emit发送事件名称和需要传递的数据。(发送数据组件)1 Bus.$emit('click',data) // 这个click是一个自定义的事件名称，data就是你要传递的数据。 第四步：被传递数据的组件内通过vue实例方法$on监听到事件和接受到数据。（接收数据的组件）这里通常挂载监听在vue生命周期created和mounted当中的一个，具体使用场景需要具体的分析，这里不说这个。1 Bus.$on('click',target => { 2 console.log(target) // 注意：发送和监听的事件名称必须一致，target就是获取的数据，可以不写target。只要你喜欢叫什么都可以（当然了，这一定要符合形参变量的命名规范） 3 })通过以上的四步其实就已经实现了最简单的eventbus的实际应用了。但是到这儿后，一定要注意一个最容易忽视，又必然不能忘记的东西，那就是清除事件总线eventBus.不手动清除，它是一直会存在的，这样的话，有个问题就是反复进入到接受数据的组件内操作获取数据，原本只执行一次的获取的操作将会有多次操作。如上我所举的例子，只是打印多次传过来的数据。但你想想，实际开发中是不会这么简单的打印这个数据到控制台，本来只会触发并只执行一次，现在变成了多次，这个问题就非常严重了，你们各种脑补具体的项目开发场景吧。第五步：在vue生命周期beforeDestroy或者destroyed中用vue实例的$off方法清除eventBus1 beforeDestroy(){ 2 bus.$off('click') 3 }总结一下，这里只是介绍如何使用eventBus来解决非父子组件通信，但是当项目较大较复杂时，并不适合。到那时，vuex才是vue给我们提供的最理想的方式。个人使用经验:登录成功后,用户信息未填写后立即提示用户补全信息.点击立即填写后弹窗个人信息弹窗如图:因为组件方法都不在同一模块,使用vuex来解决这个又太麻烦了.所以我就想到了事件公交.兄弟组件,互相触发注意：以上存粹是个人的理解，有不同观点或者其他建议的欢迎交流学习！

无聊,写个vue实现标签多选
type: item
date: 2022-08-22T08:39:00+08:00
description: 记录一下实现标签多选并且选中后可以取消选中效果,可以直接复制代码使用（因为这个是vant显示弹窗，如果没安装请自行去掉van-popup就是简单的索引判断是否有重复值 面试记录(求职方不可见) 标签 -1 }" v-for="(item, index) in feelingData" :key="item.id" @click="feelingClick(item, index)" > {{ item.value }}

周末,分享一个博客的运行时间代码
type: item
date: 2022-08-21T14:00:00+08:00
description: 获取当前时间戳,与后端填写的时间戳进行计算即可. {{date}}

时间处理函数-工具函数
type: item
date: 2022-08-03T15:29:00+08:00
description: 工具函数分享// 时间戳转日期格式 yyyy-mm-dd hh:mm:ss export const timestampToDate = (timestamp) => { if (timestamp == null) { return '' } let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 let Y = date.getFullYear() + '-'; let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'; let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); return Y + M + D + h + m + s; } // 时间戳转日期格式 yyyy-mm-dd hh:mm export const timestampToDate2 = (timestamp) => { if (timestamp == null) { return '' } let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 let Y = date.getFullYear() + '-'; let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) ; return Y + M + D + h + m ; } // 时间戳转日期格式 yyyy-mm-dd hh:mm:ss export const timestampToMonth = (timestamp) => { if (timestamp == null) { return '' } let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 let Y = date.getFullYear() + '-'; let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); return Y + M; } export const formatDates = (data, column) => { if (data == null) { return '' } let date = new Date(parseInt(data)) let Y = date.getFullYear() + '-' let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-' let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ' let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':' let m = date.getMinutes()…

文件导入组件上传
type: item
date: 2022-08-03T08:37:00+08:00
description: 文件导入组件使用示例 {{fileName}} 选择文件 提示：请按模板字段正确填写信息后导入。 导入模板.xlsx 下载 数据导入结果 成功导入{{showImportResult.successCount || 0}}条数据! {{showImportResult.failCount || 0}}条数据导入失败，请修改后重新导入： {{ item }} 日志下载 关 闭

Echarts折线图组件封装
type: item
date: 2022-08-03T08:34:00+08:00
description: 封装的折线图组件

Element el-form根据选择条件动态控制表单必填项
type: item
date: 2022-07-24T00:04:00+08:00
description: 业务场景:当人员核实为证件号码变更时正确身份证号码为必填项我们可以给单个的form-item添加rules 也可以把el-form的rules判断给不给这个el-form-item即prop传的规则动态的判断有或者没有

vue3-实现手动注册组件和批量注册组件
type: item
date: 2022-06-24T09:20:00+08:00
description: 手动注册组件src/components/index.js import Skeleton from './Skeleton' import XtxCarousel from './library/xtx-carousel.vue' export default { install (Vue) { Vue.component(Skeleton.name, Skeleton) Vue.component(XtxCarousel.name, XtxCarousel) } }main.jsimport { createApp } from 'vue' import componentPlugin from '@/components/index.js' const app = createApp(App) app.use(componentPlugin).use(store).use(router).mount('#app')批量注册组件src/components/index.js const requireComponent = require.context('./', true, /\.vue$/) console.log(requireComponent.keys(), 3344222) export default { install (Vue) { requireComponent.keys().forEach((item) => { // console.log(requireComponent[item], 77) // ['./bread.vue', './pubArt.vue', './qq/q.vue'] /* 获取的是 每一个组件暴露出来的对象 */ const defaultObj = requireComponent(item).default Vue.component(defaultObj.name, defaultObj) }) } } + require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API 参数1:加载的文件目录 参数2:是否加载子目录 参数3:：正则，匹配文件 requireComponent:返回值：导入函数 fn keys() 获取读取到的所有文件列表main.jsimport { createApp } from 'vue' import componentPlugin from '@/components/index.js' const app = createApp(App) app.use(componentPlugin).use(store).use(router).mount('#app')