123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <template>
- <div class="screenBox">
- <!-- <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" /> -->
- <img src="./screen.svg" alt="" @click="click" class="fullscreen" />
- </div>
- </template>
- <script>
- import screenfull from "screenfull";
- export default {
- name: "Screenfull",
- data() {
- return {
- isFullscreen: false
- };
- },
- mounted() {
- this.init();
- },
- beforeDestroy() {
- this.destroy();
- },
- methods: {
- click() {
- if (!screenfull.enabled) {
- this.$message({
- message: "you browser can not work",
- type: "warning"
- });
- return false;
- }
- screenfull.toggle();
- },
- change() {
- this.isFullscreen = screenfull.isFullscreen;
- },
- init() {
- if (screenfull.enabled) {
- screenfull.on("change", this.change);
- }
- },
- destroy() {
- if (screenfull.enabled) {
- screenfull.off("change", this.change);
- }
- }
- }
- };
- </script>
- <style scoped>
- .screenfull-svg {
- display: inline-block;
- cursor: pointer;
- fill: #5a5e66;
- width: 20px;
- height: 20px;
- vertical-align: 10px;
- }
- .screenBox {
- display: flex;
- align-items: center;
- }
- </style>
|