介绍
本文档主要用于描述 ShadcnCodeEditor 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnCodeEditor v-model="value" />
</template>高度 (height)
查看代码
vue
<template>
<ShadcnCodeEditor v-model="value" :height="216" />
</template>配置 (config)
查看代码
vue
<template>
<ShadcnCodeEditor v-model="value" :config="{language: 'javascript'}" />
</template>自动完成 (auto-completion)
查看代码
vue
<ShadcnCodeEditor v-model="value"
:auto-complete-config="{
endpoint: 'http://jsonplaceholder.typicode.com/posts',
method: 'GET',
trigger: ['.', '@'],
transform: (data: any) => {
return data.map((item: any) => ({
label: item.title,
insertText: item.body,
detail: item.title
}))
},
// requestParams: (context) => ({
// word: context.word,
// line: context.position.lineNumber.toString()
// }),
// requestBody: (context) => ({
// code: context.modelValue,
// position: context.position
// })
}"/>右键菜单 (context-menu)
查看代码
vue
<ShadcnCodeEditor v-model="value"
:context-menu-config="{
showDefaultItems: true,
items: [{
label: 'Format Code',
icon: 'Save',
action: ({ editor, selection}) => {
console.log(editor.getModel()?.getValueInRange(selection))
}
}]
}"/>搜索 (search)
查看代码
vue
<ShadcnCodeEditor v-model="value"
:search-config="{
caseSensitive: false,
replace: true
}"/>