smart-fullscreen-v

基于Vue框架的全面屏插件，可以智能适配屏幕。

安装

$ npm install smart-fullscreen-v

使用

main.js

import SmartFullscreenV from "smart-fullscreen-v"

Vue.use(SmartFullscreenV)

页面上使用

<template>
  <div id="app">
   <SmartFullscreen name="demo" @click="show">
        // 内容        
    </SmartFullscreen>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      isShow: false     // 标记是否全屏
    }
  },
  methods: {
    show () {
      if (!this.isShow) {
        this.$smart.opened('demo', true)    // 打开全屏  
        this.isShow = true
      } else {
        this.$smart.closed()    // 关闭全屏
        this.isShow = false
      }
    }
  }
}
</script>

组件 Props

| 名称 | 类型 | 是否必传 | 默认值 | 说明 | | :----: | :----: | :----: | :----:| :----: | | name | String | 是 | - | 名称，$smart需要改字段才能正常使用 | | width | Number | 否 | 1920 | 宽度 | | height | Number | 否 | 1080 | 高度 | | isBody | Boolean | 否 | false | 是否需要插入body | | debounceDuration | Number | 否 | 100 | 页面变化节流时间 | | loadTransition | Boolean | 否 | false | 加载时是否需要过渡动画 |

组件事件

| 名称 | 参数 | 返回值 | 说明 | | :----: | :----: | :----: | :----: | | click | - | void | 当点击组件时触发 |

附加方法

可全局调用this.$smart来使用附加方法

this.$smart.opened()    // 示例

| 名称 | 参数 | 返回值 | 说明 | | :----: | :----: | :----: | :----: | | opened | function ( name,isParent ) | void | 打开全屏 | | closed | - | void | 关闭全屏 |

opened 参数

| 名称 | 类型 | 是否必传 | 默认值 | 说明 | | :----: | :----: | :----: | :----:| :----: | | name | String | 是 | - | 需要全屏的组件名称 | | isParent | Boolean | 否 | - | 是否以父容器为基准全屏 |