基于vue3开发的锁屏界面

功能一览

主页示例

https://dreamwq.com/vue3-lock-screen/

近期更新 v1.3.1-beta.3 🎉

使用指南

安装

npm安装：

npm i vue3-lock-screen --save

yarn安装：

yarn add vue3-lock-screen --save

开始使用

全局使用

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)

import vue3videoPlay from 'vue3-lock-screen' // 引入组件
import 'vue3-lock-screen/dist/style.css' // 引入css
app.use(vue3videoPlay)

app.mount('#app')

组件内使用

// require style
import 'vue3-lock-screen/dist/style.css'
import { videoPlay } from 'vue-video-play'
export default {
  components: {
    videoPlay
  }
}

基本示例

提供了丰富了配置功能

Props

| 名称 | 说明 | 类型 | 可选值 | 默认值 | | ------ | :--------: | :----: | :----: | :----: | | width | 播放器宽度 | string | - | 800px | | height | 播放器高度 | string | - | 450px |

Events

vue3-lock-screen支持video原生所有事件 video默认事件

| 事件名称 | 说明 | 回调 | | ------------ | ------------ | ---- | | mirrorChange | 镜像翻转事件 | val |

快捷键说明

支持快捷键操作 | 键名 | 说明 | | ----- | ---- | | Space | / |

Author

xdlumia

点个start

vue3-lock-screen