/****************************************************************************

所属系统: 组件库
所属模块: 操场-水印组件
创建时间: 2020年03月09日 16:11
维护人: 徐勇
*┌────────────────────────────────────────────────────────────┐
*│　此技术信息为本公司机密信息，未经本公司书面同意禁止向第三方披露．│
*│　版权所有：杰人软件(深圳)有限公司　　　　　　　　　　　         │
*└────────────────────────────────────────────────────────────┘
***************************************************************************/
<template>
  <div class="j-content">
    <h2 class="j-mb-20">水印组件</h2>
    <p class="nav">点击文本增加水印高度</p>

    <div class="test"
         ref="test"
         @click="changeHeight"
         style="width: 650px; height: 600px; cursor: pointer;">

      <p>水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框</p>
      <p>水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框</p>
      <p>水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框</p>
      <p>水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框</p>
      <p>水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框</p>
      <p>水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框</p>
      <p>水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框</p>
      <p>水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框水印框</p>
    </div>

    <div class="mark-box">
      <jr-draw-background :zindex="200"
                          content="DASDASDQWDQ"
                          wapper="mark-box"
                          domNode=".test"></jr-draw-background>
    </div>
  </div>
</template>

<script>
export default {
  name: "drawBackgroundView",
  label: "背景水印操场",
  data() {
    return {
      // 默认水印高度
      num: 800
    };
  },
  watch: {},
  mounted() {},
  methods: {
    changeHeight() {
      this.$nextTick(() => {
        this.num += 10;
        this.$refs.test.style.height = `${this.num}px`;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.j-content {
  padding: 20px 50px;
  .nav {
    color: #666;
    padding-bottom: 5px;
    margin: 20px 0 10px 0;
    border-bottom: 1px solid #d8d8d8;
    width: 300px;
  }
}

.test {
  // max-height: 500px;
  // max-width: 500px;
  // overflow: hidden;
  // overflow-y: auto;
  // overflow-x: auto;
  p {
    line-height: 28px;
  }
}
</style>