openjs

Appearance

全屏切换 Full ​

函数式调用 ​

切换全屏小屏

显示代码
html
<div>
	<button class="open-btn open-btn-primary" bg @click="onFull">切换全屏</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { full } from '../public/openjs@0.1.0-beta.esm.js';

	const onFull = function(){

		// 切换全屏窗口
		full.toggle();
	}
</script>
<div>
	<button class="open-btn open-btn-primary" bg @click="onFull">切换全屏</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { full } from '../public/openjs@0.1.0-beta.esm.js';

	const onFull = function(){

		// 切换全屏窗口
		full.toggle();
	}
</script>

按钮式使用 ​

绑定元素id，自动添加点击切换全屏事件

显示代码
html
<div>
	<button class="open-btn open-btn-primary" bg id="full">切换全屏</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { full } from '../public/openjs@0.1.0-beta.esm.js';

	onMounted(()=>{

		// 绑定元素添加点击切换全屏事件
		full.btn('#full');
	})
</script>
<div>
	<button class="open-btn open-btn-primary" bg id="full">切换全屏</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { full } from '../public/openjs@0.1.0-beta.esm.js';

	onMounted(()=>{

		// 绑定元素添加点击切换全屏事件
		full.btn('#full');
	})
</script>

API ​

API描述
full.btn(id)按钮式调用
full.toggle()函数式调用

  • full.btn(id) ​

参数名描述类型必填默认值
id元素idstring是-

使用方法

js
// 绑定元素id，实现点击元素切换全屏
full.btn(id);
// 绑定元素id，实现点击元素切换全屏
full.btn(id);

  • full.toggle() ​

使用方法

js
// 函数调用切换全屏方法
full.toggle();
// 函数调用切换全屏方法
full.toggle();