代码拉取完成,页面将自动刷新
我一直在思考 🤔 怎么的 Vue 文档交互才是好的 👍, 后来得出的结论是:
能做到前 2 点的 Vue 组件不少, 但能做到第 3 点, 并对文档的 DEMO 编写做优化处理的并不多, 所以才有了vue-run-sfc
.
https://vue-run-sfc.netlify.com/
sass
/ scss
/ less
/ stylus
预处理器yarn add vue-run-sfc # npm install vue-run-sfc --save
import VueRunSfc from "vue-run-sfc";
Vue.use(VueRunSfc, {
// 全局配置(非必填), 具体属性含义参考 `props` 说明
// 注意 全局的 和 局部的 `cssLabs` 和 `jsLabs` 是 merge的关系, 不是替换
cssLabs: ["https://unpkg.com/normalize.css@8.0.1/normalize.css"],
jsLabs: ["https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js"],
row: true,
reverse: true,
height: "400px",
open: true,
isHideHeader: false,
themeColor: "green"
});
<script>
import { VueRunSfc } from "vue-run-sfc";
export default {
components: { VueRunSfc }
};
</script>
<template>
<vue-run-sfc
:js-labs="jsLabs"
:css-labs="cssLabs"
title="测试DEMO"
:open="true"
:code="code"
></vue-run-sfc>
</template>
<script></script>
props: {
/**
* 代码
* @example: '<template><div>123</div></template>'
*/
code: String,
/**
* js 库
* @example: ['https://unpkg.com/element-ui/lib/index.js']
*/
jsLabs: [String, Array],
/**
* css 库
* @example: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css']
*/
cssLabs: [String, Array],
/**
* js 字符串
* @example: 'alert(1)'
*/
js: [Array, String],
/**
* css 字符串
* @example: 'body { color: red }'
*/
css: [Array, String],
/**
* 主体色
* 默认值: #409eff
*/
themeColor: {
type: String,
default: '#409eff'
},
/**
* 边框色
* 默认值: #eaeefb
*/
themeBorderColor: {
type: String,
default: '#eaeefb'
},
/**
* 代码编辑器和效果预览排列方式
* 当为 false 时, 上下排列
* 当为 true 时, 左右排列
*/
row: Boolean,
/**
* 当 `row` 为 true 时, 编辑区和展示区上下位置
* 当为 false 时, 编辑器在下, 展示区在上
* 当为 true 时, 编辑器在上, 展示区在下
*/
reverse: Boolean,
/**
* 标题
* @example: '测试demo'
*/
title: String,
/**
* 高度
* @example: '400px'
*/
height: String,
/**
* 初始加载是否打开编辑区
* 当为 false 时, 默认是关闭编辑区
* 当为 true 时, 默认是打开编辑区
*/
open: Boolean,
/**
* 是否隐藏头部
*/
isHideHeader: Boolean
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型