136 lines
3.3 KiB
Markdown
136 lines
3.3 KiB
Markdown
<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 边框
|
||
|
||
我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
|
||
|
||
### 边框
|
||
|
||
我们提供了以下几种边框样式，以供选择。
|
||
|
||
<table class="demo-border">
|
||
<tbody>
|
||
<tr>
|
||
<td class="text">名称</td>
|
||
<td class="text">粗细</td>
|
||
<td class="line">举例</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text">实线</td>
|
||
<td class="text">1px</td>
|
||
<td class="line">
|
||
<div></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text">虚线</td>
|
||
<td class="text">2px</td>
|
||
<td class="line">
|
||
<div class="dashed"></div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
### 圆角
|
||
|
||
我们提供了以下几种圆角样式，以供选择。
|
||
|
||
<el-row :gutter="12" class="demo-radius">
|
||
<el-col :span="6" :xs="{span: 12}">
|
||
<div class="title">无圆角</div>
|
||
<div class="value">border-radius: 0px</div>
|
||
<div class="radius"></div>
|
||
</el-col>
|
||
<el-col :span="6" :xs="{span: 12}">
|
||
<div class="title">小圆角</div>
|
||
<div class="value">border-radius: {{borderRadiusSmall}}</div>
|
||
<div
|
||
class="radius"
|
||
:style="{ borderRadius: borderRadiusSmall }"
|
||
></div>
|
||
</el-col>
|
||
<el-col :span="6" :xs="{span: 12}">
|
||
<div class="title">大圆角</div>
|
||
<div class="value">border-radius: {{borderRadiusBase}}</div>
|
||
<div
|
||
class="radius"
|
||
:style="{ borderRadius: borderRadiusBase }"
|
||
></div>
|
||
</el-col>
|
||
<el-col :span="6" :xs="{span: 12}">
|
||
<div class="title">圆形圆角</div>
|
||
<div class="value">border-radius: 30px</div>
|
||
<div class="radius radius-30"></div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
### 投影
|
||
|
||
我们提供了以下几种投影样式，以供选择。
|
||
|
||
<div
|
||
class="demo-shadow"
|
||
:style="{ boxShadow: boxShadowBase }"
|
||
></div>
|
||
<span class="demo-shadow-text">基础投影 box-shadow: {{boxShadowBase}}</span>
|
||
|
||
<div
|
||
class="demo-shadow"
|
||
:style="{ boxShadow: boxShadowLight }"
|
||
></div>
|
||
<span class="demo-shadow-text">浅色投影 box-shadow: {{boxShadowLight}}</span>
|