AliveSeven's Blog

前言：最近在开发菜单权限分配的时候，用到了Element-Plus里面的Tree树形控件来显示菜单，但是在提交确认的时候需要知道当前已选的菜单节点，所以引出了题中的问题 实现方法其实也很简单，Element里面有个check方法，这个方法有两个参数可以传入，而第二个参数就是我们要的，第二参数即树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 12345678910111213141516// 传入的菜单const menuArray : any = ref([])// 传入半选中的菜单const menuHalfArray : any = ref([])// 点击菜单管理多选框const handleNodeClick = (nodeObj : any , SelectedObj : any) => { if(SelectedObj.checkedNodes){ menuArray.value = SelectedObj.checkedNodes ...

前言：Element-UI 使用了时间组件，进入组件前，从后台获取时间数据，想把这个时间赋值给时间组件绑定的变量上面去，发现赋值之后没有反应，并且 产生原因 主要原因应该是Vue2无法检测到数组和对象的某些变动，例如直接通过索引设置一个元素或者改变对象的属性。 并且Element时间组件绑定的变量也是数组，所以，当我们想要在组件内部修改父组件传递过来的数据时，需要使用 Vue.set() 或者 this.$set() 方法来触发响应式更新。 而@change时间无法触发的原因，可能是由于使用了双向绑定或者直接改变了父组件传递给时间日期范围组件的值，导致组件内部的数据已经和外部的值不同步了。 解决方法Vue.set()或者this.$set() Vue实例代码 123456789<template> <div> <el-date-picker :value="dateRange" type="daterange" @change="handleChange&quo ...

