screenfull.js 전체 화면 기능 구현(vue 프로젝트에서 사용)

1. 우리가 하는 프로젝트에서 전체 화면 기능의 수요가 있을 수 있다. 사실 이것도 비교적 간단하게 실현된다. 다음은screenfull로 소개한다.js는 전체 화면 기능을 실현하고 쓸데없는 말은 하지 않고 코드를 직접 올린다.
1단계: 설치:
명령줄에서 실행: npm install --save screenfull (주: 이것은 생산 의존이기 때문에 실행 --save)
 
2단계: 코드에 직접 올리기:



	import screenfull from 'screenfull'
//	      :1.  ,npm install --save screenfull
//	         2.  
//	         3.             ,       ,     screenfull.toggle()
	export default{
		data(){
			return{
				isFullscreen: false
			}
		},
		methods:{
			buttoncli(){
				if (!screenfull.enabled) { //          ,       
		        this.$message({
		          message: '     ',
		          type: 'warning'
		        })
		        return false
		     }
		      screenfull.toggle()
		      this.$message({
		          message: '   ',
		          type: 'success'
		        })
			}
		}
	}

이것은 가장 기본적인 전체 화면 기능을 실현하면 완성되고 더 많은 용법과 API가screenfull에 갈 수 있다.js 홈페이지 학습, 감사합니다!

좋은 웹페이지 즐겨찾기