mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-13 11:34:02 +08:00
3.9 KiB
3.9 KiB
<script>
import bus from '../../bus';
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
const varMap = [
'$--font-size-extra-large',
'$--font-size-large',
'$--font-size-medium',
'$--font-size-base',
'$--font-size-small',
'$--font-size-extra-small'
];
const original = {
'font_size_extra_large': '20px',
'font_size_large': '18px',
'font_size_medium': '16px',
'font_size_base': '14px',
'font_size_small': '13px',
'font_size_extra_small': '12px'
}
export default {
created() {
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
'font_size_extra_large': '',
'font_size_large': '',
'font_size_medium': '',
'font_size_base': '',
'font_size_small': '',
'font_size_extra_small': ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
varMap.forEach((v) => {
const key = v.replace('$--', '').replace(/-/g, '_')
if (value[v]) {
this[key] = value[v]
} else {
this[key] = original[key]
}
});
}
}
},
}
</script>
Typography 字体
我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
字体
字号
| 层级 | 字体大小 | 举例 |
| 辅助文字 | {{font_size_extra_small}} Extra Small | 用 Element 快速搭建页面 |
| 正文（小） | {{font_size_small}} Small | 用 Element 快速搭建页面 |
| 正文 | {{font_size_base}} Base | 用 Element 快速搭建页面 |
| 小标题 | {{font_size_medium}} Medium | 用 Element 快速搭建页面 |
| 标题 | {{font_size_large}} large | 用 Element 快速搭建页面 |
| 主标题 | {{font_size_extra_large}} Extra large | 用 Element 快速搭建页面 |
行高
- line-height:1 无行高
- line-height:1.3 紧凑
- line-height:1.5 常规
- line-height:1.7 宽松
Font-family 代码
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;