VUE的内容折叠实现

小朋友呢 发表于 2024-7-8 16:28

就比如下图这样的，默认就显示一半内容，只有点击下面那个展开按钮才显示完整内容，这种效果在VUE里面有什么框架可以实现的。

lucklys 发表于 2024-7-8 16:57

max-height 不就行了

冰茶荼 发表于 2024-7-8 17:02

本帖最后由冰茶荼于 2024-7-8 17:04 编辑

手搓一个不就好了封装一个指令 v-toggle="show" 这种使用 Vue.directive
下面代码我没测试不过大概就是这个意思

export default {
update(el, binding, vnode) {
const { value } = binding;
if (value) {
   el.style.height = "400px";
   el.className += "my-hide";
} else {
   el.removeAttribute("style");
}
},
};
然后再加一个全局样式

.my-hide {
position: relative;
}

.my-hide::after {
content: "";
height: 200px;
bottom: 0;
width: 100%;
left: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

可以试一下

lucklys 发表于 2024-7-8 17:04

默认
max-height: 140px;
overflow: hidden;
transition: max-height 0.7s ease;
点击后
max-height: 2000px;

notproblem 发表于 2024-7-8 17:24

今天正好研究了一个实现思路，容器高度设置为100px，overfow: hidden; 然后加一个展开按钮在后面就行了。点击展开，移除高度和overflow样式

侃遍天下无二人 发表于 2024-7-8 18:56

我可是烦死这种东西了，往往还有个关注博主查看全文的条件

潇洒三叔 发表于 2024-7-8 20:05

简单一点就是固定高，点击之后 height：auto，缺点挡不住F12

爱吃鹅肉饭 发表于 2024-7-8 22:25

这个根本不需要用什么框架，html、css还有js就可以实现，原理就是设置初始高度，点击更多的按钮或者箭头以后，监听点击事件，修改对应容器的高度，控制样式即可

爱飞的猫 发表于 2024-7-9 03:03

这种效果在VUE里面有什么框架可以实现的。

右键审查元素，整个 HTML 结构复制粘贴过去就好了。

大概实现就是容器有最高高度限制，字节点超过高度后不显示。
点击展开按钮后将高度限制去除。

页: [1]

吾爱破解 - 52pojie.cn's Archiver

VUE的内容折叠实现