From f4c46c9b1b8a23660d9fe300efd66af611a66ca6 Mon Sep 17 00:00:00 2001
From: 0song <82012629+0song@users.noreply.github.com>
Date: Mon, 31 May 2021 14:31:01 +0800
Subject: [PATCH] feat: demo Composition API (#2099)
* feat: demo Composition API
* chore: update
* chore: update
* chore: update
---
website/components/demo-block.vue | 105 ++++++++++++++++++++++--------
website/docs/zh-CN/radio.md | 12 ++++
website/i18n/component.json | 10 +++
website/util.js | 20 +++++-
4 files changed, 119 insertions(+), 28 deletions(-)
diff --git a/website/components/demo-block.vue b/website/components/demo-block.vue
index 3b6bcda6e3..c954ebad41 100644
--- a/website/components/demo-block.vue
+++ b/website/components/demo-block.vue
@@ -28,9 +28,20 @@
{{ controlText }}
+
+
+ {{ showSetup ? langConfig['switch-button-option-text'] : langConfig['switch-button-setup-text'] }}
+
+
{
- const result = stripTemplate(code)
+ const result = removeSetup(stripTemplate(code))
if (result.indexOf('') === 0) {
return result.replace(/^/, '').replace(/<\/template>$/,'')
}
return result
}
+const sanitizeHTML = str => {
+ const temp = document.createElement('div')
+ temp.textContent = str
+ return temp.innerHTML
+}
export default {
data() {
return {
@@ -82,6 +98,8 @@ export default {
isExpanded: false,
fixedControl: false,
scrollParent: null,
+ showSetup: false,
+ hasSetup: false,
}
},
@@ -110,18 +128,14 @@ export default {
return this.$el.getElementsByClassName('meta')[0]
},
- codeAreaHeight() {
- if (this.$el.getElementsByClassName('description').length > 0) {
- return this.$el.getElementsByClassName('description')[0].clientHeight +
- this.$el.getElementsByClassName('highlight')[0].clientHeight + 20
- }
- return this.$el.getElementsByClassName('highlight')[0].clientHeight
+ displayDemoCode () {
+ return this.showSetup ? this.codepen.setup : this.codepen.script
},
},
watch: {
isExpanded(val) {
- this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0'
+ this.setCodeAreaHeight()
if (!val) {
this.fixedControl = false
this.$refs.control.style.left = '0'
@@ -151,31 +165,62 @@ export default {
this.codepen.html = stripTemplateAndRemoveTemplate(code)
this.codepen.script = stripScript(code)
this.codepen.style = stripStyle(code)
+ this.codepen.setup = stripSetup(code)
+ if (this.codepen.setup) {
+ this.hasSetup = true
+ }
}
}
},
- mounted() {
- nextTick(() => {
- let highlight = this.$el.getElementsByClassName('highlight')[0]
- if (this.$el.getElementsByClassName('description').length === 0) {
- highlight.style.width = '100%'
- highlight.borderRight = 'none'
- }
-
- try {
- hljs.highlightBlock(highlight.querySelector('code'))
- } catch (error) {
- console.log(error)
- }
- })
- },
-
beforeUnmount() {
this.removeScrollHandler()
},
+ mounted () {
+ this.prettyCode()
+ },
+
methods: {
+ getCodeAreaHeight() {
+ if (this.$el.getElementsByClassName('description').length > 0) {
+ return this.$el.getElementsByClassName('description')[0].clientHeight +
+ this.$el.getElementsByClassName('highlight')[0].clientHeight + 20
+ }
+ return this.$el.getElementsByClassName('highlight')[0].clientHeight
+ },
+ setCodeAreaHeight () {
+ this.codeArea.style.height = this.isExpanded ? `${ this.getCodeAreaHeight() + 1 }px` : '0'
+ },
+ prettyCode () {
+ nextTick(() => {
+ const highlight = this.$el.querySelector('.highlight')
+ const hlcode = highlight.querySelector('pre code')
+ hlcode.innerHTML = sanitizeHTML(`${this.codepen.html}
+
+
+
```
:::
diff --git a/website/i18n/component.json b/website/i18n/component.json
index b2d971b1db..f7e1446ee0 100644
--- a/website/i18n/component.json
+++ b/website/i18n/component.json
@@ -5,6 +5,8 @@
"hide-text": "隐藏代码",
"show-text": "显示代码",
"copy-button-text": "复制代码片段",
+ "switch-button-option-text": "切换成 Options API",
+ "switch-button-setup-text": "切换成 Composition API",
"copy-success": "已复制！",
"copy-error": "该浏览器不支持自动复制！",
"run-online-button-text": "在线运行",
@@ -39,6 +41,8 @@
"hide-text": "Hide",
"show-text": "Expand",
"copy-button-text": "Copy",
+ "switch-button-option-text": "Switch to Options API",
+ "switch-button-setup-text": "Switch to Composition API",
"copy-success": "Copied！",
"copy-error": "This browser does not support automatic copy！",
"run-online-button-text": "Try it!",
@@ -73,6 +77,8 @@
"hide-text": "Ocultar",
"show-text": "Mostrar",
"copy-button-text": "Copiar",
+ "switch-button-option-text": "Cambiar a Options API",
+ "switch-button-setup-text": "Cambiar a Composition API",
"copy-success": "Copiar correctamente!",
"copy-error": "Este navegador no admite copia automática!",
"run-online-button-text": "Probar",
@@ -107,6 +113,8 @@
"hide-text": "Réduire",
"show-text": "Agrandir",
"copy-button-text": "Copie",
+ "switch-button-option-text": "Passer au Options API",
+ "switch-button-setup-text": "Passer au Composition API",
"copy-success": "Copier avec succès!",
"copy-error": "Ce navigateur ne prend pas en charge la copie automatique!",
"run-online-button-text": "Essayez!",
@@ -141,6 +149,8 @@
"hide-text": "隠す",
"show-text": "展開する",
"copy-button-text": "コピー",
+ "switch-button-option-text": "Options API に切り替える",
+ "switch-button-setup-text": "Composition API に切り替える",
"copy-success": "正常にコピー!",
"copy-error": "このブラウザは自動コピーをサポートしていません!",
"run-online-button-text": "試してみる!",
diff --git a/website/util.js b/website/util.js
index 36a67c805f..dd9a5ec740 100644
--- a/website/util.js
+++ b/website/util.js
@@ -13,5 +13,23 @@ export function stripTemplate(content) {
if (!content) {
return content
}
- return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim()
+ return content
+ .replace(/<(script|style)[\s\S]+<\/\1>/g, '')
+ .trim()
+}
+
+const setupCommentGlobalRegx = //g
+export function removeSetup (content) {
+ return content
+ .replace(setupCommentGlobalRegx, '')
+ .trim()
+}
+
+const setupCommentRegx = //
+export function stripSetup(content) {
+ const result = content.match(setupCommentRegx)
+ const comment = result && result[1] ? result[1].trim() : ''
+ if (!comment) return comment
+ const result2 = comment.match(/<(setup)>([\s\S]+)<\/\1>/)
+ return result2 && result2[2] ? result2[2].trim() : ''
}