weixin_48837605的博客

js部分文字实现跳转或者高亮

js小方法

1.使用场景：传入后端的方式：js文件中： { name: '创建日期', // input框前的名称 desc: 'createDateEq', // 传入后端的字段名称 type: 'dated', // 格式类型，本文使用ant desgin中的date ,自己又重新定义的dated childrenDesc: ['createTimeStart', 'createTimeEnd'] // 使用选择日期需求传入后端的字段名 }...

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

判断对象的时候用的比较多 不为空不为null不为undifined 不为数字0 不为数字串0 备注 示例 ! 可以判断对象中是否存在这个属性,第2项存在,第1项不存在的时候,全局提示 if (num === 1 && !this.param['matnrLike'] && this.param['matnrBt']) {return this.$message.error('请添加物资编码之后再添加.

与其他人开发一个功能正常流程：（自己）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...

var str="12345678";var reg=/^(\d{4})(\d{2})(\d{2})$/;str = str.replace(reg,"$1-$2-$3");alert(str); //1234-56-78

1.onselectstart　　这个事件主要是用于禁止选择网页中的文字。代码为：document.onselectstart =function(){ return false; }注意此事件对input和textarea无效。2.onselect　　此事件是在选择textarea或input内的内容之后触发。所以只有input和textarea标签支持。例如:<input type = 'text' id = 'input>

Vuex一.解决的问题不同的数据之间需要保持同步数据的修改是可以追踪的多个组件之间需要共享数据的时候(跨组件通信)父与子之间props,兄弟之间this.$emit还是需要用vue中的数据传输二.什么是VuexVuex是专门为Vue.js应用程序开发的状态管理模式;他采用集中式存储管理数据三.官网:官网地址: Vuex 是什么？ | Vuex四.配置项stata:数据的存储位置 相当于data 组件和模块中是函数形式state(){return{}}mut

封装的确认框组件:<template> <div class="xtx-confirm" :class="{ fade: fade }"> <div class="wrapper" :class="{ fade: fade }"> <div class="header"> <h3>{{ title }}</h3> <a href="JavaScript:;" class

效果1:相同属性的互斥点击效果2:自我点击选中与取消选中的状态代码实现:自我点中与取消的逻辑分析: 1.选中的状态时是有一个类名:selected2.但是后台的数据中并没有标志符号来区分是否选中,这个时候需要自己添加一个类名3.添加点击事件实现标识符的切换false与true,由此来确定是否选中互斥的效果逻辑分析:1.点击事件中,将渲染的数据list全部传递过来2.过滤出点中的自己...

效果:数据未回来就是加载中,加载数据完成后就会显示没有更多的数据了步骤一,定义无限下拉的商品组件:xtx-infinite-loading.vue使用了vueuse中的useIntersectionObserve来监听是否达到了可视化界面中,如果到达了界面,就像父组件传自定义属性load通知父组件做接下来的操作<template> <div class="xtx-infinite-loading" ref="container"> <div c..

vue3.0中v-model会拆解成 属性 modelValue 和 事件 update:modelValue父组件:<div class="check"> <XtxCheckbox v-model="sortParams.inventory">仅显示有货商品</XtxCheckbox> <XtxCheckbox v-model="sortParams.onlyDiscount">仅显示特惠商品</XtxCheck.

效果:组件功能分析： 固定顶部显示，有三种类型：成功，错误，警告。 显示消息提示时需要动画从上滑入且淡出。 组件使用的方式不够便利，封装成工具函数方式。 注:Vue2.0使用的是Vue.prototype.$message = function(){} Vue3.0中使用的是app.config.globalProperties = function(){}挂载原型方法使用组件:<Message text="手机号或密码错误" type...

效果:文档：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..

<template> <div class="goods-tabs"> <nav> <a :class="{ active: currentName === 'GoodsDetail' }" href="javascript:;" @click="toggle('GoodsDetail')" >商品详情</a > <a href="javascript:;" :class="{.

目的:当图片进入可视区域的时候去加载图片,且数据要是加载失败,会显示默认的图片需解决的问题:1.如果监听图片进入可视区域2.直接操作图片,给他的src属性赋值3.自定义指令的规则自定义指令实现如下的src\components\library\index.js注意:使用webapi:IntersectionObserve ,vueuse中的useIntersectionObserve的底层就是由这个webAPI而来的其中有两个方法 observe.observe(imgDom

效果:切换前点击右侧的按钮,切换后没有动画,可以展示图片的切换,可以考虑计算属性computed(过滤一下index,如果为0就是显示前5张图片,如果为1显示后5张图片,computed根据index的不同而实时更新,显示页面也就有不同)<template> <HomePanel title="热门品牌" sub-title="国际经典 品质保证"> <template v-slot:right> <!-- 右侧的.

实现的目的:实现当前组件进入可视区域时候在加载数据,然后渲染图片@vueuse/core中的useIntersectionObserver来监听是否进入可视区域的行为,但是须要配x合Vue3中的组合API才能实现先来分析一下useIntersectionObserver函数const {stop} = useIntersectionObserver(target,fn,options)// target表示被监听的Dom元素 必须是dom容器,而且还必须是Vue3的方式绑定的dom对象

使用的场景:刚进入页面.数据还没有显示,图片也没有,可以搭配骨架屏,带有这些动画!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 离开中

实现的基本功能: 自动播放，暴露自动轮播属性，设置了就自动轮播 如果有自动播放，鼠标进入离开，暂停，开启 指示器切换，上一张，下一张 销毁组件，清理定时器 步骤:1.实现通用轮播图样式的基本布局2.设置为全局组件3.设置业务组件4.业务组件导入到首页当中(home.vue)1)在src/components/library/Carousel.vue(这是轮播图的通用组件基本构建,全局注册)<template><div c.

// 定义混入方法时，需要在类选择器之后添加一个小括号// 定义混入方法.abc () {color: red;}.active {border: 1px solid blue;// 使用混入方法.abc();}.current {background: orange;// 使用混入方法.abc()}// 混入的好处：把重复的代码抽离出去，使用的时候可以多次导入，降低代码的冗余度...

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

1.父传孙数据:provide2.子孙得到数据:inject一.爷爷传孙数据:provide爷爷组件:<template> <div>我是爷爷组件我有{{ money }}元钱</div> <hr /> <Child></Child></template><script>import { ref, provide } from 'vue'import Child from

1.父组件向子组件传递数据:props2.子组件向父组件传递数据:emit一:父组件向子组件传递数据:props父组件:<template> <div>我是父组件我有{{ money }}元钱</div> <hr /> <Child :money="money"></Child></template><script>import { ref } from 'vue'impo

原因:setup函数中内容太多,需要将复杂的功能可以拆分模块,然后倒入使用,方便后期的复用和定期的维护App.vue 中<template> <div><div>案例</div><div>坐标{{"{"+x+"px"+y+"px"+"}"}}</div><hr><div>{{count}}</div><button @click="handlerClick">点击+

一. 操作Dom步骤:1.先在setup中第一变量设置为null2.return出来供模板使用3.模板中绑定上述返回的数据二:获取v-for遍历的DOM或者组件步骤:1,在组件或者需要遍历的dom上定义一个函数2.把该函数绑定到ref上(必须是动态绑定)3.在函数中可以通过参数得到单个元素,这个元素一般都可以放在数组中4.使用<template><h1>ref</h1><div ref="info">hello

一.计算属性:computed1.计算属性中要有return2.计算属性不能做异步操作,因为他是同步的,异步的不能通过返回值来被处理3.如果使用修改数据set方法与读取数据get方法,computed({})中的参数需要是对象的形式,其中set会自动获取你设置的值,get中要有return,set中没有return1.基本使用的代码:<template><h1>计算属性</h1><button @click="age = 28">点.

现状: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的优点: 是目前最火的框架之一, ...