hogwarts-ui 官方网站

Appearance

Code 代码编辑器 ​

基础用法-默认 python 语言 ​

点击查看示例代码
vue
<template>
  <h-code-v1 v-model="h_code" :h_data="{class:'edit'}"></h-code-v1>
</template>

<script setup>
import { ref } from 'vue'
const h_code = ref(
`class HelloWorld:
    def __init__(self):
        pass

    def print_hello(self):
        print("Hello World")
`
)
<template>
  <h-code-v1 v-model="h_code" :h_data="{class:'edit'}"></h-code-v1>
</template>

<script setup>
import { ref } from 'vue'
const h_code = ref(
`class HelloWorld:
    def __init__(self):
        pass

    def print_hello(self):
        print("Hello World")
`
)

基础用法-javascript ​

点击查看示例代码
vue
<template>
  <h-code-v1 v-model="h_code1" language="javascript" :h_data="{class:'edit'}"></h-code-v1>
</template>

<script setup>
import { ref } from 'vue'
const h_code1 = ref(
`// 拖拽元素进入可释放目标时执行 1 次
const dragenter = (e, index) => {
    e.preventDefault()
    // 拖拽到原位置时不触发
    if (dragIndex !== index) {
        const source = vModel.value[dragIndex];
        vModel.value.splice(dragIndex, 1);
        vModel.value.splice(index, 0, source);
        // 更新节点位置
        dragIndex = index
    }
}
<template>
  <h-code-v1 v-model="h_code1" language="javascript" :h_data="{class:'edit'}"></h-code-v1>
</template>

<script setup>
import { ref } from 'vue'
const h_code1 = ref(
`// 拖拽元素进入可释放目标时执行 1 次
const dragenter = (e, index) => {
    e.preventDefault()
    // 拖拽到原位置时不触发
    if (dragIndex !== index) {
        const source = vModel.value[dragIndex];
        vModel.value.splice(dragIndex, 1);
        vModel.value.splice(index, 0, source);
        // 更新节点位置
        dragIndex = index
    }
}