- 博客(81)
- 收藏
- 关注
RSS订阅原创 1.双重三元
1.使用场景：传入后端的方式：js文件中： { name: '创建日期', // input框前的名称 desc: 'createDateEq', // 传入后端的字段名称 type: 'dated', // 格式类型，本文使用ant desgin中的date ,自己又重新定义的dated childrenDesc: ['createTimeStart', 'createTimeEnd'] // 使用选择日期需求传入后端的字段名 }...
2022-04-13 13:36:00
609
原创 js多个数字累加解决小数点位数过长的问题
1.适用于多个数字累加export function accAdd(arr) { // const arr = [0.1, 0.2] const fieldArr = [] for (var i = 0; i < arr.length; i++) { var m, field try { field = arr[i].toString().split('.')[1].length } catch (e) { field = 0
2022-03-20 08:33:34
831
原创 一个感叹号,2个感叹号,3个感叹号的含义与作用
判断对象的时候用的比较多 不为空不为null不为undifined 不为数字0 不为数字串0 备注 示例 ! 可以判断对象中是否存在这个属性,第2项存在,第1项不存在的时候,全局提示 if (num === 1 && !this.param['matnrLike'] && this.param['matnrBt']) {return this.$message.error('请添加物资编码之后再添加.
2022-01-04 09:20:40
2111
原创 Git工作流程个人总结
与其他人开发一个功能正常流程：（自己）1.本地建立test，dev, master，local_zhao，除了local-zhao都需要与远程建立联系，使用local_zhao只需要commit到本地仓库，不需要到远程2.切换到本地的test分支，合并local_zhao代码，然后提交到测试分支test上3.test分支进行打包测试，没有问题再将local_zhao的代码合并到本地dev分支上，然后再提交到远程的dev(我理解dev是预生产)，然后再提交到master分支上，ma...
2021-12-10 17:06:53
683
原创 js中八位数日期转换为YYYY-MM--DD的形式
var str="12345678";var reg=/^(\d{4})(\d{2})(\d{2})$/;str = str.replace(reg,"$1-$2-$3");alert(str); //1234-56-78
2021-11-20 17:20:44
2519
原创 Css3中添加-moz-, -webkit-, -o-,是什么意思呢?
-moz-,-webkit,-o-都是浏览器的前缀Firefox:-moz-Chrome,Safari:-webkit-Opera:-o-IE:-ms-应对的是css的兼容问题常用的是box-shadow .loginBox { width: 365px; height: 356px; margin-top: 15px; overflow: hidden; float: right;
2021-11-02 10:41:45
404
原创 Vue中mixins的使用
一.什么是mixins（混入）？ mixins是对vue组件的一种扩展，将一些公用的常用数据或者方法，构建一个可被混入的数据结构，被不同的vue组件进行合并，就可以在不同的vue组件中使用相同的方法或者基础数据。二.作用: 1.更高效的实现组件内容的复用 2.将组件内部data,method等与父组件相应内容进行合并,相当于在引入后,父组件的各种属性,方法进行了扩充 3.对数据,对象进行合并,要以组件为优先三.本质: 其实就是j...
2021-11-01 21:54:24
1576
1
原创 onselectstart和onselect的区别
1.onselectstart 这个事件主要是用于禁止选择网页中的文字。代码为：document.onselectstart =function(){ return false; }注意此事件对input和textarea无效。2.onselect 此事件是在选择textarea或input内的内容之后触发。所以只有input和textarea标签支持。例如:<input type = 'text' id = 'input>
2021-10-27 21:24:56
269
原创 Vuex命名空间的使用
Vuex一.解决的问题不同的数据之间需要保持同步数据的修改是可以追踪的多个组件之间需要共享数据的时候(跨组件通信)父与子之间props,兄弟之间this.$emit还是需要用vue中的数据传输二.什么是VuexVuex是专门为Vue.js应用程序开发的状态管理模式;他采用集中式存储管理数据三.官网:官网地址: Vuex 是什么？ | Vuex四.配置项stata:数据的存储位置 相当于data 组件和模块中是函数形式state(){return{}}mut
2021-10-17 16:20:26
783
原创 Vue3项目中组件生成方法
封装的确认框组件:<template> <div class="xtx-confirm" :class="{ fade: fade }"> <div class="wrapper" :class="{ fade: fade }"> <div class="header"> <h3>{{ title }}</h3> <a href="JavaScript:;" class
2021-09-28 12:03:43
549
原创 Vue3项目中实现相同属性的互斥点击,与自我点击选中与消除选中状态
效果1:相同属性的互斥点击效果2:自我点击选中与取消选中的状态代码实现:自我点中与取消的逻辑分析: 1.选中的状态时是有一个类名:selected2.但是后台的数据中并没有标志符号来区分是否选中,这个时候需要自己添加一个类名3.添加点击事件实现标识符的切换false与true,由此来确定是否选中互斥的效果逻辑分析:1.点击事件中,将渲染的数据list全部传递过来2.过滤出点中的自己...
2021-09-27 18:30:04
1091
原创 js遍历的六种方式
javaScript原生遍历方法的建议用法:用for循环遍历数组 用for-in常用于遍历对象(也可以遍历数组,但是获取到的index值是字符串) 用for-of遍历类数组对象(Es6新增语法) 用Object.keys()获取对象的属性名的集合 forEach遍历数组 map,reduce遍历数组for循环1.循环数组const arr = [1, 2, 3];for(let i = 0; i < arr.length; i++) { console.log(ar
2021-09-27 17:02:09
781
原创 git如何拉取远程分支到本地
$ git branch -a 查看分支（绿色为本地已有分支，红色为远程分支）$ gti pull 拉取分支$ git checkout -b dev（本地名） origin/dev（远程名） 拉取远程分支并在本地创建一个新的分支
2021-09-27 14:14:45
245
原创 Vue3项目中页面滚动加载更多的原生操作
效果:数据未回来就是加载中,加载数据完成后就会显示没有更多的数据了步骤一,定义无限下拉的商品组件:xtx-infinite-loading.vue使用了vueuse中的useIntersectionObserve来监听是否达到了可视化界面中,如果到达了界面,就像父组件传自定义属性load通知父组件做接下来的操作<template> <div class="xtx-infinite-loading" ref="container"> <div c..
2021-09-24 11:08:34
2164
1
原创 Vue3项目中useVModel的使用方式
vue3.0中v-model会拆解成 属性 modelValue 和 事件 update:modelValue父组件:<div class="check"> <XtxCheckbox v-model="sortParams.inventory">仅显示有货商品</XtxCheckbox> <XtxCheckbox v-model="sortParams.onlyDiscount">仅显示特惠商品</XtxCheck.
2021-09-23 19:46:13
5267
4
原创 Vue项目中原生写消息提示组件
效果:组件功能分析： 固定顶部显示，有三种类型：成功，错误，警告。 显示消息提示时需要动画从上滑入且淡出。 组件使用的方式不够便利，封装成工具函数方式。 注:Vue2.0使用的是Vue.prototype.$message = function(){} Vue3.0中使用的是app.config.globalProperties = function(){}挂载原型方法使用组件:<Message text="手机号或密码错误" type...
2021-09-23 17:48:03
833
原创 Vue项目中登录页面使用表单验证
效果:文档：VeeValidate 支持vue3.0第一步：安装 执行命令 npm i vee-validate@4.0.3 第二步：导入 修改文件 src/views/login/index.vue,哪个页面使用表单验证就导入以下的信息进行注册使用 import { Form, Field } from 'vee-validate'components:{Form, Field}第三步:将form表单部分的div换成Form,input需要校验的inpu..
2021-09-23 17:35:46
1229
1
原创 vue中原生写分页组件
效果:分页的本质: 分批次的查询数据(基于页码page与每页的条数pagesize),后端接收到分页参数后,会基于这些参数查询数据库,然后基于数据库进行分页;基于sql语句(select * from user limit n,m);分页组件需要实现的功能： 基本组件的结果 动态计算中间的页码 控制省略号的显示和隐藏,控制页码的切换,点击第4页的时候会居中显示和前后出现省略号,后2页的时候不显示后面的省略号, ...
2021-09-23 11:54:06
386
原创 Vue3项目中动态组件component的使用
<template> <div class="goods-tabs"> <nav> <a :class="{ active: currentName === 'GoodsDetail' }" href="javascript:;" @click="toggle('GoodsDetail')" >商品详情</a > <a href="javascript:;" :class="{.
2021-09-22 15:25:32
12606
原创 Vue3中使用原生的js监听图片懒加载
目的:当图片进入可视区域的时候去加载图片,且数据要是加载失败,会显示默认的图片需解决的问题:1.如果监听图片进入可视区域2.直接操作图片,给他的src属性赋值3.自定义指令的规则自定义指令实现如下的src\components\library\index.js注意:使用webapi:IntersectionObserve ,vueuse中的useIntersectionObserve的底层就是由这个webAPI而来的其中有两个方法 observe.observe(imgDom
2021-09-16 21:52:01
507
原创 Vue3中点击箭头切换图片
效果:切换前点击右侧的按钮,切换后没有动画,可以展示图片的切换,可以考虑计算属性computed(过滤一下index,如果为0就是显示前5张图片,如果为1显示后5张图片,computed根据index的不同而实时更新,显示页面也就有不同)<template> <HomePanel title="热门品牌" sub-title="国际经典 品质保证"> <template v-slot:right> <!-- 右侧的.
2021-09-16 12:34:24
1789
2
原创 Vue3中的数据(此项目为图片)懒加载
实现的目的:实现当前组件进入可视区域时候在加载数据,然后渲染图片@vueuse/core中的useIntersectionObserver来监听是否进入可视区域的行为,但是须要配x合Vue3中的组合API才能实现先来分析一下useIntersectionObserver函数const {stop} = useIntersectionObserver(target,fn,options)// target表示被监听的Dom元素 必须是dom容器,而且还必须是Vue3的方式绑定的dom对象
2021-09-15 15:43:15
327
原创 Vue3项目中的骨架屏
实现场景:刚进入页面的时候,需要后端接口回传的数据,还没有回来,为了客户有更好的体验,需要设置骨架屏,效果图如下:实现步骤:1.设置通用组件骨架屏(可以设置的属性:高，宽，背景颜色，是否有闪动画)基本传值如下图:2.设置业务组件骨架屏1).设置通用组件骨架屏基本构建src/components/library/Skeleton.vue<template><div class="skeleton" :style="{width,height}" :..
2021-09-15 14:51:42
1388
原创 Vue中的简单淡入淡出动画
使用的场景:刚进入页面.数据还没有显示,图片也没有,可以搭配骨架屏,带有这些动画!Vue2中与Vue3中的动画节点函数名称不同 进入（显示，创建） v-enter 进入前 （vue3.0 v-enter-from） v-enter-active 进入中 v-enter-to 进入后 离开（隐藏，移除） v-leave 离开前 （vue3.0 v-leave-from） v-leave-active 离开中
2021-09-15 14:15:02
1322
1
原创 Vue3原生写轮播图组件
实现的基本功能: 自动播放，暴露自动轮播属性，设置了就自动轮播 如果有自动播放，鼠标进入离开，暂停，开启 指示器切换，上一张，下一张 销毁组件，清理定时器 步骤:1.实现通用轮播图样式的基本布局2.设置为全局组件3.设置业务组件4.业务组件导入到首页当中(home.vue)1)在src/components/library/Carousel.vue(这是轮播图的通用组件基本构建,全局注册)<template><div c.
2021-09-15 13:56:16
1463
原创 Less的混入用法(类似于方法)
// 定义混入方法时，需要在类选择器之后添加一个小括号// 定义混入方法.abc () {color: red;}.active {border: 1px solid blue;// 使用混入方法.abc();}.current {background: orange;// 使用混入方法.abc()}// 混入的好处：把重复的代码抽离出去，使用的时候可以多次导入，降低代码的冗余度...
2021-09-14 15:00:54
565
原创 浅拷贝对象的三种方式
准备条件:有list数组,每一项中有不同长度的children数组list = [{id: "1005000", name: "居家",children:[{}]}{id: "1005002", name: "美食",…}{id: "1010000", name: "服饰",…}{id: "1011000", name: "母婴",…}{id: "1013001", name: "个护",…}{id: "1019000", name: "严选",…}{id: "1043000", nam
2021-09-13 12:18:14
92
原创 Vue3中的v-model与Vue2中的不同
Vue3中的v-model与Vue2中的不同Vue2的规则: Vue2中v-model默认绑定的属性是value Vue2中v-model默认绑定的事件是@input Vue3的规则: Vue3中v-model默认绑定的属性是modelValue Vue3中v-model默认绑定的事件是@update:modelValue .sync被废除,Vue3中v-model可以绑定多个值第一个值为modelValue,从第二个值开始就是它本身 父组件:&l
2021-09-11 14:31:25
961
原创 Vue3中的爷爷与祖孙之间的传值
1.父传孙数据:provide2.子孙得到数据:inject一.爷爷传孙数据:provide爷爷组件:<template> <div>我是爷爷组件我有{{ money }}元钱</div> <hr /> <Child></Child></template><script>import { ref, provide } from 'vue'import Child from
2021-09-11 12:19:48
6730
2
原创 Vue3中的父子之间的传值
1.父组件向子组件传递数据:props2.子组件向父组件传递数据:emit一:父组件向子组件传递数据:props父组件:<template> <div>我是父组件我有{{ money }}元钱</div> <hr /> <Child :money="money"></Child></template><script>import { ref } from 'vue'impo
2021-09-11 11:58:26
616
原创 Vue3中功能可以分模块定义与使用
原因:setup函数中内容太多,需要将复杂的功能可以拆分模块,然后倒入使用,方便后期的复用和定期的维护App.vue 中<template> <div><div>案例</div><div>坐标{{"{"+x+"px"+y+"px"+"}"}}</div><hr><div>{{count}}</div><button @click="handlerClick">点击+
2021-09-10 22:45:30
714
原创 Vue3中的组合API:ref的使用
一. 操作Dom步骤:1.先在setup中第一变量设置为null2.return出来供模板使用3.模板中绑定上述返回的数据二:获取v-for遍历的DOM或者组件步骤:1,在组件或者需要遍历的dom上定义一个函数2.把该函数绑定到ref上(必须是动态绑定)3.在函数中可以通过参数得到单个元素,这个元素一般都可以放在数组中4.使用<template><h1>ref</h1><div ref="info">hello
2021-09-10 22:39:07
838
1
原创 Vue3中的组合API:computed函数,watch函数
一.计算属性:computed1.计算属性中要有return2.计算属性不能做异步操作,因为他是同步的,异步的不能通过返回值来被处理3.如果使用修改数据set方法与读取数据get方法,computed({})中的参数需要是对象的形式,其中set会自动获取你设置的值,get中要有return,set中没有return1.基本使用的代码:<template><h1>计算属性</h1><button @click="age = 28">点.
2021-09-10 22:31:17
877
原创 Vue3中的组合API:setup函数,reactive,toRef函数,toRefs函数
一.setup1.setup是实现组合api的基础p函数的使用2.触发的时机是在beforeCreate之前3.vue3中已经废弃了beforeCreate 与 Created,被setup函数代替了4.无法访问this,因为组件实例还没有被创建5.需要返回值,用于给模板提供数据与方法6.可以沿用Vue2中的data,但是已经不建议这么做了<template> <div ><h1>{{msg}}</h1><butto
2021-09-10 21:44:58
1111
原创 Vue3与Vue2的区别
现状:vue-next2020年09月18日，正式发布vue3.0版本主流的组件库已经开始支持了Vue3.0版本,其他的生态也会不断完善 element-plus 基于 Vue 3.0 的桌面端组件库 vant vant3.0版本，有赞前端团队开源移动端组件库 ant-design-vue Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发 Vue3的优点: 是目前最火的框架之一, ...
2021-09-10 20:45:22
128
原创 [vue-router] Duplicate named routes definition: { name: “settings“, path: “/settings/“ }路由重复
产生的原因:退出系统,在今日的时候会报路由重复的警告,刷新信息的时候是没有的,因为这使用router.addRoutes动态添加路由,退出系统的时候并没有清除动态路由,所以会报错误效果:解决方式:退出项目系统的时候清空路由在router的index.vue中已经定义了方法:// 清除动态路由export function resetRouter(){const newRouter= createRouter()router.matcher = newRouter.matcher /
2021-09-08 18:05:16
674
原创 刷新页面出现404页面，解决了404之后又出现白屏问题
1)刷新页面出现404页面原因：我们使用addRoutes动态添加路由的时候,404页处在中间位置而不是所有路由的末尾了。解决方式:将404页面路由放在最后从route/index.js中的静态路由中删除path:'*'这一项// 不需要特殊的权限控制就可以访问的页面export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidd
2021-09-08 17:52:30
2948
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人