xuxb000
物极必反,冥冥之中自有定数
展开
-
vue3中封装table表格
这样是不是省了一些,重复调接口的方法。原创 2024-04-07 13:46:24 · 261 阅读 · 1 评论 -
前端vue项目,引入PingFang SC字体
然后再在index.scss中引入fonts.scss文件就行了(引入的时候注意路径是否正确)然后再创建一个fonts.scss文件(引入的时候注意路径是否正确)原创 2024-03-07 15:32:07 · 350 阅读 · 0 评论 -
兄弟组件传值,$emit方法无效的问题解决
A组件(是个弹框组件)原创 2024-01-26 11:48:02 · 168 阅读 · 0 评论 -
vue2中使用EventSource(EventSourcePolyfill)实现持续的消息推送
这里使用了activated和deactivated是因为我们的前端框架是后台管理系统,使用了keep-alive,我希望是做到进入我引入组件的页面建立sse,离开的话就关闭连接。需求:要实现一个 管理员启动、暂停、结束等一系列操作任务的时候,后端将消息通过EventSource传递给前端,前端展示出来。答:因为在和后端建立连接的时候,需要传递token用来建立身份标识,而eventSource的。没有找到相关传参的API,如果你这边不需要传递任何参数,两者用哪个都行。原创 2024-01-08 09:49:37 · 1630 阅读 · 0 评论 -
vue+css动画 实现文字的上下轮播切换
突然间碰到一个比较丝滑的特效,就研究了一下想把它实现出来。效果:渐隐消失,底部往上走覆盖出现。以下是完整代码,复制粘贴即可运行。原创 2023-11-08 10:00:06 · 380 阅读 · 0 评论 -
vue+canvas实现横跨整个页面的动态的波浪线(贝塞尔曲线)
本来写这个特效 我打算用css实现的,结果是一波三折,我太难了,最终没能用css实现,转战了canvas来实现。当然这个图的波浪高度、频率、位置、速度都是可调的,请根据自己的需求调整,如果你讲波浪什么的调大一下 还有有摆动的效果哦。如果你想看react的写法,请移步这里。原创 2023-11-03 10:28:59 · 496 阅读 · 0 评论 -
js递归过滤树形结构数据
// 需要过滤的树形结构数组var arr = [{ pId: null, positionId: '01', children:[ {pId: '01', positionId: '00012', children:[]}, {pId: '01', positionId: '00013', children:[]}, {pId: '01', positionId: '00014', children:[]}, {pId: '01', positionId: '00015', childre原创 2022-04-14 15:16:04 · 679 阅读 · 0 评论 -
三个选择框,当前框选过之后的数据其他两个不能选择
效果图<template> <div class="multi-distribution-head"> <c-product :selectObj="{productType:'一级难度'}" :isIncomingData="true" :productData="showTypeTree1" :defaultCheckedKeys="defaultCheckedKeys" :defaultProps原创 2022-03-16 17:27:15 · 686 阅读 · 0 评论 -
Vue 计算属性和侦听器的使用和对比
vue计算属性-computed目标: 一个数据, 依赖另外一些数据计算而来的结果语法一:computed: { "计算属性名" () { return "值" }}需求:需求: 求2个数的和显示到页面上<template> <div> <p>{{ num }}</p> </div></template><script>export defaul原创 2022-03-15 14:23:12 · 187 阅读 · 0 评论 -
vue+elementUI renderHeader函数实现表格头部hover出现图片
效果图:上代码:// 表头数据格式export const columnsList= [ { key: 'vcAcct', title: '产品代码', align: 'center', fixed: 'left', minWidth: '200', sortable: 'custom' }, { key: 'vcAcctName', title: '产品名称', align: 'center', fixed: 'left', minWidth: '120', sortable: '' },原创 2022-03-10 16:51:57 · 1128 阅读 · 0 评论 -
第一次将项目上传到github
首先你需要一个github账号,所有还没有的话先去注册吧!https://github.com/我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可:https://git-for-windows.github.io/1.进入Github首页,点击Your repositories=>New新建一个项目2.填写相应信息后点击create repository即可Repository name: 仓库名称Description(可选): 仓库描述介绍Publi原创 2022-01-13 15:13:31 · 185 阅读 · 0 评论 -
js+vue+element-ui数组,相同名字(也可以是其他的区分字段)的数据只做一次合计
数据合计问题今天遇到了一个问题,项目中有一个数据列表,需要做合计,但是需求是名字相同的只做一次合计,如下图:所以做完后根据项目数据,自己造了一个json,做了一个dome,长个记性a: [{name: '张三', label: '1', num: 3}, {name: '李四', label: '2', num: 4}, {name: '王二', label: '3', num: 5}, {name: '张三', label: '1', num: 3}, {n原创 2020-06-23 16:52:54 · 818 阅读 · 1 评论 -
vue 中怎么用事件委托
哈喽,大家好,今天我要介绍一下vue中怎么使用事件委托吧!那说到事件委托,那什么是事件委托呢?大佬就此略过吧,不懂得可以随便阅读一下.事件委托概念:那什么叫事件委托呢?事件委托也叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。太官方了,不够明了,举个例子吧有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台小姐姐代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么原创 2020-06-30 11:00:33 · 3896 阅读 · 2 评论 -
vue 根据数组对象属性值分类,把一个数组拆分为多个数组
前端必备技能之一,按需分类有给的数据时候为了处理数据方便一些,后端给的数据可能不是我们想要的数据结构,这时候就需要你稍微做一点点的处理才能为自己所用现在有这样一个数组,后端给的,policyDtos: [{clazzType: 1, clazzTypeText: '限签', remark: '严格限签', sourceTypeText: '地区收集'}, {clazzType: 2, clazzTypeText: '限售', remark: '限售', sourceTy原创 2020-07-31 10:49:59 · 10374 阅读 · 10 评论 -
vue 强制更新视图 刷新组件
** 今天项目中遇到这样的一个问题,感觉有必要记录一下.就是子组件的值是父组件中传过来的,当我在父组件改变了子组件的值的时候,发现子组件的视图并没有发生更新,肿么办?**思路: 只要强制更新视图就行了解决方法一: 使用了 key-changing// 父组件<div class="listBtns"> <el-button type="primary" size="mini" @click="extractData">提取数据</el-button><原创 2020-09-17 14:16:15 · 3557 阅读 · 0 评论 -
vue项目中常用的过滤器(格式化数据)
在我们项目中是不是经常需要使用自定义的过滤方式来处理数据呢,如果一个项目中多个地方使用的话,建议写在全局哦// 处理时间的使用了moment,记得安装后再使用哦import moment from 'moment'/** * 简单处理 time YYYY-MM-DD HH:ss:mm */export function formatTime(time) { if (!time) return let arrTime = time.split(' ') return arr原创 2020-09-25 14:37:55 · 253 阅读 · 0 评论 -
vue开发中遇到的一些问题及解决方案
Case 1vue项目在IE中自动读取缓存中的数据,不重新发请求解决方案:// 在每个请求上增加时间戳config.url = `${config.url}?_t=${+new Date()}`原创 2021-11-15 14:57:34 · 1989 阅读 · 0 评论 -
vue中如何封装公共方法,全局使用
1.src文件夹下新建util.js文件以便存放公共方法export default { rowspan: function (data) { var index = data; // 代码 return index; }}2.main.js中,将unils里的方法注册为全局方法:import utils from '@/util/util.js' Vue.prototype.utils = utils3.任意文件中使用mounted () { var index原创 2021-11-18 09:47:47 · 2141 阅读 · 0 评论 -
vue-countupjs的使用
基于 CountUp.js 的 Vue 组件, 简易数字动画跳动安装: npm install vue-countupjs --savemain.js: import VueCountUp from 'vue-countupjs' Vue.use(VueCountUp)html: <v-countup start-value="0" :end-value="1000"></v-countup>配置项: start-val原创 2021-11-18 10:05:54 · 1356 阅读 · 0 评论