移动端内容超出一行省略并自适应出现--展开收起功能

1、自定义一个组件textTips 里面使用的icon 是VantUI的 自己可以随意替换

<template>
  <!-- 多出一行出现展开、收起按钮 -->
  <div class="top-tips">
    <div class="tipsBox" :class="isOpen ? 'end' : 'bas'">
      <span class="f14 potips" ref="isOverflow" :class="isOpen ? '' : 'van-ellipsis opentext'">
        <span class="remekTitle">{{ title }}：</span><span>{{ text }} </span>
      </span>
      <span v-if="showOpen" class="f14 inTips" @click="inTips">
        <span>{{ isOpen ? "收起" : "展开" }}</span>
        <van-icon :name="isOpen ? 'arrow-up' : 'arrow-down'" />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "textTips",
  data () {
    return {
      isOpen: false, //默认展开|收起
      showOpen: true, //是否显示展开|收起按钮（文字）
    };
  },
  props: {
    // 显示的文字
    text: {
      type: String,
      default: "none",
      required: true,
    },
    // 标题
    title: {
      type: String,
      default: "none",
      required: true,
    },
  },
  mounted () {
    // 是否超出一行（超出则显示展开/收起）
    // 获取标签内容的宽度和屏幕可视宽度作对比
    this.showOpen = this.$refs.isOverflow.clientWidth < this.$refs.isOverflow.scrollWidth;
  },
  methods: {
    inTips () {
      this.isOpen = !this.isOpen;
    },
  }
};
</script>

<style lang="less" scoped>
.top-tips {
  display: flex;
  align-items: center;
  position: relative;
  .potips {
    padding: 2px 0;
    color: #9ea4a9;
    min-height: 16px;
    flex: 1;
  }
  .inTips {
    color: rgb(91, 169, 245);
    display: flex;
    align-items: center;
  }
  .tipsBox {
    // 是否在一行显示，或者自认换行
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .tipsBox.bas {
    align-items: baseline;
  }
  .tipsBox.end {
    align-items: flex-end;
  }
}
.opentext {
  flex: 1;
  display: inline-block;
}
.van-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.asdasd {
  display: inline-block;
  width: 40px;
  height: 20px;
}
.flex {
  display: flex;
}
.remekTitle {
  display: inline-block;
  padding-bottom: 3px;
}
</style>

2、组件使用

<textTips title="备注" text="要展示的数据" ></textTips>