feat: add font size options

添加文字大小选项
This commit is contained in:
yanglbme 2020-01-06 14:53:08 +08:00
parent 935da17315
commit f79b8711c3
2 changed files with 22 additions and 2 deletions

View File

@ -12,9 +12,11 @@ let app = new Vue({
{ label: '衬线', value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" } { label: '衬线', value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" }
], ],
sizeOption: [ sizeOption: [
{ label: '12px', value: '12px', desc: '更小' },
{ label: '13px', value: '13px', desc: '稍小' }, { label: '13px', value: '13px', desc: '稍小' },
{ label: '14px', value: '14px', desc: '推荐' }, { label: '14px', value: '14px', desc: '推荐' },
{ label: '15px', value: '15px', desc: '稍大' } { label: '15px', value: '15px', desc: '稍大' },
{ label: '16px', value: '16px', desc: '更大' }
], ],
colorOption: [ colorOption: [
{ label: '经典蓝', value: 'rgba(15, 76, 129, 1)', hex: '最新流行' }, { label: '经典蓝', value: 'rgba(15, 76, 129, 1)', hex: '最新流行' },
@ -30,7 +32,7 @@ let app = new Vue({
} }
}; };
d.currentFont = d.builtinFonts[0].value; d.currentFont = d.builtinFonts[0].value;
d.currentSize = d.sizeOption[1].value; d.currentSize = d.sizeOption[2].value;
d.currentColor = d.colorOption[1].value; d.currentColor = d.colorOption[1].value;
d.status = '1'; d.status = '1';
return d; return d;
@ -140,6 +142,10 @@ let app = new Vue({
this.wxRenderer.setOptions({ this.wxRenderer.setOptions({
size: size size: size
}); });
let theme = setFontSize(size.replace('px', ''));
this.wxRenderer.setOptions({
theme: theme
});
this.refresh(); this.refresh();
}, },
colorChanged(color) { colorChanged(color) {

View File

@ -11,7 +11,21 @@ function setColorWithTemplate(template) {
}; };
} }
// 设置自定义字体大小
function setFontSizeWithTemplate(template) {
return function (fontSize) {
let custom_theme = JSON.parse(JSON.stringify(template));
custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px`;
custom_theme.block.h2['font-size'] = `${fontSize * 1.1}px`;
custom_theme.block.h3['font-size'] = `${fontSize}px`;
custom_theme.block.h4['font-size'] = `${fontSize}px`;
return custom_theme;
}
}
let setColor = setColorWithTemplate(default_theme); let setColor = setColorWithTemplate(default_theme);
let setFontSize = setFontSizeWithTemplate(default_theme);
function customCssWithTemplate(jsonString, color) { function customCssWithTemplate(jsonString, color) {
let custom_theme = JSON.parse(JSON.stringify(default_theme)); let custom_theme = JSON.parse(JSON.stringify(default_theme));