Resizable 伸缩框 ​

<template>
  <div class="resizable">
    <el-resizable
      :w="200"
      :h="200"
      :minw="150"
      :minh="150"
      class="ep-bg-purple-light"
      @resize="handleChange"
      @drag="handleChange"
    >
      <el-flex vertical justify="center" style="height: 100%">
        <el-text>{{ top }} х {{ left }}</el-text>
        <el-text>{{ width }} х {{ height }}</el-text>
        <el-text>Drag edge to resize</el-text>
      </el-flex>
    </el-resizable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const top = ref(0)
const left = ref(0)
const width = ref(0)
const height = ref(0)

const handleChange = (rect) => {
  top.value = rect.top
  left.value = rect.left
  width.value = rect.width
  height.value = rect.height
}
</script>

<style lang="scss" scoped>
.resizable {
  position: relative;
  height: 200px;
}
</style>

<template>
  <div class="resizable">
    <el-resizable
      :w="200"
      :h="200"
      :minw="150"
      :minh="150"
      is-custom-draggable
      class="ep-bg-purple-light"
      @resize="handleChange"
      @drag="handleChange"
    >
      <template #default="{ handleTargetDown }">
        <el-flex vertical style="height: 100%">
          <div class="header ep-bg-purple" @pointerdown="handleTargetDown">
            header drag
          </div>
          <el-text>{{ top }} х {{ left }}</el-text>
          <el-text>{{ width }} х {{ height }}</el-text>
          <el-text>Drag edge to resize</el-text>
        </el-flex>
      </template>
    </el-resizable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const top = ref(0)
const left = ref(0)
const width = ref(0)
const height = ref(0)

const handleChange = (rect) => {
  top.value = rect.top
  left.value = rect.left
  width.value = rect.width
  height.value = rect.height
}
</script>

<style lang="scss" scoped>
.resizable {
  position: relative;
  height: 200px;
  .header {
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin-bottom: 12px;
    cursor: move;
  }
}
</style>

<template>
  <div class="resizable">
    <el-resizable
      :w="200"
      :h="200"
      :minw="150"
      :minh="150"
      :sticks="['mr', 'br']"
      class="ep-bg-purple-light"
      @resize="handleChange"
      @drag="handleChange"
    >
      <el-flex vertical justify="center" style="height: 100%">
        <el-text>{{ top }} х {{ left }}</el-text>
        <el-text>{{ width }} х {{ height }}</el-text>
        <el-text>Drag edge to resize</el-text>
      </el-flex>
    </el-resizable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const top = ref(0)
const left = ref(0)
const width = ref(0)
const height = ref(0)

const handleChange = (rect) => {
  top.value = rect.top
  left.value = rect.left
  width.value = rect.width
  height.value = rect.height
}
</script>

<style lang="scss" scoped>
.resizable {
  position: relative;
  height: 200px;
}
</style>

<template>
  <div class="resizable">
    <el-resizable
      :w="200"
      :h="200"
      :minw="150"
      :minh="150"
      :sticks="['br']"
      class="ep-bg-purple-light"
      @resize="handleChange"
      @drag="handleChange"
    >
      <el-flex vertical justify="center" style="height: 100%">
        <el-text>{{ top }} х {{ left }}</el-text>
        <el-text>{{ width }} х {{ height }}</el-text>
        <el-text>Drag edge to resize</el-text>
      </el-flex>
      <template #br>
        <el-icon style="top: -6px; left: -5px"><Resize /></el-icon>
      </template>
    </el-resizable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { IconsVue } from 'element-plus-x'
const { createIconComponent } = IconsVue

const Resize = createIconComponent({
  name: 'Resize',
  svg: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8586" width="200" height="200"><path d="M972.8 497.8176v79.5648l-395.3664 395.3664H497.8688L972.8 497.8176z m0-307.2v79.5648L270.2336 972.7488H190.6688L972.8 190.6176z m0 614.4v79.5648L884.5824 972.8h-79.5648L972.8 805.0176z" p-id="8587"></path></svg>',
})

const top = ref(0)
const left = ref(0)
const width = ref(0)
const height = ref(0)

const handleChange = (rect) => {
  top.value = rect.top
  left.value = rect.left
  width.value = rect.width
  height.value = rect.height
}
</script>

<style lang="scss">
.resizable {
  position: relative;
  height: 200px;
}
</style>

<template>
  <div
    style="
      width: 500px;
      height: 500px;
      position: relative;
      border: 1px solid #ccc;
    "
  >
    <ElResizable
      :w="200"
      :h="200"
      :minw="150"
      :minh="150"
      :parent-limitation="true"
      class="ep-bg-purple-light"
      @resize="handleChange"
      @drag="handleChange"
    >
      <el-flex vertical justify="center" style="height: 100%">
        <el-text>{{ top }} х {{ left }}</el-text>
        <el-text>{{ width }} х {{ height }}</el-text>
        <el-text>Drag edge to resize</el-text>
      </el-flex>
    </ElResizable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const top = ref(0)
const left = ref(0)
const width = ref(0)
const height = ref(0)

const handleChange = (rect) => {
  top.value = rect.top
  left.value = rect.left
  width.value = rect.width
  height.value = rect.height
}
</script>

<template>
  <el-switch
    v-model="value"
    size="large"
    active-text="点我渲染"
    inactive-text="窗口隐藏"
  />
  <br />
  <el-resizable
    v-show="value"
    :w="200"
    :h="200"
    :minw="150"
    :minh="150"
    :parent-w="parentW"
    :parent-h="parentH"
    :parent-limitation="true"
    :z="1000"
    style="position: fixed"
    class="ep-bg-purple-light"
    @resize="handleChange"
    @drag="handleChange"
  >
    <el-flex vertical justify="center" style="height: 100%">
      <el-text>{{ top }} х {{ left }}</el-text>
      <el-text>{{ width }} х {{ height }}</el-text>
      <el-text>Drag edge to resize</el-text>
    </el-flex>
  </el-resizable>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const value = ref(false)

const top = ref(0)
const left = ref(0)
const width = ref(0)
const height = ref(0)

const parentW = ref(0)
const parentH = ref(0)

const handleChange = (rect) => {
  top.value = rect.top
  left.value = rect.left
  width.value = rect.width
  height.value = rect.height
}

onMounted(() => {
  parentW.value = window.innerWidth
  parentH.value = window.innerHeight
})
</script>