前言：我们在用Vue进行模块化、组件化开发的时候，可以通过给样式加上scoped，避免了父组件的样式影响了子组件的样式。而/deep/ 的作用和scoped也有点类似。 css中的scoped使用<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。 通过给style添加scoped，使它的css只作用于当前组件的元素。 123456<style scoped> .box{ color:'#999'; }</style> 深度选择器 /deep/使用了外界的组件（比如像Element-UI、Ant Design、Vant等组件库中的组件）或者自己开发一个组件，修改一处就可能会影响到用这个组件的所有样式，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。/deep/就能实现。 比如： 123.box /deep/ .el-tabs__item { color: #30313 ...

前言：虽然现在网上有很多组件库都有轮播图组件，但是我觉得这个东西还是需要自己动手写下好，里面其实有很多有用的知识点的，而且老是用组件库也不好，万一组件库中的轮播图不符合项目的要求或者UI不合适，诸如此类很多情况，还是自己写一个适合自己的最好。 功能分析 初级轮播图功能介绍： ①左右两端有左右按钮； ②下方有小球指示当前是第几张图片； ③无切换效果； ④如果两秒中用户没有点击轮播图，则从左到右自动播放。 实现思路HTML中需要包括一个大盒子class=wrap，为轮播图的盒子。一张一张的图片可以用无序列表存储，左右按钮使用button，下方圆点也用无序列表，并为每一个圆点设置计数器data-index。 HTML部分12345678910111213141516171819<div class="wrap"> <ul class="list"> <li class="item active">0</li> <li class=&qu ...

前言：在进行HyBridge开发的时候，遇到这样的问题，在移动端端使用Vant中的Popover组件，点击组件外的任意地方能实现组件的关闭，但是到了PC端这个效果就没了。 因为Vant中的组件默认适配移动端，在PC端中没法监听到mouse事件。 解决方法引入@vant/touch-emulator即可，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。 安装模块： 1npm i '@vant/touch-emulator' -S 引入模块 在main.js中引入即可 1import '@vant/touch-emulator';

文本限制行数，超出后显示为省略号主要把装着文字的盒子设为-webkit-box布局，然后设置以下的属性即可，主要-webkit-line-clamp是为限制的行数。 123456display: -webkit-box; /* 对象作为伸缩盒子模型显示 */-webkit-line-clamp: 2; /* 显示的行数，这里限制为两行 */-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式，这里为向下排 */overflow: hidden; /* 超出盒子部分隐藏 */text-overflow: ellipsis; /* 文字超出两行的部分为省略号 */word-break: break-all; /* break-all(允许在单词内换行。) */ 文本识别’\n’换行符 将文本盒子white-space设为pre-wrap 1234// pre-wrap 保留空白符序列，但是正常地进行换行。text{ white-space: pre-wrap; } 这里讲一下white-space这 ...

前言：开发H5的时候，有时候需要嵌入到IOS、安卓或者PC等其他端处，或者单纯是一个H5，可能有时候需要禁止用户对页面进行缩放和放大的操作。 meta是什么 HTML中的meta标签用于提供关于网页的元数据信息，这些信息可以帮助浏览器正确地展示网页内容，同时也对**搜索引擎优化(SEO)**和社交媒体分享有一定作用。 meta标签主要包含name属性、http-equiv属性和content属性。这三个属性都是meta标签必须的属性。 meta标签可以包含以下信息 网页关键词（keywords）：指定与页面相关的关键词，以便搜索引擎更好地理解并索引该页面。 网页描述（description）：提供一个简短的描述，告诉搜索引擎和用户这个页面是关于什么的。 编码方式（charset）：指定网页使用的字符编码方式，避免出现乱码问题。 视口（viewport）：指定如何在移动设备上显示网页，使得用户可以更好地浏览。 其他信息：还可以包含其他自定义的元数据信息，比如作者、生成日期等。 案例 name属性用来指定元数据的名称，如“keywords”、“description”等；conte ...

前言：这个真的很重要，开发的时候利用好宏任务和微任务的特性，能够把帮助我们在执行业务函数的时候设定一定的顺序 JavaScript的单线程和任务队列 Js的内部引擎是单线程的，但是浏览器它是多线程的，单线程一意味着所有任务需要排队，前一个任务结束，才会执行后一个任务。 如果前一个任务耗时很长，后一个任务就不得不一直等待。而且有些时候，有些任务会挂载于等待状态，这个时候其实可以先去运行别的任务，等上一个任务需要再启动的时候，再来运行它。 于是，为了解决这个问题，有了同步任务（synchronous）和异步任务（asynchronous）。 同步任务指的是，在主线程上，排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务 异步任务指的是，不进入主线程，而进入“任务队列”（task queue）的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。 这里借用一张图，就很好解释了同步和异步任务的执行过程 宏任务和微任务前面我们已经介绍了同步任务和异步任务的执行过程，为了协调这些任务有条不紊地在主线程上执行，页面进程引入了消息队列和事件循环机制。 宏 ...

前言：今天在学习过程中用到了Element-Plus + Vue3.2来开发一个管理系统，但是在用户表格的增删改查的开发中，表格中的单条数据的编辑问题困扰了我，一开始是用ref()取定义了一个currentRow对象（单条数据） 详细见：https://element-plus.gitee.io/zh-CN/component/table.html#%E5%8D%95%E9%80%89 后面在编辑的时候发现不对劲，每次编辑完再重新请求数据的时候会报下面的错误。 然后在网上找了好久也没找出解决方案来，打断点Debug弄了一个小时感觉应该是ref()它的这个问题。我指定ref()它定义了响应式的属性， 而ref()所定义的属性的更改是对变量进行了类似浅拷贝的操作，可能因为在重新请求数据库数据的时候，ref()所定义的currentRow失去了值变为null，具体是为什么我也不知道，虽然这个错误并没有影响页面的增删改查，还是没有问题，但是我觉得这样还是有点问题。 所以我改成用reactive()来定义这个currentRow，但是呢，用reactive()定义的数据再更改的时候，页面没 ...

Js 给整个document添加监听点击事件，隐藏div 给div添加监听点击事件，阻止冒泡 HTML代码： 1234<div class="box"> <button class="Nav">导肮展开栏</button> <div class="menu">菜单</div></div> Js代码： 123456789101112131415161718192021222324252627 var nav = document.getElementsByClassName('Nav') var menu = document.getElementsByClassName('menu') // 点击body触发函数 document.onclick = function(){ menu[0].style.display = 'none' ...