|
@@ -1,11 +1,14 @@
|
|
|
<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>
|