fix(playground): 画布尺寸切换无效

由于element-plus2.6后radio-button label属性改成value

fix #586

playground/src/components/DeviceGroup.vue

@@ -1,8 +1,8 @@
 <template>
   <TMagicRadioGroup size="small" v-model="viewerDevice" :class="viewerDevice" @change="deviceSelect">
-    <TMagicRadioButton label="phone">Phone</TMagicRadioButton>
-    <TMagicRadioButton label="pad">Pad</TMagicRadioButton>
-    <TMagicRadioButton label="pc">PC</TMagicRadioButton>
+    <TMagicRadioButton value="phone">Phone</TMagicRadioButton>
+    <TMagicRadioButton value="pad">Pad</TMagicRadioButton>
+    <TMagicRadioButton value="pc">PC</TMagicRadioButton>
   </TMagicRadioGroup>
 </template>
 
@@ -34,22 +34,15 @@ const getDeviceHeight = (viewerDevice: DeviceType) => devH[viewerDevice];
 
 const getDeviceWidth = (viewerDevice: DeviceType) => devW[viewerDevice];
 
-withDefaults(
-  defineProps<{
-    modelValue: {
-      width: number;
-      height: number;
-    };
-  }>(),
-  {
-    modelValue: () => ({
-      width: 375,
-      height: 817,
-    }),
-  },
-);
-
-const emit = defineEmits(['update:modelValue']);
+const modelValue = defineModel<{
+  width: number | string;
+  height: number | string;
+}>('modelValue', {
+  default: () => ({
+    width: 375,
+    height: 817,
+  }),
+});
 
 const stageContainerRect = computed(() => services?.uiService.get('stageContainerRect'));
 
@@ -81,10 +74,10 @@ const viewerDevice = ref(DeviceType.Phone);
 const deviceSelect = async (device: DeviceType) => {
   const width = getDeviceWidth(device);
   const height = getDeviceHeight(device);
-  emit('update:modelValue', {
+  modelValue.value = {
     width,
     height,
-  });
+  };
 
   await nextTick();
   calcFontsize();

playground/src/pages/Editor.vue

@@ -24,19 +24,13 @@
       </template>
     </m-editor>
 
-    <TMagicDialog
-      v-model="previewVisible"
-      destroy-on-close
-      class="pre-viewer"
-      title="预览"
-      :width="stageRect && stageRect.width"
-    >
+    <TMagicDialog v-model="previewVisible" destroy-on-close class="pre-viewer" title="预览" :width="stageRect?.width">
       <iframe
         v-if="previewVisible"
         ref="iframe"
         width="100%"
         style="border: none"
-        :height="stageRect && stageRect.height"
+        :height="stageRect?.height"
         :src="previewUrl"
       ></iframe>
     </TMagicDialog>