# 自定义主题

Vue-iClient-MapboxGL 内置了 13 套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。

你可以通过以下方式定义主题。

# 使用 Vue-iClient-MapboxGL 内置主题

import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient-mapboxgl';
import App from './App.vue';

// 可以通过两种方式使用内置主题
// 1 初始化组件时传入主题配置
Vue.use(VueiClient, { theme: 'light' });

// 2 通过 setTheme 方法设置主题
VueiClient.setTheme({ theme: 'light' });

# 使用自定义主题

你需要定义一个 theme 对象,包含 textColor background colorGroup 三个属性。

参数 说明 类型 可选值 默认值
textColor 字体颜色 string - -
background 背景颜色 string - -
colorGroup 颜色数组 string[ ] - -

如下例所示:

let theme = {
  textColor: '#eee',
  background: 'rgba(0,0,0,0)',
  colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
};

Vue.use(VueiClient, { theme });
// 或
VueiClient.setTheme({ theme });
最后更新时间: 2019-12-30 10:39:04