mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
4.1 KiB
4.1 KiB
<script>
import bus from '../../bus';
import { tintColor } from '../../color.js';
import BorderBox from "../../components/demo/color/border-box.vue"
import ColorBox from "../../components/demo/color/color-box.vue"
import TextBox from "../../components/demo/color/text-box.vue"
const borderColors = [
{
name: 'Borde base',
type: 'base',
},
{
name: 'Borde ligero',
type: 'light',
},
{
name: 'Borde claro',
type: 'lighter',
},
{
name: 'Borde extra claro',
type: 'extra-light',
},
]
const textColors = [
{
name: 'Texto primario',
type: 'primary',
},
{
name: 'Texto regular',
type: 'regular',
},
{
name: 'Texto secundario',
type: 'secondary',
},
{
name: 'Texto de placeholder',
type: 'placeholder',
}
]
const varMap = {
'primary': '$--color-primary',
'success': '$--color-success',
'warning': '$--color-warning',
'danger': '$--color-danger',
'info': '$--color-info',
'white': '$--color-white',
'black': '$--color-black',
};
const original = {
primary: '#409EFF',
success: '#67C23A',
warning: '#E6A23C',
danger: '#F56C6C',
info: '#909399',
white: '#FFFFFF',
black: '#000000',
}
export default {
components: {
BorderBox,
ColorBox,
TextBox,
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
primary: '',
success: '',
warning: '',
danger: '',
info: '',
white: '',
black: '',
borderColors,
textColors,
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(original).forEach((o) => {
if (value[varMap[o]]) {
this[o] = value[varMap[o]]
} else {
this[o] = original[o]
}
});
}
}
},
}
</script>
Color
Element Plus utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.
Color principal
El color principal de Element Plus es el azul brillante y amigable.
Brand Color
#409EFF
Color secundario
Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).
Color neutro
Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jerárquica.
Basic Black
{{black}}
Basic White
{{white}}
Transparent
Transparent