![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript解决前端开发易用性问题
qian_li_hui
这个作者很懒,什么都没留下…
展开
-
textarea高度自适应
textarea高度自适应得以实现。代码如下:HTML:<div id="message-textarea"> <pre><span></span><br></pre> <textarea></textarea></div>CSS:#message-textarea{ max-height: 50px; outline: 1px solid #000; positi原创 2021-10-12 13:47:07 · 355 阅读 · 0 评论 -
移动端开发评论模块的时候添加一些emoji表情
在做一个评论模块的时候,首先做一个遮罩层,在点击评论是显示,想在评论的内容添加一些emoji表情,在网上搜了一堆之后,发现最适合的还是v-emoji-picker组件库。首先是下载该库npm install v-emoji-picker(我这边前端的依赖管理用的是npm)下载完成后,你可以选择在全局使用该组件,也可以在某个页面使用。因为这个组件没有设置是否显示和隐藏的属性,所以我们可以使用vue的指令v-show 来使这个组件是否显示出来 <div class="overlay-input原创 2021-04-24 14:07:32 · 483 阅读 · 1 评论 -
window.location各方法应用和区别
window.location应用一、Reload()reload() 方法用于重新加载当前文档。 如果该方法没有规定参数,或者参数是 false,与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,绕过缓存,从服务器上重新下载。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。二、replace()replace() 方法可用一个新文档取代当前文档。该方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 His原创 2021-04-06 18:30:58 · 286 阅读 · 0 评论 -
实现点击页面其他部分隐藏指定div
实现点击其他部分隐藏某个div一、在点击展示的元素上设置@click.stop=""<div class="proTitle" @click.stop="showModel()" style="width:250px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display: flex;align-items: center;"> <span type="text" class="" id="na原创 2021-04-06 18:29:30 · 282 阅读 · 0 评论 -
搜索快速输入重复查询问题总结
搜索快速输入重复查询问题总结移动端开发在进行条件搜索,在进行快速输入条件是会发现搜索的数据有重复的现象,解决方法如下1、对onInput设置时间延迟$('.centerSearch').bind('input propertychange', function() { setTimeout(() =>{that.searchProcessContent() },300); });2、数组复制时,定义一个空数组,将接口获取的值push到空数组中,将原创 2021-03-31 14:48:41 · 162 阅读 · 0 评论 -
字母大小写转换(搜索信息是忽略大小写)
字母大小写转换(搜索信息是忽略大小写)具体情况:项目搜索功能是忽略字母大小写的,也就是搜索框输入abc 同样能搜索出ABC文件,但在数据展示时做了控制,也就是只有当数据名称中包含输入文字才可以展示,因此同样需要对字母大小写进行处理。封装转换大小写方法mutation(stringFirst, stringSecond) { var thizz = this var word = ""; for (var i = 0; i < stringSecond.length; i+原创 2021-03-31 14:41:06 · 310 阅读 · 0 评论 -
面包屑横向滚动条动态加载数据默认显示最右侧数据
面包屑横向滚动条动态加载数据默认显示最右侧数据在移动端项目开发中,文件浏览层级面包屑展示,为提高项目易用性,提出需求:在面包屑长度大于父级div长度是显示横向滚动效果,且默认展示最右侧数据这个问题我踩坑无数次,在浏览文件就我确定解决方案是将ele.scrollLeft = ele.scrollWidth;但是我尝试在页面初始化mounted中控制,发现滚动条长度增加时不会进行第二次初始化。我查阅资料部分文档在watch中监控滚动条的变化,从而进行赋值操作,无论怎么尝试,都不能解决问题。偶然翻阅到vue原创 2021-03-31 14:25:19 · 564 阅读 · 1 评论 -
搜索框输入文字查询数据,需要匹配文字高亮显示
移动端开发经常遇到在搜索框输入文字查询数据,为提高易用性,需要匹配文字高亮显示,一、不区分大小写brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#248adf">' + keyword + '原创 2021-03-31 14:08:51 · 1111 阅读 · 0 评论