refactor(quadrant-diagram): 修改文件结构

Author: lnzhangsong

devui/quadrant-diagram/index.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import QuadrantDiagram from './src/quadrant-diagram/index'
+import QuadrantDiagram from './src/quadrant-diagram'
 
 QuadrantDiagram.install = function (app: App) {
  app.component(QuadrantDiagram.name, QuadrantDiagram)

devui/quadrant-diagram/src/quadrant-diagram/types.ts renamed to devui/quadrant-diagram/src/quadrant-diagram-types.ts

@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { DEFAULT_AXIS_CONFIGS, DEFAULT_VIEW_CONFIGS } from '../../config';
-import { IViewConfigs, IAxisConfigs } from '../../type';
+import { DEFAULT_AXIS_CONFIGS, DEFAULT_VIEW_CONFIGS } from '../config';
+import { IViewConfigs, IAxisConfigs } from '../type';
 
 export const quadrantDiagramProps = {
  diagramId: {

devui/quadrant-diagram/src/quadrant-diagram/index.tsx renamed to devui/quadrant-diagram/src/quadrant-diagram.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, toRefs, reactive, watch } from 'vue'
-import { quadrantDiagramProps, QuadrantDiagramProps } from './types'
-import DQuadrantDiagramAxis from '../components/axis';
-import { DEFAULT_AXIS_CONFIGS } from '../../config';
+import { quadrantDiagramProps, QuadrantDiagramProps } from './quadrant-diagram-types'
+import DQuadrantDiagramAxis from './components/axis';
+import { DEFAULT_AXIS_CONFIGS } from '../config';
 
 export default defineComponent({
  name: 'DQuadrantDiagram',
@@ -52,7 +52,7 @@ export default defineComponent({
  initAxisData();
  })
 
- return { diagramId, calAxisConfig, view };
+ return { diagramId, calAxisConfig, };
  },
  render() {
  const { diagramId, calAxisConfig, view } = this;

sites/components/quadrant-diagram/index.md

@@ -13,7 +13,32 @@
 :::demo
 
 ```vue
-<d-quadrant-diagram />
+<template>
+ <d-quadrant-diagram :view='view'/>
+ <d-button @click='handle'/>
+</template>
+
+
+<script>
+import { defineComponent, reactive } from 'vue'
+
+export default ({
+ setup() {
+ const view = reactive({
+ height: 200,
+ width: 200,
+ });
+ const handle = () => {
+ view.height = 400;
+ view.width = 400;
+ };
+ return {
+ handle,
+ view,
+ }
+ }
+})
+</script>
 ```
 
 :::