@hep-code-runner/vue3 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +91 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -114,3 +114,94 @@ pnpm add @hep-code-runner/vue3
|
|
|
114
114
|
|
|
115
115
|
- vue: ^3.0.0
|
|
116
116
|
- prismjs: ^1.30.0
|
|
117
|
+
|
|
118
|
+
## CodeRunnerDialog 弹窗组件
|
|
119
|
+
|
|
120
|
+
提供弹窗模式的代码执行器，支持受控和非受控模式。
|
|
121
|
+
|
|
122
|
+
### 引入
|
|
123
|
+
|
|
124
|
+
```vue
|
|
125
|
+
<script setup>
|
|
126
|
+
import { CodeRunnerDialog } from "@hep-code-runner/vue3";
|
|
127
|
+
import "@hep-code-runner/vue3/dist/style.css";
|
|
128
|
+
</script>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### 受控模式
|
|
132
|
+
|
|
133
|
+
```vue
|
|
134
|
+
<template>
|
|
135
|
+
<button @click="visible = true">打开弹窗</button>
|
|
136
|
+
|
|
137
|
+
<CodeRunnerDialog
|
|
138
|
+
v-model="visible"
|
|
139
|
+
title="代码执行器"
|
|
140
|
+
width="800"
|
|
141
|
+
@close="handleClose"
|
|
142
|
+
>
|
|
143
|
+
<template #footer="{ close }">
|
|
144
|
+
<button @click="close">取消</button>
|
|
145
|
+
<button @click="handleSave">保存</button>
|
|
146
|
+
<button @click="handleInsert">插入代码</button>
|
|
147
|
+
</template>
|
|
148
|
+
</CodeRunnerDialog>
|
|
149
|
+
</template>
|
|
150
|
+
|
|
151
|
+
<script setup>
|
|
152
|
+
import { ref } from "vue";
|
|
153
|
+
|
|
154
|
+
const visible = ref(false);
|
|
155
|
+
|
|
156
|
+
function handleClose() {
|
|
157
|
+
console.log("弹窗关闭");
|
|
158
|
+
}
|
|
159
|
+
</script>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### 非受控模式
|
|
163
|
+
|
|
164
|
+
```vue
|
|
165
|
+
<template>
|
|
166
|
+
<button @click="dialogRef?.open()">打开弹窗</button>
|
|
167
|
+
|
|
168
|
+
<CodeRunnerDialog
|
|
169
|
+
ref="dialogRef"
|
|
170
|
+
title="代码执行器"
|
|
171
|
+
>
|
|
172
|
+
<template #footer="{ close }">
|
|
173
|
+
<button @click="close">取消</button>
|
|
174
|
+
<button @click="handleInsert">插入代码</button>
|
|
175
|
+
</template>
|
|
176
|
+
</CodeRunnerDialog>
|
|
177
|
+
</template>
|
|
178
|
+
|
|
179
|
+
<script setup>
|
|
180
|
+
import { ref } from "vue";
|
|
181
|
+
|
|
182
|
+
const dialogRef = ref(null);
|
|
183
|
+
</script>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
### Props 属性
|
|
187
|
+
|
|
188
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
189
|
+
|------|------|--------|------|
|
|
190
|
+
| v-model | boolean | false | 控制显示隐藏（受控模式） |
|
|
191
|
+
| title | string | '代码执行器' | 弹窗标题 |
|
|
192
|
+
| width | string \| number | 800 | 弹窗宽度 |
|
|
193
|
+
|
|
194
|
+
其他属性会透传给内部 CodeRunner 组件。
|
|
195
|
+
|
|
196
|
+
### Slots 插槽
|
|
197
|
+
|
|
198
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
199
|
+
|--------|-----------|------|
|
|
200
|
+
| footer | { close } | 底部自定义内容，close 为关闭函数 |
|
|
201
|
+
|
|
202
|
+
### Expose 暴露方法
|
|
203
|
+
|
|
204
|
+
| 方法 | 说明 |
|
|
205
|
+
|------|------|
|
|
206
|
+
| open() | 打开弹窗 |
|
|
207
|
+
| close() | 关闭弹窗 |
|