mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
3.2 KiB
3.2 KiB
<script>
import bus from '../../bus';
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 {
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
ボタンやカード、ポップアップなどで使用できるborderを標準化しています。
Border
borderのスタイルはいくつかあります。
| Name | Thickness | Demo |
| Solid | 1px | |
| Dashed | 2px |
半径(radius)
いくつかの半径(radius)のスタイルがあります。
No Radius
border-radius: 0px
Small Radius
border-radius: {{borderRadiusSmall}}
Large Radius
border-radius: {{borderRadiusBase}}
Round Radius
border-radius: 30px
影
シャドウスタイルの選択肢はほとんどありません。
Basic Shadow box-shadow: {{boxShadowBase}} Light Shadow box-shadow: {{boxShadowLight}}