components---页面中创建组件

最新推荐文章于 2022-12-20 07:50:28 发布

举个不听话的栗子

最新推荐文章于 2022-12-20 07:50:28 发布

阅读量481

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41455147/article/details/114386218

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<ScreenfullBox @change="click" :isScrollShow="scrollShow"></ScreenfullBox>

export default {
data() {
    return {
      // 是否是只显示tabe
      scrollShow: false,
    }
  },
  components: {
    // 操作全屏的组件
    ScreenfullBox: {
      props: {
        // 目前的状态是否是全屏
        isScrollShow: {
          type: Boolean,
          default: false
        }
      },
      data() {
        return {
        }
      },
      template: `<div>
        <svg-icon @mouseenter="selectStyle" @mouseout="outStyle" v-if="isScrollShow" icon-class="exit-fullscreen"   @click="sendClick" />
        <svg-icon @mouseenter="selectStyle" @mouseout="outStyle" v-if="!isScrollShow" icon-class="fullscreen" @click="sendClick" />
      </div>`,
      methods: {
        sendClick() {
          this.$emit('change')
        },
      }
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
    // 显示页面中所有内容
    handleShowAll() {
      this.scrollShow = false
    },
    // 仅显示table
    handleShowTable() {
      this.scrollShow = true
    },
    // 子组件传过来的操作
    click() {
      if (this.$refs && this.$refs.adsorbent) {
        if (!this.scrollShow) {
          this.handleShowTable()
        } else {
          this.handleShowAll()
        }
      }
    }
  }
}