js控制collapse,js控制显示和隐藏

本文目录一览：

1、vue实现collapse折叠板动画，可设置动画时间，动画延迟等
2、Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开
3、js ,控制光标位置
4、Vuejs高度的改变动画探索：折叠面板Collapse组件的最佳实现方案

vue实现collapse折叠板动画，可设置动画时间，动画延迟等

但是这个动画并不支持设置时间，进一步封装还是可以的。

重写了一个collapse 的动画。

效果如下

新建collapseMixins.js，内容如下

建立一个collapseTransition.js，内容如下

collapseMixins.js是一个混合类，因为我封装了其他不同类型的动画，所以做了一个mixins。

使用的时候引入collapseTransition组件就行。

Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开

在element-ui中采用NavMenu导航菜单作为系统菜单的实现。

官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。

我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。

解决方案

1.实现一个按钮，

2.在data中定义一个数据collapse

3.实现方法toggleCollapse

4.在el-menu中动态绑定属性值collapse

问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：

js ,控制光标位置

1、获取光标位置

function getCursortPosition (ctrl) {

//获取光标位置函数

var CaretPos = 0; // IE Support

if (document.selection) {

ctrl.focus ();

var Sel = document.selection.createRange ();

Sel.moveStart (‘character’, -ctrl.value.length);

CaretPos = Sel.text.length; }

// Firefox support

else if (ctrl.selectionStart || ctrl.selectionStart == ‘0’)

CaretPos =ctrl.selectionStart;

return (CaretPos); }

2.设置光标位置

function setCaretPosition(ctrl, pos){

//设置光标位置函数

if(ctrl.setSelectionRange) {

ctrl.focus();

ctrl.setSelectionRange(pos,pos);

} else if (ctrl.createTextRange){

varrange = ctrl.createTextRange();

range.collapse(true);

range.moveEnd(‘character’, pos);

range.moveStart(‘character’, pos);

range.select();

}

3、将光标移动到输入框

ctrl.focus();

Vuejs高度的改变动画探索：折叠面板Collapse组件的最佳实现方案

使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。

要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。

当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。

当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。

现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransition.vue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧？

以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗？是不是非常简单？现在，我们实现折叠面板组件。使用过element-ui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成；

现在，我们先实现CollapseItem.vue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行；源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。

这是CollapseItem.vue组件的样式。

现在，我们实现Collapse.vue组件。该组件仍然只有30多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了；

以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单？童鞋们都理解了吗？不管有什么疑问，童鞋们都可以问我。感谢阅读！

原创文章，作者：LDJX，如若转载，请注明出处：https://www.506064.com/n/149152.html