
一天一个前端小技巧
菜鸟中的菜菜鸟
复制粘贴自闭的前端秃头少年
展开
-
css 省略,三个元素一行,按顺序排放,超出一行,中间元素缩小省略,其他两个正常展示
css缩放要求css代码ps 要求 三个元素,第一个是选择框,第二个是公司全称,第三个是公司简称。展示一行,按照选择框,全称,简称的顺序展示。选择框和简称完全展示,全称根据情况省略 css代码 .li{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center;原创 2022-02-23 10:55:00 · 804 阅读 · 0 评论 -
vue联想词飘红
vue联想词飘红要求代码ps 要求 不对输入字段进行任何处理,对输入字段按字符匹配,不区分英文大小写。 代码 const charReg = /[\[\]\\]/gi; //替换需要转义的字符(这些字符在正则中代表特殊含义) const newText = searchKey.value.replace(charReg, '\\$&')//把输入中需要转义的字符替换(替换后正则规则就匹配原有字符本身) const reg = new RegExp(`[${new原创 2022-02-23 10:46:11 · 648 阅读 · 0 评论 -
css控制一行文本,左侧占据剩余空间,自由放大缩小超出省略,右侧完整展示在右边
template <div class="div-flex"> <div class="left"> {{ info.left }} </div> <div class="right"> {{ info.right }} </div> </div> style .div-flex { display: flex; flex-direction: row; justify-co原创 2022-02-07 10:55:51 · 749 阅读 · 0 评论 -
css 控制多个标签进行裁剪 仅展示一行(vue代码)
css 控制多个标签进行裁剪 仅展示一行templatestyle总结展示 template <div class="tag_div" v-if="judgeShowTag()"> <span class="tag" v-for="(tag, index) in info.tags" :key="`tag${index}`" >{{ tag }}</span > </div> style tag_div {原创 2022-02-07 10:39:25 · 810 阅读 · 0 评论 -
一天一个前端小技巧之js
关于页面跳转路由 不要在路由参数后面加’#’ 和’/’,很容易导致找不到路径 错误示范: //www.baidu.com?Id=12&name=xiao**#/**原创 2021-02-19 13:03:35 · 167 阅读 · 0 评论 -
一天一个前端小技巧之代码风格
需要经常改动的地址或者其他链接之类的,可以设置一个配置文件来进行配置。进而减少代码改动 记得写注释(尤其是难以让人理解的地方) 需要使用encodeURI转译的地方,代码中应该写上未转译的,在使用encodeURI转译。而不是直接使用转译编码后的代码 ...原创 2021-01-28 16:14:57 · 147 阅读 · 0 评论 -
一天一个前端小技巧之css
##css 1 设置div块宽度根据内容适应可设置 width: fit-content/max-content 2 查看css属性兼容浏览器地址 https://caniuse.com/?search=fit-content 3 像类似于fit-content宽度不兼容问题,可给元素设置两个宽度 width:300px(自己定义一个兼容的大小) width:fit-content 若fit-content不起效,就会使用上一个明确值的宽度。 ...原创 2020-12-24 14:37:51 · 144 阅读 · 0 评论