vue 组件全屏_用于全屏显示的简单Vue组件

vue 组件全屏全屏 (vue-fullscreen)A simple Vue.js component for fullscreen.一个用于全屏显示的简单Vue.js组件。View demo查看演示 Download Source下载源安装 (Installation)Install from GitHub via NPM通过NPM从GitHub安装npm...

cuk5239

11227人浏览 · 2020-07-23 16:45:43

cuk5239 · 2020-07-23 16:45:43 发布

vue 组件全屏

全屏 (vue-fullscreen)

A simple Vue.js component for fullscreen.

一个用于全屏显示的简单Vue.js组件。

View demo 查看演示 Download Source 下载源

安装 (Installation)

Install from GitHub via NPM

通过NPM从GitHub安装

npm install vue-fullscreen

用法 (Usage)

To use vue-fullscreen, simply import it, and call Vue.use() to install.

要使用vue-fullscreen ，只需将其导入，然后调用Vue.use()进行安装。

<template>
  <div id="app">
    <fullscreen :fullscreen.sync="fullscreen">
      Content
    </fullscreen>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
  import fullscreen from 'vue-fullscreen'
  import Vue from 'vue'
  Vue.use(fullscreen)
  export default {
    methods: {
      toggle () {
        this.fullscreen = !this.fullscreen
      }
    },
    data() {
      return {
        fullscreen: false
      }
    }
  }
</script>

Caution: Because of the browser security function, you can only call these methods by a user gesture. (e.g. a click callback)

注意：由于具有浏览器安全功能，因此只能通过用户手势来调用这些方法。 ( 例如，点击回调)

用作插件 (Use as plugin)

In your vue component, You can use this.$fullscreen to get the instance.

在vue组件中，可以使用this.$fullscreen获取实例。

<template>
  <div id="app">
    <div class="example">
      Content
    </div>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
import fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(fullscreen)
export default {
  methods: {
    toggle () {
      this.$fullscreen.toggle(this.$el.querySelector('.example'), {
        wrap: false,
        callback: this.fullscreenChange
      })
    },
    fullscreenChange (fullscreen) {
      this.fullscreen = fullscreen
    }
  },
  data() {
    return {
      fullscreen: false
    }
  }
}
</script>

方法 (Methods)

