diff --git a/packages/element/docs/.vuepress/components/createCodeSandBox.js b/packages/element/docs/.vuepress/components/createCodeSandBox.js new file mode 100644 index 00000000000..d6ca26e5100 --- /dev/null +++ b/packages/element/docs/.vuepress/components/createCodeSandBox.js @@ -0,0 +1,114 @@ +import { getParameters } from 'codesandbox/lib/api/define' + +const CodeSandBoxHTML = '
' +const CodeSandBoxJS = ` +import Vue from 'vue' +import App from './App.vue' +import Element from 'element-ui'; +import 'element-ui/lib/theme-chalk/index.css'; + +Vue.config.productionTip = false +Vue.use(Element, { size: 'small' }); + +new Vue({ + render: h => h(App), +}).$mount('#app')` + +const createForm = ({ method, action, data }) => { + const form = document.createElement('form') // 构造 form + form.style.display = 'none' // 设置为不显示 + form.target = '_blank' // 指向 iframe + + // 构造 formdata + Object.keys(data).forEach((key) => { + const input = document.createElement('input') // 创建 input + + input.name = key // 设置 name + input.value = data[key] // 设置 value + + form.appendChild(input) + }) + + form.method = method // 设置方法 + form.action = action // 设置地址 + + document.body.appendChild(form) + + // 对该 form 执行提交 + form.submit() + + document.body.removeChild(form) +} + +export function createCodeSandBox(codeStr) { + const parameters = getParameters({ + files: { + 'sandbox.config.json': { + content: { + template: 'node', + infiniteLoopProtection: true, + hardReloadOnChange: false, + view: 'browser', + container: { + port: 8080, + node: '14', + }, + }, + }, + 'package.json': { + content: { + scripts: { + serve: 'vue-cli-service serve', + build: 'vue-cli-service build', + lint: 'vue-cli-service lint', + }, + dependencies: { + '@formily/core': 'latest', + '@formily/vue': 'latest', + '@formily/element': 'latest', + axios: '^0.21.1', + 'core-js': '^3.6.5', + 'element-ui': 'latest', + 'vue-demi': 'latest', + vue: '^2.6.11', + }, + devDependencies: { + '@vue/cli-plugin-babel': '~4.5.0', + '@vue/cli-service': '~4.5.0', + '@vue/composition-api': 'latest', + 'vue-template-compiler': '^2.6.11', + sass: '^1.34.1', + 'sass-loader': '^8.0.2', + }, + babel: { + presets: ['@vue/cli-plugin-babel/preset'], + }, + vue: { + devServer: { + host: '0.0.0.0', + disableHostCheck: true, // 必须 + }, + }, + }, + }, + 'src/App.vue': { + content: codeStr, + }, + 'src/main.js': { + content: CodeSandBoxJS, + }, + 'public/index.html': { + content: CodeSandBoxHTML, + }, + }, + }) + + createForm({ + method: 'post', + action: 'https://codesandbox.io/api/v1/sandboxes/define', + data: { + parameters, + query: 'file=/src/App.vue', + }, + }) +} diff --git a/packages/element/docs/.vuepress/components/dumi-previewer.vue b/packages/element/docs/.vuepress/components/dumi-previewer.vue index 00276132d72..fe7826b65b0 100644 --- a/packages/element/docs/.vuepress/components/dumi-previewer.vue +++ b/packages/element/docs/.vuepress/components/dumi-previewer.vue @@ -12,7 +12,20 @@
-
+
+ + + +
import copy from 'copy-to-clipboard' import highlight from './highlight' +import { createCodeSandBox } from './createCodeSandBox' export default { name: 'dumi-previewer', @@ -148,6 +162,10 @@ export default { this.copied = false }, 2000) }, + + openCodeSandBox() { + createCodeSandBox(this.demoStr) + }, }, } diff --git a/packages/element/package.json b/packages/element/package.json index a02e32b9d82..857703db250 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -43,7 +43,8 @@ "ttypescript": "^1.5.12", "vue": "^2.6.0", "vuepress": "^1.8.2", - "vuepress-plugin-typescript": "^0.3.1" + "vuepress-plugin-typescript": "^0.3.1", + "codesandbox": "^2.2.3" }, "dependencies": { "@formily/core": "2.0.0-rc.9", diff --git a/packages/vue/docs/.vuepress/components/createCodeSandBox.js b/packages/vue/docs/.vuepress/components/createCodeSandBox.js new file mode 100644 index 00000000000..4d0519eae47 --- /dev/null +++ b/packages/vue/docs/.vuepress/components/createCodeSandBox.js @@ -0,0 +1,112 @@ +import { getParameters } from 'codesandbox/lib/api/define' + +const CodeSandBoxHTML = '
' +const CodeSandBoxJS = ` +import Vue from 'vue' +import Antd from 'ant-design-vue'; +import 'ant-design-vue/dist/antd.css'; +import App from './App.vue' + +Vue.config.productionTip = false; + +Vue.use(Antd); + + +new Vue({ + render: h => h(App), +}).$mount('#app')` + +const createForm = ({ method, action, data }) => { + const form = document.createElement('form') // 构造 form + form.style.display = 'none' // 设置为不显示 + form.target = '_blank' // 指向 iframe + + // 构造 formdata + Object.keys(data).forEach((key) => { + const input = document.createElement('input') // 创建 input + + input.name = key // 设置 name + input.value = data[key] // 设置 value + + form.appendChild(input) + }) + + form.method = method // 设置方法 + form.action = action // 设置地址 + + document.body.appendChild(form) + + // 对该 form 执行提交 + form.submit() + + document.body.removeChild(form) +} + +export function createCodeSandBox(codeStr) { + const parameters = getParameters({ + files: { + 'sandbox.config.json': { + content: { + template: 'node', + infiniteLoopProtection: true, + hardReloadOnChange: false, + view: 'browser', + container: { + port: 8080, + node: '14', + }, + }, + }, + 'package.json': { + content: { + scripts: { + serve: 'vue-cli-service serve', + build: 'vue-cli-service build', + lint: 'vue-cli-service lint', + }, + dependencies: { + '@formily/core': 'latest', + '@formily/vue': 'latest', + 'core-js': '^3.6.5', + 'ant-design-vue': 'latest', + 'vue-demi': 'latest', + vue: '^2.6.11', + }, + devDependencies: { + '@vue/cli-plugin-babel': '~4.5.0', + '@vue/cli-service': '~4.5.0', + '@vue/composition-api': 'latest', + 'vue-template-compiler': '^2.6.11', + }, + babel: { + presets: ['@vue/cli-plugin-babel/preset'], + }, + vue: { + devServer: { + host: '0.0.0.0', + disableHostCheck: true, // 必须 + }, + }, + }, + }, + 'src/App.vue': { + content: codeStr, + }, + 'src/main.js': { + content: CodeSandBoxJS, + }, + 'public/index.html': { + content: CodeSandBoxHTML, + }, + }, + }) + + createForm({ + method: 'post', + action: 'https://codesandbox.io/api/v1/sandboxes/define', + data: { + parameters, + query: 'file=/src/App.vue', + }, + }) +} diff --git a/packages/vue/docs/.vuepress/components/dumi-previewer.vue b/packages/vue/docs/.vuepress/components/dumi-previewer.vue index 13a94882c32..3b88f72c688 100644 --- a/packages/vue/docs/.vuepress/components/dumi-previewer.vue +++ b/packages/vue/docs/.vuepress/components/dumi-previewer.vue @@ -12,7 +12,20 @@
-
+
+ + + +
import copy from 'copy-to-clipboard' import highlight from './highlight' +import { createCodeSandBox } from './createCodeSandBox' export default { name: 'dumi-previewer', @@ -144,6 +158,10 @@ export default { this.copied = false }, 2000) }, + + openCodeSandBox() { + createCodeSandBox(this.demoStr) + }, }, } diff --git a/packages/vue/package.json b/packages/vue/package.json index 3ef85ecdd51..fa1b822ac32 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -30,6 +30,7 @@ "@vuepress/plugin-back-to-top": "^1.8.2", "@vuepress/plugin-medium-zoom": "^1.8.2", "ant-design-vue": "^1.7.3", + "codesandbox": "^2.2.3", "core-js": "^2.4.0", "vue": "^2.6.12", "vuepress": "^1.8.2",