canrd-outside / order-erp-front · Commits

Commit 8832a074dceb44f057c87289d3a99feef58c08fd

Authored by 无木
1 parent 61ce25be

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

修复value不支持v-model用法的问题

fixed: #933
Inline Side-by-side
Showing 3 changed files with 24 additions and 9 deletions
CHANGELOG.zh_CN.md
  View file @8832a07
... ... @@ -29,6 +29,7 @@
29 29 - **Modal** 确保 props 正确被传递
30 30 - **MultipleTab** 修复可能会意外创建登录路由标签的问题
31 31 - **BasicTree** 修复搜索功能可能导致`checkedKeys`丢失的问题
  32 +- **CodeEditor** 修复 value 不支持 v-model 用法的问题
32 33 - **其它**
33 34 - 修复菜单默认折叠的配置不起作用的问题
34 35 - 修复`safari`浏览器报错导致网站打不开
... ...
src/components/CodeEditor/src/CodeEditor.vue
  View file @8832a07
... ... @@ -29,7 +29,7 @@
29 29 name: 'CodeEditor',
30 30 components: { CodeMirrorEditor },
31 31 props,
32   - emits: ['change'],
  32 + emits: ['change', 'update:value'],
33 33 setup(props, { emit }) {
34 34 const getValue = computed(() => {
35 35 const { value, mode } = props;
... ... @@ -42,6 +42,7 @@
42 42 });
43 43  
44 44 function handleValueChange(v) {
  45 + emit('update:value', v);
45 46 emit('change', v);
46 47 }
47 48  
... ...
src/views/demo/editor/json/index.vue
  View file @8832a07
1 1 <template>
2 2 <PageWrapper title="代码编辑器组件示例" contentFullHeight fixedHeight contentBackground>
3 3 <template #extra>
4   - <RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange">
5   - <RadioButton value="application/json"> json数据 </RadioButton>
6   - <RadioButton value="htmlmixed"> html代码 </RadioButton>
7   - <RadioButton value="javascript"> javascript代码 </RadioButton>
8   - </RadioGroup>
  4 + <a-space size="middle">
  5 + <a-button @click="showData" type="primary">获取数据</a-button>
  6 + <RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange">
  7 + <RadioButton value="application/json"> json数据 </RadioButton>
  8 + <RadioButton value="htmlmixed"> html代码 </RadioButton>
  9 + <RadioButton value="javascript"> javascript代码 </RadioButton>
  10 + </RadioGroup>
  11 + </a-space>
9 12 </template>
10 13 <CodeEditor v-model:value="value" :mode="modeValue" />
11 14 </PageWrapper>
... ... @@ -14,7 +17,7 @@
14 17 import { defineComponent, ref } from 'vue';
15 18 import { CodeEditor } from '/@/components/CodeEditor';
16 19 import { PageWrapper } from '/@/components/Page';
17   - import { Radio } from 'ant-design-vue';
  20 + import { Radio, Space, Modal } from 'ant-design-vue';
18 21  
19 22 const jsonData =
20 23 '{"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 @@
51 54 </html>
52 55 `;
53 56 export default defineComponent({
54   - components: { CodeEditor, PageWrapper, RadioButton: Radio.Button, RadioGroup: Radio.Group },
  57 + components: {
  58 + CodeEditor,
  59 + PageWrapper,
  60 + RadioButton: Radio.Button,
  61 + RadioGroup: Radio.Group,
  62 + ASpace: Space,
  63 + },
55 64 setup() {
56 65 const modeValue = ref('application/json');
57 66 const value = ref(jsonData);
... ... @@ -72,7 +81,11 @@
72 81 }
73 82 }
74 83  
75   - return { value, modeValue, handleModeChange };
  84 + function showData() {
  85 + Modal.info({ title: '编辑器当前值', content: value.value });
  86 + }
  87 +
  88 + return { value, modeValue, handleModeChange, showData };
76 89 },
77 90 });
78 91 </script>
... ...