vue项目中组件和solt使用_solt项目-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_30405009/article/details/95972838

最近遇到了难题，是一个关于产品的优化问题。

折叠展开文字是不是听起来很简单的样子，可是就是有一个表格的问题把我给难住了，想了好久也没有想明白，最终还是我们的老大救援，做出来了。佩服呀！!!!

今天就这我研究代码的时间，借花献佛一下。

我的操作是这样的：

我需要先在整个页面的数组中添加一个新的值，来判断该字符串是不是超过了限定的宽度，如果超出了就为true，否则就是为false。但是添加一个值还是不够，我还需要再每行的值中添加一个值来判断，当前的数据是展开还是折叠，也就是我必须往数组中不断的加入新的值，才能实现需求。但是这个方式还有一个问题就是，我当前的窗口如果改变表格的大小也会随着改变，当表格显示到一定程度的时候，又有新的一行显示了三个点，但是我的代码并不能随着行的改变，这就需要解决新的问题，我要不断的适应浏览器的窗口变化才行。

这里老大使用了throttle-debounce，这个具体是什么我也不是很了解，反正就是会计算监听浏览器的变化，重新调用方法，是有延迟的时间设定，不过还是挺管用的，需要用的小伙伴，具体去问度娘。

下面就是我研究的内容，上代码的时间，想要做折叠的小伙伴可以研究一下，具体的写法，方法也不是很复杂。

我针对当前的表格，新建了一个组件，来专门做折叠，我使用的vue框架，这里就是vue 的组件喽！

<template>
  <div :class="showNoWarp">
    <i
      class="el-icon-d-arrow-right text-overflow-show"
      v-if="showButton"
      @click="toggleExpanded(true)"
    ></i>
    <div class="col-expand" ref="content">
      <slot></slot>
    </div>
    <div
      class="text-overflow-show"
      v-if="isExpanded"
      @click="toggleExpanded(false)"
    >收起</div>
  </div>
</template>
<script>
import { debounce } from "throttle-debounce";
let renderHandler;
export default {
  data() {
    return {
      isExpanded: false, //是否显示折叠按钮
      isOverflowing: false, //是否被隐藏
    };
  },
  computed: {
    showButton() {
      return this.isOverflowing && !this.isExpanded;
    },
    showNoWarp() {
      return {
        "text-overflow-is": !this.isExpanded
      };
    }
  },
  mounted() {
    this.updteContent();
    renderHandler = debounce(300, this.updteContent);
    window.addEventListener("resize", renderHandler);
  },
  methods: {
    updteContent() {

      this.$nextTick(function() {
        const { clientWidth, scrollWidth } = this.$refs.content;
        if (clientWidth == undefined || scrollWidth == undefined) return; //当前的窗口在不停的改变会有报错
        this.isOverflowing = clientWidth < scrollWidth;
        const isResize = event instanceof Event && event.type === "resize"; //检测当前的窗口监听事件
        if (!this.isOverflowing || !isResize) this.isExpanded = false;
     
      });
    },
    toggleExpanded(bol) {
      this.isExpanded = bol;
    }
  }
};
</script>
<style scoped>
.text-overflow-is {
  white-space: nowrap;
}
.col-expand {
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-overflow-show {
  color: orange;
  float: right;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 5px;
}
</style>

好了，代码已经复制粘贴了，接下来就是自己在这个组件中学到了什么？

布尔值使用逻辑，要想方设法的实现自己想要的结果，不惜多定义几个变量
组件的使用不一定非要接收父组件的值，还可以使用solt插入值（这个着实太方便了）不知道的小伙伴要赶紧去官网复习一下知识点哦！
显示省略号不一样需要控制宽度，只要控制好父级元素的宽度就好了，只要父级元素有宽度就能使用属性 text-overflow: ellipsis;（这里真是摆正了我的思想误区呀！！）

有没有好的方案吗？欢迎各位小伙伴出计策~~