mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-16 11:44:01 +08:00
3.8 KiB
3.8 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>
Tipografía
Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.
Fuente
Convención de fuentes
| Level | Font Size | Demo |
| Supplementary text | {{font_size_extra_small}} Extra Small | Build with Element |
| Body (small) | {{font_size_small}} Small | Build with Element |
| Body | {{font_size_base}} Base | Build with Element |
| Small Title | {{font_size_medium}} Medium | Build with Element |
| Title | {{font_size_large}} large | Build with Element |
| Main Title | {{font_size_extra_large}} Extra large | Build with Element |
Font Line Height
- line-height:1 No line height
- line-height:1.3 Compact
- line-height:1.5 Regular
- line-height:1.7 Loose
Font-family
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;