src/components/WExport.vue

<template>
  <h5>画布尺寸</h5>
  <el-row>
    <el-col :span="4">
      <h5>宽度</h5>
    </el-col>
    <el-col :span="7">
      <el-input
        type="number"
        v-model="width"
        :min="100"
        :max="2000"
        :step="10"
        size="small"
        @change="onSizeChange"
      >
      </el-input>
    </el-col>
    <el-col :span="4" :offset="1">
      <h5>高度</h5>
    </el-col>
    <el-col :span="7">
      <el-input
        type="number"
        v-model="height"
        :min="100"
        :max="2000"
        :step="10"
        size="small"
        @change="onSizeChange"
      >
      </el-input>
    </el-col>
  </el-row>
  <div class="padding">
    <el-button type="primary" size="medium" @click="download()">
      下载图片
    </el-button>
  </div>
</template>

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

const width = ref('800');
const height = ref('600');

defineExpose({ getSize });

const emit = defineEmits(['sizeChange', 'download']);

function getSize() {
  return {
    width: parseInt(width.value, 10),
    height: parseInt(height.value, 10)
  };
}

function onSizeChange() {
  emit('sizeChange', getSize());
}

function download() {
  emit('download');
}
</script>

<style lang="scss">
.padding {
  padding: 20px 0;
}
</style>