本插件基于vue-codemirror，增加一些使用场景。

配置

配置 类型 默认值 备注
mode String 'javascript' 模式：'javascript' / 'htmlmixed' / 'css' / 'handlebars' / 'jsx' / 'markdown' / 'nginx' / 'shell' / 'sass' / 'vue' / 'yaml' / 'clike' / 'sql'
value String|Object '' 代码
height String|Number 高度
max-height String|Number 最大高度
lineNumbers Boolean true 是否显示行数
showCopy Boolean true 是否显示复制按钮
readonly Boolean true 是否只读
theme String 'dark' 支持'light'/'dark'
on-change (newValue:新值,oldValue:旧值)=>{} 变化事件

使用方式

传值方式（字符串）

<p-code-view
      :value="`/**
 * 示例方法
 */
function demoFunc(a, b) {}`">
</p-code-view>

传值方式（可序列号对象）

<p-code-view :value="{ a: 1, b: 2 }"></p-code-view>

插槽方式

<p-code-view>
    &lt;pre v-pre>
/**
 * 示例方法
 */
function demoFunc(a, b) {}
    &lt;/pre>
</p-code-view>

mode

mode=”htmlmixed”

<p-code-view mode="htmlmixed">
    &lt;pre v-pre>
        <input type="text">
    &lt;/pre>
</p-code-view>

lineNumbers

:lineNumbers=”false”

<p-code-view mode="htmlmixed" :lineNumbers="false">
    &lt;pre v-pre>
        <input type="text">
    &lt;/pre>
</p-code-view>

height

<p-code-view height="200">
    &lt;pre v-pre>
/**
 * 示例方法A
 */
function demoFuncA(a, b) {}
/**
 * 示例方法B
 */
function demoFuncB(a, b) {}
/**
 * 示例方法C
 */
function demoFuncC(a, b) {}
/**
 * 示例方法D
 */
function demoFuncD(a, b) {}
/**
 * 示例方法E
 */
function demoFuncE(a, b) {}
    &lt;/pre>
</p-code-view>
文档更新时间: 2021-05-12 18:49   作者：管理员