feat: merge params of theme

This commit is contained in:
JimQing 2019-12-08 21:45:33 +08:00
parent 8d1ca62bd8
commit 95dd851b3d
3 changed files with 18 additions and 10 deletions

View File

@ -66,7 +66,7 @@ let app = new Vue({
);
this.editor.on("change", (cm, change) => {
this.refresh();
this.saveEditorContent();
this.saveEditorContent(this.editor, '__editor_content');
});
this.cssEditor.on('update', (instance) => {
this.cssChanged();
@ -126,16 +126,18 @@ let app = new Vue({
this.refresh();
},
colorChanged(color) {
let theme = setColor(color)
let theme = setColor(color);
this.wxRenderer.setOptions({
theme: theme
});
this.refresh();
},
cssChanged() {
let theme = JSON5.parse(this.cssEditor.getValue(0));
let theme = JSON.parse(this.cssEditor.getValue(0));
this.wxRenderer.setOptions({
theme: customCss(theme)
theme: customCss(theme, this.currentColor),
font: this.currentFont,
size: this.currentSize
});
this.refresh();
},
@ -197,12 +199,12 @@ let app = new Vue({
});
},
// 将左侧编辑器内容保存到 LocalStorage
saveEditorContent() {
let content = this.editor.getValue(0);
saveEditorContent(editor, name) {
const content = editor.getValue(0);
if (content) {
localStorage.setItem("__editor_content", content);
localStorage.setItem(name, content);
} else {
localStorage.removeItem("__editor_content");
localStorage.removeItem(name);
}
},
customStyle() {

View File

@ -13,7 +13,7 @@ function setColorWithTemplate(template) {
let setColor = setColorWithTemplate(default_theme);
function customCssWithTemplate(template) {
function customCssWithTemplate(template, color) {
return function (jsonString) {
let custom_theme = JSON.parse(JSON.stringify(template));
custom_theme.block.h1 = jsonString.h1;
@ -21,6 +21,12 @@ function customCssWithTemplate(template) {
custom_theme.block.h3 = jsonString.h3;
custom_theme.block.h4 = jsonString.h4;
custom_theme.block.p = jsonString.p;
// color
custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
custom_theme.block.h2['background'] = color;
custom_theme.block.h3['border-left'] = `3px solid ${color}`;
custom_theme.block.h4['color'] = color;
custom_theme.inline.strong['color'] = color;
return custom_theme;
};
}

View File

@ -104,7 +104,7 @@
</section>
</el-col>
<el-col id="cssBox" :span="8" v-show="showBox">
<textarea id="cssEditor" type="textarea" placeholder="Custom css here." v-model="source">
<textarea id="cssEditor" type="textarea" @change="cssChanged" placeholder="Custom css here." v-model="source">
</textarea>
</el-col>
</el-row>