手机端端文本内容超过一定高度时，下方的展开/收缩功能

<template>
  <div class="about">
    <ul :class="{ active: !flag }">
      <li v-for="(item, index) in todos" :key="index">{{ item.text }}</li>
    </ul>
    <p class="zhankai" v-if="todos.length > 6" @click="showTag">
      <span>{{ flag ? '展开' : '收起' }}</span>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { text: '生产标签' },
        { text: '生产标签' },
        { text: '生产标签' },
        { text: '生产标签' },
        { text: '生产标签' },
        { text: '生产标签' },
        { text: '生产标签' },
        { text: '生产标签' },
        { text: '生产标签' },
      ],
      flag: true,
      screenWidth: window.innerWidth,
    }
  },
  methods: {
    showTag() {
      this.flag = !this.flag
    },
  },
  mounted() {
    let that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = window.innerWidth
        this.screenWidth = window.screenWidth
      })()
    }
  },
  watch: {
    screenWidth(val) {
      this.screenWidth = val
      console.log('11', this.screenWidth)
    },
  },
}
</script>
<style lang="less" scoped>
p,
ul {
  margin-bottom: 0px;
}
.about {
  width: 200px;
  position: relative;
  padding-bottom: 28px;
}
ul {
  width: 100%;
  height: 40px;
  overflow: hidden;
}
.zhankai {
  position: absolute;
  bottom: 0px;
  line-height: 24px;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.active {
  height: auto;
  overflow: hidden;
}
li {
  width: 100%;
  color: #f1f1f1;
  font-size: 14px;
  background-color: green;
  margin-top: 1px;
  list-style: none;
  height: 40px;
  line-height: 40px;
}
span {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: #aaa;
  line-height: 28px;
}
</style>