VUE的内容折叠实现

小朋友呢

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

lucklys

  max-height 不就行了

冰茶荼

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

[JavaScript] 纯文本查看 复制代码

export default {
  update(el, binding, vnode) {
    const { value } = binding;
    if (value) {
      el.style.height = "400px";
      el.className += "my-hide";
    } else {
      el.removeAttribute("style");
    }
  },
};

然后再加一个全局样式

[CSS] 纯文本查看 复制代码

.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

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

notproblem

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

侃遍天下无二人

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

潇洒三叔

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

爱吃鹅肉饭

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

爱飞的猫

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

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

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