mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
缓存改动
This commit is contained in:
JimQing
parent
b35b94a6d8
commit
fe64205913
@ -1,47 +0,0 @@
|
|||||||
.loading {
|
|
||||||
text-align: center;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 99999;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading_night {
|
|
||||||
background-color: #303133;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-wrapper {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
||||||
-moz-transform: translateX(-50%) translateY(-50%);
|
|
||||||
-ms-transform: translateX(-50%) translateY(-50%);
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-text {
|
|
||||||
line-height: 1.4;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-anim {
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
border: 5px solid rgba(189, 189, 189, 0.25);
|
|
||||||
border-left-color: rgba(66, 185, 131, 0.9);
|
|
||||||
border-top-color: rgba(66, 185, 131, 0.9);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
animation: rotate 600ms infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
to {
|
|
||||||
transform: rotate(1turn)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -12,12 +12,6 @@
|
|||||||
<link rel="shortcut icon" href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
|
<link rel="shortcut icon" href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
|
||||||
<link rel="apple-touch-icon-precomposed"
|
<link rel="apple-touch-icon-precomposed"
|
||||||
href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
|
href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
|
||||||
<link rel="stylesheet" href="assets/css/loading.css">
|
|
||||||
<link rel="stylesheet" href="libs/css/index.css">
|
|
||||||
<link rel="stylesheet" href="libs/css/code-themes/github-v2.min.css">
|
|
||||||
<link rel="stylesheet" href="libs/css/style-mirror.css">
|
|
||||||
<link rel="stylesheet" href="libs/css/animate.css">
|
|
||||||
<link rel="stylesheet" href="assets/css/app.css">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
11
public/libs/css/animate.css
vendored
11
public/libs/css/animate.css
vendored
File diff suppressed because one or more lines are too long
@ -1,2 +0,0 @@
|
|||||||
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
|
|
||||||
.prettyprint{font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#333}ol.linenums{margin-top:0;margin-bottom:0;color:#ccc}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fafbfc;list-style-type:decimal}@media screen{.str{color:#183691}.kwd{color:#a71d5d}.com{color:#969896}.typ{color:#0086b3}.lit{color:#0086b3}.pun{color:#333}.opn{color:#333}.clo{color:#333}.tag{color:navy}.atn{color:#795da3}.atv{color:#183691}.dec{color:#333}.var{color:teal}.fun{color:#900}}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
|
|
||||||
.prettyprint{background:#2d2d2d!important;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#ccc}ol.linenums{margin-top:0;margin-bottom:0;color:#999}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#2d2d2d;list-style-type:decimal}@media screen{.str{color:#9c9}.kwd{color:#c9c}.com{color:#999}.typ{color:#69c}.lit{color:#f99157}.pun{color:#ccc}.opn{color:#ccc}.clo{color:#ccc}.tag{color:#f2777a}.atn{color:#f99157}.atv{color:#6cc}.dec{color:#f99157}.var{color:#f2777a}.fun{color:#69c}}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
|
|
||||||
.prettyprint{background:#1d1f21!important;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#c5c8c6}ol.linenums{margin-top:0;margin-bottom:0;color:#969896}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#1d1f21;list-style-type:decimal}@media screen{.str{color:#b5bd68}.kwd{color:#b294bb}.com{color:#969896}.typ{color:#81a2be}.lit{color:#de935f}.pun{color:#c5c8c6}.opn{color:#c5c8c6}.clo{color:#c5c8c6}.tag{color:#c66}.atn{color:#de935f}.atv{color:#8abeb7}.dec{color:#de935f}.var{color:#c66}.fun{color:#81a2be}}
|
|
||||||
2
public/libs/css/code-themes/tomorrow.min.css
vendored
2
public/libs/css/code-themes/tomorrow.min.css
vendored
@ -1,2 +0,0 @@
|
|||||||
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
|
|
||||||
.prettyprint{background:#f6f8fa!important;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#f6f8fa;list-style-type:decimal}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}
|
|
||||||
2
public/libs/css/codemirror.min.css
vendored
2
public/libs/css/codemirror.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,36 +0,0 @@
|
|||||||
.CodeMirror-hints {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10;
|
|
||||||
overflow: hidden;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
padding: 2px;
|
|
||||||
|
|
||||||
-webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
|
|
||||||
-moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
|
|
||||||
box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
|
|
||||||
border-radius: 3px;
|
|
||||||
border: 1px solid silver;
|
|
||||||
|
|
||||||
background: white;
|
|
||||||
font-size: 90%;
|
|
||||||
font-family: monospace;
|
|
||||||
|
|
||||||
max-height: 20em;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeMirror-hint {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 4px;
|
|
||||||
border-radius: 2px;
|
|
||||||
white-space: pre;
|
|
||||||
color: black;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.CodeMirror-hint-active {
|
|
||||||
background: #08f;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
@ -1,124 +0,0 @@
|
|||||||
/*
|
|
||||||
|
|
||||||
Name: Base16 Default Light
|
|
||||||
Author: Chris Kempson (http://chriskempson.com)
|
|
||||||
|
|
||||||
CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
|
|
||||||
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
.cm-s-style-mirror.CodeMirror {
|
|
||||||
background: #f5f5f5;
|
|
||||||
color: #444;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror div.CodeMirror-selected {
|
|
||||||
background: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-line::selection,
|
|
||||||
.cm-s-style-mirror .CodeMirror-line>span::selection,
|
|
||||||
.cm-s-style-mirror .CodeMirror-line>span>span::selection {
|
|
||||||
background: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-line::-moz-selection,
|
|
||||||
.cm-s-style-mirror .CodeMirror-line>span::-moz-selection,
|
|
||||||
.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection {
|
|
||||||
background: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-gutters {
|
|
||||||
background: #f5f5f5;
|
|
||||||
border-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-guttermarker {
|
|
||||||
color: #ac4142;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-guttermarker-subtle {
|
|
||||||
color: #b0b0b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-linenumber {
|
|
||||||
color: #b0b0b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-cursor {
|
|
||||||
border-left: 1px solid #505050;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-comment {
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-atom {
|
|
||||||
color: #aa759f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-number {
|
|
||||||
color: #aa759f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-property,
|
|
||||||
.cm-s-style-mirror span.cm-attribute {
|
|
||||||
color: #90a959;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-keyword {
|
|
||||||
color: #023a52;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-string {
|
|
||||||
color: #e46918;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-variable {
|
|
||||||
color: #90a959;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-variable-2 {
|
|
||||||
color: #00695f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-variable-3 {
|
|
||||||
color: #2e6e8a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-def {
|
|
||||||
color: #d28445;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-bracket {
|
|
||||||
color: #202020;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-tag {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-link {
|
|
||||||
color: #b26a00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror span.cm-error {
|
|
||||||
/* background: #ac4142;
|
|
||||||
color: #f5f5f5; */
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-style: wavy;
|
|
||||||
text-decoration-color: #df8d8e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-activeline-background {
|
|
||||||
background: #dddcdc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cm-s-style-mirror .CodeMirror-matchingbracket {
|
|
||||||
color: rgb(32, 32, 32) !important;
|
|
||||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
|
||||||
}
|
|
||||||
2
public/libs/css/xq-light.min.css
vendored
2
public/libs/css/xq-light.min.css
vendored
@ -1,2 +0,0 @@
|
|||||||
.cm-s-xq-light span.cm-keyword{line-height:1em;font-weight:700;color:#5a5cad}.cm-s-xq-light span.cm-atom{color:#6c8cd5}.cm-s-xq-light span.cm-number{color:#164}.cm-s-xq-light span.cm-def{text-decoration:underline}.cm-s-xq-light span.cm-variable{color:#000}.cm-s-xq-light span.cm-variable-2{color:#000}.cm-s-xq-light span.cm-type,.cm-s-xq-light span.cm-variable-3{color:#000}.cm-s-xq-light span.cm-comment{color:#0080ff;font-style:italic}.cm-s-xq-light span.cm-string{color:red}.cm-s-xq-light span.cm-meta{color:#ff0}.cm-s-xq-light span.cm-qualifier{color:grey}.cm-s-xq-light span.cm-builtin{color:#7ea656}.cm-s-xq-light span.cm-bracket{color:#cc7}.cm-s-xq-light span.cm-tag{color:#3f7f7f}.cm-s-xq-light span.cm-attribute{color:#7f007f}.cm-s-xq-light span.cm-error{color:red}.cm-s-xq-light .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-xq-light .CodeMirror-matchingbracket{outline:1px solid grey;color:#000!important;background:#ff0}
|
|
||||||
/*# sourceMappingURL=xq-light.min.css.map */
|
|
||||||
@ -213,6 +213,10 @@ section {
|
|||||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.code-snippet__fix ul li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
@ -8,12 +8,54 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 99999;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading_night {
|
||||||
|
background-color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||||
|
-moz-transform: translateX(-50%) translateY(-50%);
|
||||||
|
-ms-transform: translateX(-50%) translateY(-50%);
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-anim {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border: 5px solid rgba(189, 189, 189, 0.25);
|
||||||
|
border-left-color: rgba(66, 185, 131, 0.9);
|
||||||
|
border-top-color: rgba(66, 185, 131, 0.9);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
animation: rotate 600ms infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
to {
|
||||||
|
transform: rotate(1turn)
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -174,7 +174,7 @@ export default {
|
|||||||
this.$emit('startCopy');
|
this.$emit('startCopy');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
solveWeChatImage()
|
solveWeChatImage()
|
||||||
this.setHtml(solveHtml())
|
this.setOutput(solveHtml())
|
||||||
let clipboardDiv = document.getElementById('output')
|
let clipboardDiv = document.getElementById('output')
|
||||||
|
|
||||||
clipboardDiv.focus()
|
clipboardDiv.focus()
|
||||||
@ -185,7 +185,8 @@ export default {
|
|||||||
range.setEndAfter(clipboardDiv.lastChild)
|
range.setEndAfter(clipboardDiv.lastChild)
|
||||||
window.getSelection().addRange(range)
|
window.getSelection().addRange(range)
|
||||||
document.execCommand('copy')
|
document.execCommand('copy')
|
||||||
clipboardDiv.innerHTML = this.output; // 恢复现场
|
range.setStartBefore(clipboardDiv.firstChild)
|
||||||
|
range.setEndAfter(clipboardDiv.firstChild)
|
||||||
// 输出提示
|
// 输出提示
|
||||||
this.$notify({
|
this.$notify({
|
||||||
showClose: true,
|
showClose: true,
|
||||||
@ -247,7 +248,7 @@ export default {
|
|||||||
document.body.removeChild(downLink)
|
document.body.removeChild(downLink)
|
||||||
},
|
},
|
||||||
...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus', 'themeChanged',
|
...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus', 'themeChanged',
|
||||||
'setHtml', 'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
|
'setOutput', 'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.selectFont = this.currentFont;
|
this.selectFont = this.currentFont;
|
||||||
|
|||||||
16
src/main.js
16
src/main.js
@ -5,10 +5,18 @@ import ElementUI from 'element-ui'
|
|||||||
import 'element-ui/lib/theme-chalk/index.css'
|
import 'element-ui/lib/theme-chalk/index.css'
|
||||||
import './element'
|
import './element'
|
||||||
import 'codemirror/lib/codemirror.css';
|
import 'codemirror/lib/codemirror.css';
|
||||||
import "codemirror/theme/ambiance.css";
|
import 'codemirror/theme/ambiance.css';
|
||||||
import "codemirror/addon/hint/show-hint.css";
|
import 'codemirror/theme/xq-light.css';
|
||||||
import "codemirror/theme/xq-light.css";
|
import 'codemirror/mode/css/css'
|
||||||
import "./assets/less/theme.less";
|
import 'codemirror/mode/markdown/markdown'
|
||||||
|
import 'codemirror/addon/edit/matchbrackets'
|
||||||
|
import 'codemirror/addon/selection/active-line'
|
||||||
|
import 'codemirror/addon/hint/show-hint.js'
|
||||||
|
import 'codemirror/addon/hint/css-hint.js'
|
||||||
|
import './assets/less/theme.less';
|
||||||
|
// 对codemirror预处理
|
||||||
|
import './scripts/format'
|
||||||
|
import './scripts/closebrackets'
|
||||||
Vue.use(ElementUI)
|
Vue.use(ElementUI)
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|||||||
@ -140,7 +140,7 @@ const WxRenderer = function (opts) {
|
|||||||
return `
|
return `
|
||||||
<section class="code-snippet__fix code-snippet__js">
|
<section class="code-snippet__fix code-snippet__js">
|
||||||
<ul class="code-snippet__line-index code-snippet__js">${numbers.join('')}</ul>
|
<ul class="code-snippet__line-index code-snippet__js">${numbers.join('')}</ul>
|
||||||
<pre class="code-snippet__js" data-lang="${lang}">
|
<pre class="code__pre code-snippet__js" data-lang="${lang}">
|
||||||
${codeLines.join('')}
|
${codeLines.join('')}
|
||||||
</pre>
|
</pre>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -18,7 +18,6 @@ const state = {
|
|||||||
output: '',
|
output: '',
|
||||||
editor: null,
|
editor: null,
|
||||||
cssEditor: null,
|
cssEditor: null,
|
||||||
html: '',
|
|
||||||
currentFont: '',
|
currentFont: '',
|
||||||
currentSize: '',
|
currentSize: '',
|
||||||
currentColor: '',
|
currentColor: '',
|
||||||
@ -26,8 +25,8 @@ const state = {
|
|||||||
nightMode: false
|
nightMode: false
|
||||||
};
|
};
|
||||||
const mutations = {
|
const mutations = {
|
||||||
setHtml(state, data) {
|
setOutput(state, data) {
|
||||||
state.html = data;
|
state.output = data;
|
||||||
},
|
},
|
||||||
setEditorValue(state, data) {
|
setEditorValue(state, data) {
|
||||||
state.editor.setValue(data)
|
state.editor.setValue(data)
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</el-col>
|
</el-col>
|
||||||
<transition name="custom-classes-transition" enter-active-class="animated bounceInRight">
|
<transition name="custom-classes-transition" enter-active-class="bounceInRight">
|
||||||
<el-col id="cssBox" :span="12" v-show="showBox">
|
<el-col id="cssBox" :span="12" v-show="showBox">
|
||||||
<textarea id="cssEditor" type="textarea" placeholder="Your custom css here.">
|
<textarea id="cssEditor" type="textarea" placeholder="Your custom css here.">
|
||||||
</textarea>
|
</textarea>
|
||||||
@ -47,17 +47,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import CodeMirror from 'codemirror/lib/codemirror'
|
|
||||||
|
|
||||||
import 'codemirror/mode/css/css'
|
|
||||||
import 'codemirror/mode/markdown/markdown'
|
|
||||||
import 'codemirror/addon/edit/matchbrackets'
|
|
||||||
import 'codemirror/addon/selection/active-line'
|
|
||||||
|
|
||||||
import 'codemirror/addon/hint/show-hint.js'
|
|
||||||
import 'codemirror/addon/hint/css-hint.js'
|
|
||||||
import '../scripts/format.js'
|
|
||||||
|
|
||||||
import fileApi from '../api/file';
|
import fileApi from '../api/file';
|
||||||
import editorHeader from '../components/codeMirror/header';
|
import editorHeader from '../components/codeMirror/header';
|
||||||
import aboutDialog from '../components/codeMirror/aboutDialog';
|
import aboutDialog from '../components/codeMirror/aboutDialog';
|
||||||
@ -71,7 +60,6 @@ import {
|
|||||||
} from '../scripts/util'
|
} from '../scripts/util'
|
||||||
|
|
||||||
require('codemirror/mode/javascript/javascript')
|
require('codemirror/mode/javascript/javascript')
|
||||||
import '../scripts/closebrackets'
|
|
||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
import config from '../scripts/config'
|
import config from '../scripts/config'
|
||||||
import {mapState, mapMutations} from 'vuex';
|
import {mapState, mapMutations} from 'vuex';
|
||||||
@ -100,7 +88,6 @@ export default {
|
|||||||
cssEditor: state=> state.cssEditor,
|
cssEditor: state=> state.cssEditor,
|
||||||
currentSize: state=> state.currentSize,
|
currentSize: state=> state.currentSize,
|
||||||
currentColor: state=> state.currentColor,
|
currentColor: state=> state.currentColor,
|
||||||
html: state=> state.html,
|
|
||||||
nightMode: state=> state.nightMode
|
nightMode: state=> state.nightMode
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@ -249,6 +236,17 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.leftAndRightScroll()
|
this.leftAndRightScroll()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
isCoping(newVal) {
|
||||||
|
const preDomList = document.getElementsByClassName('code__pre');
|
||||||
|
|
||||||
|
if (preDomList.length > 0) {
|
||||||
|
preDomList.forEach(pre=> {
|
||||||
|
pre.style.whiteSpace = newVal ? 'pre' : 'normal';
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -310,4 +308,35 @@ export default {
|
|||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.bounceInRight {
|
||||||
|
animation-name: bounceInRight;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
@keyframes bounceInRight {
|
||||||
|
0%,60%,75%,90%,100% {
|
||||||
|
transition-timing-function: cubic-bezier(0.215,.610,.355,1.000)
|
||||||
|
}
|
||||||
|
0% {
|
||||||
|
opacity:0;
|
||||||
|
transform:translate3d(3000px,0,0)}
|
||||||
|
60% {
|
||||||
|
opacity:1;
|
||||||
|
transform:translate3d(-25px,0,0)
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform:translate3d(10px,0,0)
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform:translate3d(-5px,0,0)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform:none
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
@import url('../assets/less/app.less');
|
||||||
|
@import url('../assets/less/style-mirror.css');
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user