基于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