mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-13 11:34:02 +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>
Border 边框
我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
边框
我们提供了以下几种边框样式，以供选择。
| 名称 | 粗细 | 举例 |
| 实线 | 1px | |
| 虚线 | 2px |
圆角
我们提供了以下几种圆角样式，以供选择。
无圆角
border-radius: 0px
小圆角
border-radius: {{borderRadiusSmall}}
大圆角
border-radius: {{borderRadiusBase}}
圆形圆角
border-radius: 30px
投影
我们提供了以下几种投影样式，以供选择。
基础投影 box-shadow: {{boxShadowBase}} 浅色投影 box-shadow: {{boxShadowLight}}