## SuCodeMirror 代码编辑器


### 导入使用
```code[javascript]
import SuCodeMirror from "ss-universal-client-web/comp/code/su-code-mirror";
```

### 基本用法

:::demo
```html
<template>
    <div>{{content}}
        <su-code-mirror v-model="content" :height="200" mode="javascript"></su-code-mirror>
    </div>
</template>
<script>
export default {
    components:{
        SuCodeMirror
    },
    data() {
        return {
            "content" : `var a=123;function aaa(){debugger;alert();}`
        }
    }
};
</script>
```
:::
### 禁用编辑模式

:::demo
```html
<template>
    <div>{{content}}
        <su-code-mirror v-model="content" :readonly="true" :height="200" mode="javascript"></su-code-mirror>
    </div>
</template>
<script>
export default {
    components:{
        SuCodeMirror
    },
    data() {
        return {
            "content" : `var a=123;function aaa(){debugger;alert();}`
        }
    }
};
</script>
```
:::

### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| v-model     | 代码           | string | — | — |
| height | 高度 | number | - | 300 |
| mode | 代码模式 | string | javascript/html/css | javascript |
| readonly | 是否禁止编辑 | boolean | - | false |
| resize | 是否允许拖动改变大小 | boolean | - | true |

### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 修改代码的回调 | code |