diff options
| author | Li Jin <dragon-fly@qq.com> | 2021-04-19 23:41:33 +0800 |
|---|---|---|
| committer | Li Jin <dragon-fly@qq.com> | 2021-04-19 23:41:33 +0800 |
| commit | 5d3b07801456d16dcc2c75dcccd48d508a6b60cc (patch) | |
| tree | 2df1a154bf58d93f2475df02afbd15f1a8ba2963 /doc/docs/.vuepress/components/YueDisplay.vue | |
| parent | ea82666506b57d6e905b7f2e5fe78498fe5a7abd (diff) | |
| download | yuescript-5d3b07801456d16dcc2c75dcccd48d508a6b60cc.tar.gz yuescript-5d3b07801456d16dcc2c75dcccd48d508a6b60cc.tar.bz2 yuescript-5d3b07801456d16dcc2c75dcccd48d508a6b60cc.zip | |
first commit for Yuescript document site.
Diffstat (limited to '')
| -rwxr-xr-x | doc/docs/.vuepress/components/YueDisplay.vue | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/doc/docs/.vuepress/components/YueDisplay.vue b/doc/docs/.vuepress/components/YueDisplay.vue new file mode 100755 index 0000000..b89805b --- /dev/null +++ b/doc/docs/.vuepress/components/YueDisplay.vue | |||
| @@ -0,0 +1,49 @@ | |||
| 1 | <template> | ||
| 2 | <div> | ||
| 3 | <button class="button" @click="compile()">Compile</button> | ||
| 4 | <div style="display: none;"> | ||
| 5 | <slot></slot> | ||
| 6 | </div> | ||
| 7 | </div> | ||
| 8 | </template> | ||
| 9 | |||
| 10 | <script> | ||
| 11 | export default { | ||
| 12 | methods: { | ||
| 13 | compile() { | ||
| 14 | const node = this.$el.children[1]; | ||
| 15 | const code = node.innerText; | ||
| 16 | window.yueCodes = code; | ||
| 17 | this.$modal.show('compiler'); | ||
| 18 | }, | ||
| 19 | }, | ||
| 20 | } | ||
| 21 | </script> | ||
| 22 | |||
| 23 | <style scoped> | ||
| 24 | .button { | ||
| 25 | border: none; | ||
| 26 | display: inline-block; | ||
| 27 | font-size: 16px; | ||
| 28 | color: #fff; | ||
| 29 | background-color: #b7ae8f; | ||
| 30 | text-decoration: none; | ||
| 31 | padding: .4rem 0.8rem; | ||
| 32 | border-radius: 4px; | ||
| 33 | transition: background-color .1s ease; | ||
| 34 | box-sizing: border-box; | ||
| 35 | border-bottom: 1px solid #aaa07b; | ||
| 36 | margin-bottom: 1em; | ||
| 37 | } | ||
| 38 | .button:hover { | ||
| 39 | background-color: #beb69a; | ||
| 40 | } | ||
| 41 | .button:focus, | ||
| 42 | .button:active:focus, | ||
| 43 | .button.active:focus, | ||
| 44 | .button.focus, | ||
| 45 | .button:active.focus { | ||
| 46 | outline: none; | ||
| 47 | } | ||
| 48 | </style> | ||
| 49 | |||
