mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-16 11:44:01 +08:00
3.3 KiB
3.3 KiB
<script>
import bus from '../../bus';
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
const varMap = {
'$--box-shadow-light': 'boxShadowLight',
'$--box-shadow-base': 'boxShadowBase',
'$--border-radius-base': 'borderRadiusBase',
'$--border-radius-small': 'borderRadiusSmall'
};
const original = {
boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
borderRadiusBase: '4px',
borderRadiusSmall: '2px'
}
export default {
created() {
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
boxShadowLight: '',
boxShadowBase: '',
borderRadiusBase: '',
borderRadiusSmall: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(varMap).forEach((c) => {
if (value[c]) {
this[varMap[c]] = value[c]
} else {
this[varMap[c]] = original[varMap[c]]
}
});
}
}
}
}
</script>
Bordure
Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.
Bordure
Il y a plusieurs styles de bordure que vous pouvez choisir.
| Nom | Épaisseur | Demo |
| Solid | 1px | |
| Dashed | 2px |
Radius
Il y a plusieurs styles de radius que vous pouvez choisir.
Pas de radius
border-radius: 0px
Petit radius
border-radius: {{borderRadiusSmall}}
Grand radius
border-radius: {{borderRadiusBase}}
Radius rond
border-radius: 30px
Ombres
Il y a plusieurs styles d'ombres que vous pouvez choisir.
Ombre de base, box-shadow: {{boxShadowBase}} Ombre légère, box-shadow: {{boxShadowLight}}