105 lines
1.7 KiB
Vue
105 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<article class="repl">
|
||
|
|
<header class="header">
|
||
|
|
<h1>{{ t('liveEdit') }}</h1>
|
||
|
|
<section class="actions">
|
||
|
|
<veui-button
|
||
|
|
ui="strong text"
|
||
|
|
@click="handleClose"
|
||
|
|
>
|
||
|
|
{{ t('exit') }}
|
||
|
|
</veui-button>
|
||
|
|
</section>
|
||
|
|
</header>
|
||
|
|
<one-live
|
||
|
|
class="editor"
|
||
|
|
:code="code"
|
||
|
|
/>
|
||
|
|
</article>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { Button } from 'veui'
|
||
|
|
import i18n from 'veui/mixins/i18n'
|
||
|
|
import OneLive from './OneLive.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'one-repl',
|
||
|
|
components: {
|
||
|
|
'veui-button': Button,
|
||
|
|
'one-live': OneLive
|
||
|
|
},
|
||
|
|
mixins: [i18n],
|
||
|
|
props: {
|
||
|
|
code: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClose () {
|
||
|
|
this.$emit('close')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
.repl
|
||
|
|
display flex
|
||
|
|
flex-direction column
|
||
|
|
|
||
|
|
.header
|
||
|
|
display flex
|
||
|
|
align-items center
|
||
|
|
flex none
|
||
|
|
height 48px
|
||
|
|
padding 0 24px
|
||
|
|
box-shadow 0 0 4px #0006
|
||
|
|
position relative
|
||
|
|
|
||
|
|
h1
|
||
|
|
flex none
|
||
|
|
margin 0
|
||
|
|
font-size 16px
|
||
|
|
|
||
|
|
.actions
|
||
|
|
display flex
|
||
|
|
justify-content flex-end
|
||
|
|
flex 1 1 auto
|
||
|
|
|
||
|
|
.editor
|
||
|
|
flex 1 1 auto
|
||
|
|
height calc(100vh - 48px)
|
||
|
|
|
||
|
|
& >>> .prism-editor-wrapper
|
||
|
|
padding 8px 12px
|
||
|
|
font-size 12px
|
||
|
|
color #eee
|
||
|
|
background-color #0a0b0d
|
||
|
|
line-height 1.5
|
||
|
|
font-family Menlo, consolas, monospace
|
||
|
|
-webkit-font-smoothing auto
|
||
|
|
|
||
|
|
&::-webkit-scrollbar
|
||
|
|
width 8px
|
||
|
|
background transparent
|
||
|
|
transition all 0.3s
|
||
|
|
|
||
|
|
&-thumb
|
||
|
|
border-radius 4px
|
||
|
|
background-color #282c33
|
||
|
|
|
||
|
|
&:hover::-webkit-scrollbar-thumb
|
||
|
|
background-color #545b66
|
||
|
|
|
||
|
|
textarea
|
||
|
|
outline none
|
||
|
|
|
||
|
|
& >>> .live-preview
|
||
|
|
padding 24px 36px
|
||
|
|
|
||
|
|
& >>> .VueLive-error
|
||
|
|
display none
|
||
|
|
</style>
|