一次文本展示3行...显示展开与关闭--以及视频组件--ie判断

• 组件引用

  <foldText :showContent="item.content+'几千万我偶偶奇文件哦亲解耦IQ将诶几千万我偶偶奇文件哦亲解耦IQ将诶哦亲忘记问偶尔去哦我切剑桥闻鸡几千万我偶偶奇文件哦亲解耦IQ将诶哦亲忘记问偶尔去哦我切剑桥闻鸡哦亲忘记问偶尔去哦我切剑桥闻鸡起舞我哦技巧文件哦亲我我偶尔'"></foldText>

• 组件

<template >
<div class="wrap">
    <div :class="textOver && !btnFold ? 'inner over' : 'inner'" ref="divRef">
      <span class="content" ref="spanRef">{{ showContent }}</span>
    </div>
    <span class="btn" v-if="textOver" @click="btnFold = !btnFold">
      <span v-if="btnFold">收起<i class="el-icon-arrow-up"></i></span>
      <span v-else>展开<i class="el-icon-arrow-down"></i></span>
    </span>
</div>

</template>
<script>

export default {
  name: 'foldText',
  data () {
    return {
      textOver: false, // 文本是否超出3行
      btnFold: false // 按钮默认显示展开
    }
  },
  props: {
    showContent: {
      type: String,
      default: () => ''
    }
  },
  computed: {

  },

  mounted () {
    this.$nextTick(() => {
      // 判断文本是否超过3行
      if (this.$refs.divRef) {
        const descHeight = window
          .getComputedStyle(this.$refs.divRef)
          .height.replace('px', '')
        console.log('descHeight:' + descHeight)
        if (descHeight > 60) {
          this.textOver = true
        } else {
          this.textOver = false
        }
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  padding-bottom: 30px;
}
.over {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.btn {
  font-size: 14px;
  color:#409eff;
  float: right;
  cursor: pointer;
  margin-top: 10px;
}
</style>

• 视频组件

<template >
<!-- lang="pug" -->
 <div >
 <video class="Video_message" v-if="!isIE" controls :id="id" width="300" height="400" controlslist="nodownload" disablePictureInPicture="true">
     <source class="video" :src="value.resourcesUrl" type="video/ogg"/>
     <source class="video" :src="value.resourcesUrl" type="video/mp4"/>
 </video>
 <div v-else>这是一条【视频消息】，请切换非IE浏览器查看，或到企微客户端查看</div>
  <!-- .Video_message
    video(v-if="!isIE" controls :id="id" width="300" height="400" controlslist="nodownload" disablePictureInPicture="true").video
      source(:src="value.filePath" type="video/ogg" )
      source(:src="value.filePath" type="video/mp4")
    div(v-else)  这是一条【视频消息】，请切换非IE浏览器查看，或到企微客户端查看 -->
</div>

</template>
<script>
import Pubsub from '@/utils/pubsub'
import { isIE } from '@/utils'
const $ = document.querySelector.bind(document)
export default {
  name: 'videoFriend',
  data () {
    return {
      isIE
      // {
      //   filePath: "https://preapiconsole.71360.com/file/read/www/M00/07/5F/wKj0f2Di_0GAH4KoACw9ZYmmlns986.mp4"
      //   fileSize: 2899301
      //   fileType: 4
      //   id: 355265
      // }

    }
  },
  props: {
    value: {
      default: () => ({}),
      type: Object
    }
  },
  computed: {
    id () {
      return `vid_${this.value.id}`
    }
  },
  async mounted () {
    window.Vue = this
    await this.$nextTick()
    const vidDom = $(`#${this.id}`)
    vidDom && vidDom.addEventListener('play', () => {
      const instance = Pubsub.instance
      if ((instance instanceof Element) && instance.id === this.id) return
      Pubsub.clear()
      Pubsub.add(vidDom)
    })
  }
}
</script>
<style lang="scss" scoped>
.Video_message {
  // width: 300px;
  // height: 400px;
}
video {
  width: 300px;
  height: 200px;
  border-radius: 5px;
}
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}
</style>

• pubsub组件

/**
 * @description 音频视频只能播放一个方法处理,结合订阅发布模式&单例模式实现
 * @class PubSub
 */
import BenzAMRRecorder from 'benz-amr-recorder'
const isElement = (dom) => dom instanceof Element
const isBenzAMRRecorder = (obj) => obj instanceof BenzAMRRecorder
class PubSub {
  constructor () {
    this.sub = []
  }

  add (instance) {
    this.sub.push(instance)
  }

  clear () {
    const [el] = this.sub
    isElement(el) && el.pause()
    isBenzAMRRecorder(el) && el.stop()
    this.sub = []
  }

  get instance () {
    const [el] = this.sub
    return el
  }
}
export default new PubSub()

• 判断ie版本

// 是否 ie11
export const isIE11 = navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf('rv:11.0') > -1
// 小于 ie11
export const LEIE11 = navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1
// 不是 ie 浏览器
export const isIE = isIE11 || LEIE11

• 视频组件使用 – 传id 跟视频内容

  <div v-if="item.type===2">
    <myvideo ref="myFriendVideo" :value="{id:item.id , resourcesUrl: item.resourcesUrl}"></myvideo>
  </div>