plugins-for-bigscreen

发布内网插件步骤

1.设置local npm库地址

npm config set registry http://10.0.0.229:4873
yarn config set registry http://10.0.0.229:4873

2.升级版本号

package.json => version + 1

2.发布插件

npm publish

插件的安装及升级

使用npm安装

npm config set registry http://10.0.0.229:4873

npm install plugins-for-bigscreen --save

使用yarn安装

yarn config set registry http://10.0.0.229:4873

yarn add plugins-for-bigscreen

使用本地包安装

1. 修改dependencies
"plugins-for-bigscreen": "file:D:/workspace/BigScreen/webapp-related/plugins-for-bigscreen"

2. 执行安装命令

使用yarn升级

yarn upgrade plugins-for-bigscreen

插件的注册

// 1.按照style-resources-loader
npm i style-resources-loader -D
npm i vue-cli-plugin-style-resources-loader -D

// 2.注册插件
import Vue from 'vue'
import PluginsForBigscreen from 'plugins-for-bigscreen'

Vue.use(PluginsForBigscreen)

// 在vue.config.js中导入公共样式（使用vue-cli2的自行配置）
pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: [
      path.resolve(__dirname, 'node_modules/plugins-for-bigscreen/style/*.less'),
    ]
  }
}

插件库包含

| 名称 | 名称 | 说明 | 注册对象 | | ---- | ---- | --- | --- | | components/Toast | 组件 | Toast提示 | Vue.$toast | | components/Camera | 组件 | 摄像机视频组件 | Vue.$Camera | | components/Faceapi | 组件 | 基于face-api的人脸识别组件 | Vue.$Faceapi | | directives/touch | 指令 | 用于大屏交互的封装指令，可应用在任意dom上 | v-touch | | script/adaptive | 脚本 | 大屏vue适配方案js，以1920px作为标准，动态设置document的fontsize。不需要配置 | -- | | style/adaptive | 公共样式 | 用于做大屏适配的less函数，将px转为rem（待扩展） | -- | | style/transition | 公共样式 | 常用的vue transition样式（待扩展） | -- |

插件的使用

4.1 关于组件的使用方法

Vue.use(PluginsForBigscreen)将插件注册为"注册对象", 使用方法查看对应的组件api。

Toast

eg:

Vue.$toast.show('Hello World!')

this.$toast.show('Hello World!')

Camera

eg:

const box = new this.$Camera({
  element: document.getElementById('box'),
  zoom: 1,
  offsetX: 0,
  offsetY: 0
})
await box.getUserMedia()

Faceapi

const faceapi = new this.$Faceapi({
  input: box.contentCanvas,
  overlay: box.overlayCanvas,
  nets: 'tinyFaceDetector', // ssdMobilenetv1 / tinyFaceDetector / mtcnn
  detectFace: 'detectSingleFace', // detectSingleFace/detectAllFaces
  extractOnlyFace: true, // 仅输出face
  detected: (faces) => {
    console.log('detected', faces)
  }
})
await faceapi.init()
await faceapi.detect()
// setTimeout(async () => {
//   faceapi.nets = 'ssdMobilenetv1'
//   await faceapi.init()
//   await faceapi.detect()
// }, 3000)

4.2 关于指令的使用方法

Vue.use(PluginsForBigscreen)将指令注册为全局指令，使用v-directive的方法使用指令。

v-touch

touch指令封装了以下几种参数，用于响应不同的事件：

• touching => 实时响应触摸
• touchStart => 响应开始触摸
• touchEnd => 响应停止触摸
• tap => 响应轻触 like click
• longPressStart => 响应开始长按
• longPress => 持续响应长按事件
• longPressEnd => 响应停止长按

触发touchend事件的时间间隔，默认是250ms。可通过设置el.dataset.touchinterval修改，可省略。

触发longpress事件的时间间隔，默认是300ms。可通过设置el.dataset.longtouchinterval，可省略。

eg:

<div
  v-touch:touchStart="onTouchStart"
  v-touch:touchEnd="() => onTouchEnd(1)" // 用于传参
  data-touchinterval="300" // 用于修改触发touchend事件的时间间隔，可省略
  data-longtouchinterval="200" // 用于修改触发longpress事件的时间间隔，可省略
>
</div>

4.3 公共样式的使用

注意：由于less px转rem方法是以1920作为基准值，所以开发需要要求UED以1920px出图，方便开发；

此公共样式的作用是帮助开发者方便地将px单位转为rem，当然也可以使用通用的px2rem工具，但是不方便二次开发，这样开发就可以仅针对不同分辨率比例的场景做适配，相同比例会自动缩放适配。