内容类nuxt框架项目总结（文字根据行数截取、Eventbus、视频时长第一帧获取显示、与原生交互、图片加载、公共方法封装等）

1. 根据行数截取文字

.g-hidden-line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;//保留行数
}

2. 视频显示缩略图（适配web端、安卓端、ios），获取视频封面第一帧

关键参数：:posterd

 <video :id="'videoRef' + article.id"
                ref="videoRef"
                class="video_box"
                controlslist="nodownload"
                :controls="isPlay"
                :poster="item.url + '?x-oss-process=video/snapshot,t_1,m_fast'"
                @play="handlePlay(article.id)"
                @loadedmetadata="getVideoDuration(item.id)"
              >
                <source
                  :src="item.url"
                  type="video/mp4"
                  width="620"
                >
                <source
                  :src="item.url"
                  type="video/webm"
                  width="620"
                >
                <source
                  :src="item.url"
                  type="video/ogg"
                  width="620"
                >
                抱歉，你的浏览器不支持播放视频
              </video>

获取视频时长

    // 获取视频时长
    getVideoDuration (id) {
      this.$nextTick(() => {
        this.videoDuration = this.$refs.videoRef[0].duration
      })
    },

手机端点击播放，视频全屏播放，退出全屏，停止播放（针对安卓端，ios端默认全屏播放）

   // 视频播放控制
    handlePlay (id) {
      this.videoPlayer = this.$refs.videoRef[0]
      const value = `videoRef${id}`
      // 针对不同浏览器添加全屏事件
      if (this.videoPlayer.requestFullscreen) {
        this.videoPlayer.requestFullscreen()
      } else if (this.videoPlayer.mozRequestFullScreen) { // Firefox
        this.videoPlayer.mozRequestFullScreen()
      } else if (this.videoPlayer.webkitRequestFullscreen) { // Chrome, Safari and Opera
        this.videoPlayer.webkitRequestFullscreen()
      } else if (this.videoPlayer.msRequestFullscreen) {
        this.videoPlayer.msRequestFullscreen()
      }
      document.addEventListener('fullscreenchange', function () {
        if (!document.fullscreenElement) {
          const video = document.getElementById(value)
          video.pause() // 当视频退出全屏时暂停播放
        }
      })
      // }
    },

3.Vue事件总线（EventBus）

创建，位置

内容，创建、取消

调用

 EventBus.$emit('G_VIP')

4. 图片加载失败占位图（vue3可用ant design vue的image组件）

<img :class="!userPage?'user-header g-avatar-border g-hover':'user-header g-avatar-border'"
  :src="article.authorAvatar && article.authorAvatar != ''? article.authorAvatar: noAvatar
                "
                @error="imgOnError"
                @click="!userPage?$utils.openUserCenter(article.authorId):''"
              >

//方法
    imgOnError (e) {
      e.target.src = require('~/assets/images/default_user_avatar.png')
    },

5. 公共方法的封装

 5.1  在src/utils/common.js里导出这些公共方法

//方法一
export const deleteById = (id, deleteFun, callback) => {
  MessageBox.confirm('是否要永久删除该信息', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warn'
  })
    .then(() => {
      deleteFun(id).then(res => {
        Message({ type: 'success', message: res.message })
        callback()
      })
    })
    .catch(() => {
      Message({ type: 'info', message: '已取消删除' })
    })
}
//方法二
export const filterChange = (filters, target) => {
  Object.assign(target.queryInfo, filters)
  target.fetchData('new')
}

5.2 在 main.js 整体导入包含所有方法(变量)的模块(这里我们给它定义了 commonApi 的别名），然后挂载在 Vue.prototype上

// src/main.js
import * as commonApi from '@/utils/common'
Vue.prototype.commonApi = commonApi

5.3 调用

 handleDelete(id) {
    this.commonApi.deleteById(id, this.fetchData)
  },

6. 与app原生交互

6.1 判断机型（封装公共方法）

isIos (name, data, callback) {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera
    if (/macintosh|mac os x/i.test(userAgent)) {
      return true
    } else if (/Android/i.test(userAgent)) {
      return false
    } else {
      return '其他'
    }
  },

6.2 根据机型调用不同参数、调起app的方法

   const isMac = that.$mobileType.isIos()//返回机型
        const obj = {
          isFollow: followValue
        }
//传递参数
        if (isMac) {
          window.webkit.messageHandlers.changeFollowNum.postMessage(JSON.stringify(obj))
        } else {
          window.android.changeFollowNum(JSON.stringify(obj))
        }

6.3  接收原生传过来的参数

  mounted () {
    window.reNewArticleH5 = this.reNewArticleH5 //接收原生传数据
  },

//执行方法
reNewArticleH5 (res) {
      console.log(res)
        },