2023
上一章我们利用scroll-view组件的scroll-into-view属性实现了类似锚链接的功能。除了利用属性外,scroll-view组件还提供了一个scrollTo方法,使页面滚动到指定位置。可配置参数如下:可以看到参数view通过把值设置为某子元素id的方法跳转对应位置,实现思路与scroll-into-view属性是类似的。我们需要通过document.getElementById获取...
我们写页面时经常需要实现类似根据城市首字母找到对应城市的功能。之前在html中可以利用给元素添加id的方法,通过a标签锚链接到页面对应位置。如< a href ="a.html#first">从其他页面跳转到a.html页面的#first处 但是在使用avm框架的时候发现,框架不支持使用a标签,更不支持锚链接了,只能找寻其他方法。看了一下官网,发现avm所提供的scroll-view组件中有提供一...
ElementUI的输入框里有一个属性,叫做show-password,他的作用是在输入框后面出现一个小眼睛,点击小眼睛就能在密码框和输入框之间切换,但是有个小缺点,密码可见和密码不可见的时候,小眼睛的图标是不会变的,虽然不影响使用,但是在美观方面还是不太够格,上一篇文章我们讲述了如何在项目中使用阿里巴巴矢量图,现在我们通过阿里巴巴矢量图来修改小眼睛的图标。 首先我们来到阿里巴巴矢量图标库随...
上一章我们已经完成了FNScanner 扫描器的封装。实际应用中,我们肯定不止使用一次扫码器。为了能够更好的复用,扫码器页面不能放逻辑处理,我们需要把具体的逻辑处理写在各自页面。当扫码完成,利用AVM框架中的sendEvent方法将事件广播出去,然后由各自打开扫码器的页面通过addEventListener方法监听并进行逻辑处理。有关sendEvent和addEventListener的内容可以点...
今天给大家介绍一下vscode用户代码片段,类似于一种快捷键,当输入特定文本的时候,vscode会自动补充好你预设的文本。今天拿vue2的用户代码片段为例子,这个也是在网上流传的较为广泛的文本,我略微做了一下修改,更符合我的写作习惯。大家读完这篇文章后也能修改内容,找出符合自己的就好。 在vscode的设置里可以找到。 单击后会出现以下输入框,点击新建全局代码片段文件并命名。 进入后可以...
翻了一下vantUI官网,发现没有可以直接使用的树形控件或层级选择器的组件,所以尝试用checkbox实现。我们想实现的是如图所示的功能,当选中一级选择器后,其所属的二级选择器能够被全选;当取消二级选择器的全选状态时,一级选择器也同时取消选中状态;最外层还有一个全选按钮控制所有选择器的全选。DOM结构如图所示:首先实现一级选择器控制二级全选的功能。van-checkbox有提供toggleAll方...
上一篇我们已经实现了只有一组复选框组的时候通过一级选择器控制二级全选,但是很多情况下都不止一组复选框组,比如需要循环渲染后台数据时,由于外层标签有vfor循环,会导致出现很多个ref注册的组件,此时的toggleAll方法便会失效或者报错。抛弃自带的全选方法,我们这里使用map函数处理数据。首先给一级选择器添加click事件。注意要使用click事件而不是change事件,否则后面实现取消全选功能...
我们都知道原生JS获取DOM元素是很麻烦的,需要用到如document.getElementById这么长的API来获取。于是vue可以帮我们解决这个问题,vue也有自带的获取DOM的方法,那就是ref。它不仅可以获取DOM元素还可以获取组件。首先,需要用ref来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如图所示:如果在普通的 DOM 元素上使用,引用指向的就是 ...
利用迅睿cms做一个选项卡切换(下)如上文所言,选项卡切换基于jq,那这里就是基于迅睿cms了。这里需要一定的基础,请大家先查看我站关于迅睿cms的知识。这里主要思路是循环套循环,话不多说,请看!首先,我们先循环列表部分。 拿到当前页面的栏目id,然后循环他的子集,父栏目为当前的栏目id。然后通过第二...
选项卡切换基于jq,所以请先引入jq。不需要很高深的代码,只需要简单了解下jq就可以做出选项卡切换。不废话直接贴一段代码。具体可以参考下我在csdn上的博客。 $(".leftHead ul li").click(function () { let $index = $(this).index() $(this).addClass("on").siblings().re...