切换([目标，选项，强制] (toggle([target, options, force]))

Toggle the fullscreen mode.

切换全屏模式。

target:
目标：
- ElementElement
- document.bodydocument.body
- The element target for fullscreen.
  全屏的元素目标。
options (optional):
选项 (可选)：
- ObjectObject
- The fullscreen options.
  全屏选项。
force (optional):
强制 (可选)：
- BooleanBoolean
- undefinedundefined
- true to force enter , true强制输入，传递false to exit fullscreen mode.false退出全屏模式。

回车([目标，选项]) (enter([target, options]))

enter the fullscreen mode.

进入全屏模式。

target:
目标：
- ElementElement
- document.bodydocument.body
- The element target for fullscreen.
  全屏的元素目标。
options (optional):
选项 (可选)：
- ObjectObject
- The fullscreen options.
  全屏选项。

出口() (exit())

exit the fullscreen mode.

退出全屏模式。

getState() (getState())

get the fullscreen state.

获取全屏状态。

Type: Boolean
类型： Boolean

Caution: The action is asynchronous, you can not get the expected state immediately following the calling method.

警告：该操作是异步的，您无法在调用方法后立即获得预期状态。

选件 (Options)

打回来 (callback)

Type: Function
类型： Function
Default: null
默认值： null

It will be called when the fullscreen mode changed.

全屏模式更改时将调用它。

fullscreenClass (fullscreenClass)

Type: String
类型： String
Default: fullscreen
默认值： fullscreen

The class will be added to target element when fullscreen mode is on.

全屏模式打开时，该类将添加到目标元素。

包 (wrap)

Type: Boolean
类型： Boolean
Default: true
默认值： true

If true, the target element will be wrapped up in a background div, and you can set the background color.

如果为true ，则目标元素将被包裹在背景div ，并且您可以设置背景颜色。

背景 (background)

Type: String
类型： String
Default: #333
默认值： #333

The background style of wrapper, only available when fullscreen mode is on and wrap is true.

包装器的背景样式，仅在启用全屏模式且wrap为true时可用。

用作组件 (Use as component)

You can simply import the component and register it locally.

您可以简单地导入组件并在本地注册。

<template>
  <div id="app">
    <fullscreen ref="fullscreen" :fullscreen.sync="fullscreen">
      Content
    </fullscreen>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
  import Fullscreen from "vue-fullscreen/src/component.vue"
  export default {
    components: {Fullscreen},
    methods: {
      toggle () {
        this.$refs['fullscreen'].toggle()
        // this.fullscreen = !this.fullscreen
      }
    },
    data() {
      return {
        fullscreen: false
      }
    }
  }
</script>

方法 (Methods)

切换([力]) (toggle([force]))

Toggle the fullscreen mode.You can pass force to force enter or exit fullscreen mode.

切换全屏mode.You可以通过force迫使进入或退出全屏模式。

force (optional):
强制 (可选)：
- BooleanBoolean
- undefinedundefined
- true to force enter , true强制输入，传递false to exit fullscreen mode.false退出全屏模式。

输入() (enter())

enter the fullscreen mode.

进入全屏模式。

出口() (exit())

exit the fullscreen mode.

退出全屏模式。

getState() (getState())

get the fullscreen state.

获取全屏状态。

Type: Boolean
类型： Boolean

Caution: The action is asynchronous, you can not get the expected state immediately following the calling method.

警告：该操作是异步的，您无法在调用方法后立即获得预期状态。

道具 (Props)

全屏 (fullscreen)

Type: Boolean
类型： Boolean
Default: false
默认值： false

Use .sync to synchronize the parent's value. You can change it to toggle fullscreen mode too.

使用.sync同步父级的值。您也可以更改它来切换全屏模式。

Caution: Changing it may not work in Firefox and IE11, it may be that they handle async operation specially.

注意：更改它可能无法在Firefox和IE11中使用，可能是因为它们专门处理异步操作。

But in Firefox you can try to add babel-polyfill to the vendor in webpack like this:

但是在Firefox中，您可以尝试向webpack的vendor添加babel-polyfill webpack如下所示：

module.exports = {
  entry: {
    app: './example/main.js',
    vendor: ['babel-polyfill', 'vue']
  },
  ...
}

Then it works, though I don't know why. ╮(╯▽╰)╭

然后就可以了，尽管我不知道为什么。 ╮(╯▽╰)╭

I have no idea how to fix it in IE11 yet.

我还不知道如何在IE11中修复它。

fullscreenClass (fullscreenClass)

Type: String
类型： String
Default: fullscreen
默认值： fullscreen

The class will be added to the component when fullscreen mode is on.

全屏模式打开时，该类将添加到组件中。

背景 (background)

Type: String
类型： String
Default: #333
默认值： #333

The background style of component, only available when fullscreen mode is on.

组件的背景样式，仅在启用全屏模式时可用。

大事记 (Events)

更改 (change)

isFullscreen: The current fullscreen state.
isFullscreen ：当前的全屏状态。

This event fires when the fullscreen mode changed.

全屏模式更改时将触发此事件。

没有冲突 (No conflict)

If you need to avoid name conflict, you can import it like this:

如果需要避免名称冲突，可以这样导入：

<template>
  <div id="app">
    <fs ref="fullscreen" :fullscreen.sync="fullscreen">
      Content
    </fs>
    <div class="example">
      Content
    </div>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
import Fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(Fullscreen, {name: 'fs'})
export default {
  methods: {
    toggle () {
      this.$refs['fullscreen'].toggle()
      this.$fs.toggle(this.$el.querySelector('.example'), {
        wrap: false,
        callback: this.fullscreenChange
      })
    },
    fullscreenChange (fullscreen) {
      this.fullscreen = fullscreen
    }
  },
  data() {
    return {
      fullscreen: false
    }
  }
}
</script>

翻译自: https://vuejsexamples.com/a-simple-vue-component-for-fullscreen/

vue 组件全屏

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

cuk5239

@cuk5239

已为社区贡献37条内容