<template>
  <el-row class="wrapper layout-grid-line">
    <el-col :span="span">
      <pre>
        {{
          `
      import WorkingBox from '@/components/base/WorkingBox/index.vue'
      <div class="outer-box">
        <WorkingBox>
            <div class="content">我是内容区域</div>
        </WorkingBox>
      </div>
  `
        }}
      </pre>
      <div class="outer-box">
        <WorkingBox :is-border-active="isBorderActive">
          <div class="content">我是内容区域</div>
        </WorkingBox>

        <div class="btn-box">
          <el-button type="primary" @click="handleChangeBorderActiveStatus(true)">激活</el-button>
          <el-button type="plain" @click="handleChangeBorderActiveStatus(false)">恢复</el-button>
        </div>
      </div>


    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import WorkingBox from '@/components/base/WorkingBox/index.vue'
const span = 12

const isBorderActive = ref(false)

const handleChangeBorderActiveStatus = (isActive) => {
  isBorderActive.value = isActive
}

</script>

<style lang="scss" scoped>
.outer-box {
  width: 600px;
  height: 300px;
  margin: 50px 20px;

  .content {
    width: 100%;
    height: 100%;
    background: #e3e3e3;
  }
  .btn-box{
    margin-top: 10px;
  }
}
</style>