@hep-code-runner/vue2 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 +95 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -120,3 +120,98 @@ pnpm add @hep-code-runner/vue2
|
|
|
120
120
|
|
|
121
121
|
- vue: ^2.6.0 || ^2.7.0
|
|
122
122
|
- prismjs: ^1.30.0
|
|
123
|
+
|
|
124
|
+
## CodeRunnerDialog 弹窗组件
|
|
125
|
+
|
|
126
|
+
提供弹窗模式的代码执行器，支持受控和非受控模式。
|
|
127
|
+
|
|
128
|
+
### 引入
|
|
129
|
+
|
|
130
|
+
```vue
|
|
131
|
+
<script>
|
|
132
|
+
import { CodeRunnerDialog } from "@hep-code-runner/vue2";
|
|
133
|
+
|
|
134
|
+
export default {
|
|
135
|
+
components: {
|
|
136
|
+
CodeRunnerDialog,
|
|
137
|
+
},
|
|
138
|
+
};
|
|
139
|
+
</script>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### 受控模式
|
|
143
|
+
|
|
144
|
+
```vue
|
|
145
|
+
<template>
|
|
146
|
+
<button @click="visible = true">打开弹窗</button>
|
|
147
|
+
|
|
148
|
+
<CodeRunnerDialog
|
|
149
|
+
v-model="visible"
|
|
150
|
+
title="代码执行器"
|
|
151
|
+
width="800"
|
|
152
|
+
@close="handleClose"
|
|
153
|
+
>
|
|
154
|
+
<template #footer="{ close }">
|
|
155
|
+
<button @click="close">取消</button>
|
|
156
|
+
<button @click="handleSave">保存</button>
|
|
157
|
+
<button @click="handleInsert">插入代码</button>
|
|
158
|
+
</template>
|
|
159
|
+
</CodeRunnerDialog>
|
|
160
|
+
</template>
|
|
161
|
+
|
|
162
|
+
<script>
|
|
163
|
+
export default {
|
|
164
|
+
data() {
|
|
165
|
+
return {
|
|
166
|
+
visible: false,
|
|
167
|
+
};
|
|
168
|
+
},
|
|
169
|
+
methods: {
|
|
170
|
+
handleClose() {
|
|
171
|
+
console.log("弹窗关闭");
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
};
|
|
175
|
+
</script>
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### 非受控模式
|
|
179
|
+
|
|
180
|
+
```vue
|
|
181
|
+
<template>
|
|
182
|
+
<button @click="$refs.dialog.open()">打开弹窗</button>
|
|
183
|
+
|
|
184
|
+
<CodeRunnerDialog
|
|
185
|
+
ref="dialog"
|
|
186
|
+
title="代码执行器"
|
|
187
|
+
>
|
|
188
|
+
<template #footer="{ close }">
|
|
189
|
+
<button @click="close">取消</button>
|
|
190
|
+
<button @click="handleInsert">插入代码</button>
|
|
191
|
+
</template>
|
|
192
|
+
</CodeRunnerDialog>
|
|
193
|
+
</template>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
### Props 属性
|
|
197
|
+
|
|
198
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
199
|
+
|------|------|--------|------|
|
|
200
|
+
| value / v-model | boolean | false | 控制显示隐藏（受控模式） |
|
|
201
|
+
| title | string | '代码执行器' | 弹窗标题 |
|
|
202
|
+
| width | string \| number | 800 | 弹窗宽度 |
|
|
203
|
+
|
|
204
|
+
其他属性会透传给内部 CodeRunner 组件。
|
|
205
|
+
|
|
206
|
+
### Slots 插槽
|
|
207
|
+
|
|
208
|
+
| 插槽名 | 作用域参数 | 说明 |
|
|
209
|
+
|--------|-----------|------|
|
|
210
|
+
| footer | { close } | 底部自定义内容，close 为关闭函数 |
|
|
211
|
+
|
|
212
|
+
### Methods 方法
|
|
213
|
+
|
|
214
|
+
| 方法 | 说明 |
|
|
215
|
+
|------|------|
|
|
216
|
+
| open() | 打开弹窗 |
|
|
217
|
+
| close() | 关闭弹窗 |
|