fix(code-editor): `value` not support use as `v-model`

修复value不支持v-model用法的问题 fixed: #933

fix(code-editor): `value` not support use as `v-model`
修复value不支持v-model用法的问题 fixed: #933
无木
1 parent 61ce25be
Showing 3 changed files with 24 additions and 9 deletions
CHANGELOG.zh_CN.md
src/components/CodeEditor/src/CodeEditor.vue
src/views/demo/editor/json/index.vue
@@ -29,6 +29,7 @@
 - **Modal** 确保 props 正确被传递
 - **MultipleTab** 修复可能会意外创建登录路由标签的问题
 - **BasicTree** 修复搜索功能可能导致`checkedKeys`丢失的问题
+- **CodeEditor** 修复 value 不支持 v-model 用法的问题
 - **其它**
   - 修复菜单默认折叠的配置不起作用的问题
   - 修复`safari`浏览器报错导致网站打不开
@@ -29,7 +29,7 @@
     name: 'CodeEditor',
     components: { CodeMirrorEditor },
     props,
-    emits: ['change'],
+    emits: ['change', 'update:value'],
     setup(props, { emit }) {
       const getValue = computed(() => {
         const { value, mode } = props;
@@ -42,6 +42,7 @@
       });
       function handleValueChange(v) {
+        emit('update:value', v);
         emit('change', v);
       }
 <template>
   <PageWrapper title="代码编辑器组件示例" contentFullHeight fixedHeight contentBackground>
     <template #extra>
-      <RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange">
-        <RadioButton value="application/json"> json数据 </RadioButton>
-        <RadioButton value="htmlmixed"> html代码 </RadioButton>
-        <RadioButton value="javascript"> javascript代码 </RadioButton>
-      </RadioGroup>
+      <a-space size="middle">
+        <a-button @click="showData" type="primary">获取数据</a-button>
+        <RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange">
+          <RadioButton value="application/json"> json数据 </RadioButton>
+          <RadioButton value="htmlmixed"> html代码 </RadioButton>
+          <RadioButton value="javascript"> javascript代码 </RadioButton>
+        </RadioGroup>
+      </a-space>
     </template>
     <CodeEditor v-model:value="value" :mode="modeValue" />
   </PageWrapper>
@@ -14,7 +17,7 @@
   import { defineComponent, ref } from 'vue';
   import { CodeEditor } from '/@/components/CodeEditor';
   import { PageWrapper } from '/@/components/Page';
-  import { Radio } from 'ant-design-vue';
+  import { Radio, Space, Modal } from 'ant-design-vue';
   const jsonData =
     '{"name":"BeJson","url":"http://www.xxx.com","page":88,"isNonProfit":true,"address":{"street":"科技园路.","city":"江苏苏州","country":"中国"},"links":[{"name":"Google","url":"http://www.xxx.com"},{"name":"Baidu","url":"http://www.xxx.com"},{"name":"SoSo","url":"http://www.xxx.com"}]}';
@@ -51,7 +54,13 @@
 </html>
   `;
   export default defineComponent({
-    components: { CodeEditor, PageWrapper, RadioButton: Radio.Button, RadioGroup: Radio.Group },
+    components: {
+      CodeEditor,
+      PageWrapper,
+      RadioButton: Radio.Button,
+      RadioGroup: Radio.Group,
+      ASpace: Space,
+    },
     setup() {
       const modeValue = ref('application/json');
       const value = ref(jsonData);
@@ -72,7 +81,11 @@
         }
       }
-      return { value, modeValue, handleModeChange };
+      function showData() {
+        Modal.info({ title: '编辑器当前值', content: value.value });
+      }
+
+      return { value, modeValue, handleModeChange, showData };
     },
   });
 </script>