- 博客(18)
- 收藏
- 关注
RSS订阅原创 树形弹窗选择框/vue2/Element/弹框选择
此类选择器根据vue+elementUI实现，使用vue3的可以根据此案例稍作改动即可实现，主要功能有弹出选择、搜索过滤、搜索结果高亮等，此选择器只支持单选，如需多选可在此基础进行改造。
2024-09-11 16:44:47
599
4
原创 el-select多选超过两个选项省略
Element下拉框多选的时候有个毛病，就是选的数量过多就会把下拉框撑高，从而影响布局；但是如果使用了里面collapse-tags属性，element设置的只显示一个，超过一个就隐藏省略了，所以，针对以上限制，小谭做出了超过多个选择才省略的效果
2024-06-27 14:27:32
917
5
原创 下拉框弹窗/基于element ui/自定义selectdialog
小谭最近遇到一个需求：因为下拉选项过多，用el-tree对于逐级寻找很不方便，于是小谭就自己手写了个下拉框弹窗，废话不多说，上效果图：页面展示： 基本上和普通下拉框一样点击下拉框弹出的弹窗： 弹窗内最多可以实现三级下拉如果想实现更多，可以自己根据源码更改哦。
2023-04-14 17:13:31
2684
1
原创 Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉
今天小谭要给大家分享的是基于element ui 的下拉框和树型控件二次分装的树型下拉框，element plus新增了这一组件，但是对于还在使用vue2的我来说，就很不友好。
2023-03-08 13:41:07
7744
3
原创 VuePress使用踩过的坑（一）
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。致力于轻量级的文档框架，是基于vue之上的二度开发，但是在使用的时候也遇到过不少的问题，下面小谭鸡米花就把我在开发过程中遇到的常见问题列举出来，希望对大家有所帮助。
2022-12-07 16:30:42
1125
2
原创 element表格实现列显影/排序功能
1.具体需求今天小谭给大家分享的是element UI里实现表格的列显影以及排序功能，具体实现也很简单 我们先来看一下效果图吧！就是要根据图上的效果来控制表格每一列的显影以及是否可以排序等功能2.具体实现先声明好数据，考虑到需要单独设置每个列的宽度，是否显影，是否排序以及是否超出省略提示等；再加上特殊条件的判断等；tableColumnList: [ { label: "列名",//列名 prop: "name",//对应字段.
2022-04-28 16:11:36
1108
3
原创 IE兼容/IE5兼容踩过的坑
IE5的兼容没想到吧，这年头还有人用IE5呢，但是没办法，有些毕竟老的机构开发的系统比较早，那时候写的是IE5的内核，到现在需要增加一些小功能，所以需要兼容IE5。好了，废话不多说，下面小谭把我用的能够兼容IE5的插件以及踩过的坑给大家总结一下...
2021-12-21 17:47:12
3901
8
原创 前端常见面试题
1.关于防抖/节流题目要求很明确，要求最终输出“searchText1”，并且在500ms后输出“searchText7”，很明显就是关于同一个函数在短时间内重复调用，如何限制其调用频率。 function throttle(action, threshold) { // TODO: } let timer = true; const triggerScroll = throttle((val) => { console.log
2021-10-14 14:23:54
156
原创 小程序将页面转为图片--Wxml2Canvas
如果需要实现将小程序的页面转为图片，第一步是要先把页面转为canvas，再将canvas转为图片。本人使用的是Wxml2Canvas这个插件。其实最开始使用的是wxml-to-canvas这个官方自带的组件。由于这个组件坑太多，本地调试一切正常，但是到了真机调试就会出现创建画布失败的情况，寻找了很久，最多的方法方法就是添加延时器，或者画布的高度设置在1000px以内。但是都没有什么鬼用，最终无可奈何，只能换个插件，重新写。好惨一男的????那我们废话不多说，准备开始搞事情！！第一步 安装插件注意
2021-07-20 17:29:50
19529
31
原创 JavaScript事件，window的事件
事件是发生后并得到处理的操作一、页面相关的事件window.onload；表示等页面所有内容（文档，图片，js，src等）加载完毕执行的代码 window.onscroll；window.onscroll = function（）{ Console.log（“滚动条滚动时触发的事件”）；}window.onresize；window.onresize= function（）{ Console.log（“窗口大小发生改变时触发的事件”）；}二、鼠标事件
2021-01-20 09:25:54
2774
2
原创 弹性盒子/flex
弹性盒弹性盒子（flexbox或者flexble box）是css3的一种新布局方式。其最大的优点是可以适配不同的屏幕大小。因为是css3新增属性，所以会有兼容问题，在部分低版本浏览器上不支持此属性。1.定义弹性盒父元素定义弹性盒：display:flex/flex-inline;前缀写法display：-webkit-flex；2.设置主轴方向定义主轴方向：flex-direction；其属性值有：column表示上下排列； column-reverse表示从下至上排列；.
2020-11-17 19:32:39
665
原创 css元素垂直居中/vertical-align：middle；
前言一直以来关于元素居中都是困扰着前端的问题，为了元素的垂直居中，头发都熬没了，小谭今天为大家介绍几种可以实现元素垂直居中的方法，以及每个方法的优缺点。准备一个名为box的div，设置宽高200px，box里嵌套一个图片，图片宽高为100px，如图：我们需要实现图片在box的居中，如图：实现水平居中很简单，给box添加属性text-align：center；即可，实现垂直居中的方法有：1.行高以及vertical属性给box添加行高并设为200px（与box等高），再在b
2020-11-14 15:20:57
2821
1
原创 CSS3：overflow属性详解
1.Overflowoverflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden， 就可以把超出容器的部分隐藏起来；如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto；overflow：auto 属性如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条，滚动条也可以单独设置，例如overflow-x：hidden；overflow-y：auto；这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候，两个属性都需设置属性值。
2020-10-30 16:48:52
30689
5
原创 Transform的属性及使用
前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、transform是什么？Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。二、transform的属性值假如有一个盒子，高度两百像素，宽度两百像素，设置一个背景颜色，下面来用这个盒子来观察transform每个属性值的效..
2020-10-23 17:18:11
33468
7
原创 3D导航翻转效果
文章目录前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言使用纯css实现3D导航栏，这种导航栏优点在于相对于其他平面导航，这种导航增加了3D效果，对于用户来说体验更好，缺点在于代码繁琐，所需时间成本较高，并且不能兼容ie浏览器效果图：一、基本框架先创建一个大的div，将长方体的上下左右前后的四个面“包住”<div id="father-1"> <div id="son-front-1">.
2020-10-06 09:03:05
367
原创 纯CSS实现3D正方体动画效果
目录前言正文1.基本架构2.书写每个div样式3.为需要产生动画的一面单独设置样式4.设置鼠标hover效果5.优化总结前言纯CSS实现3D正方体动画效果，此方法是通过transform的旋转（rotate）和位移（translate）实现的，具体效果是鼠标滑过时正方体的一个面会产生位移效果图正文1.基本架构先在body里添加div作为参考，再在这个div里添加六个div，分别代表正方体的六个面<div clas...
2020-10-05 11:32:36
1589
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人