中地数码

# 1、基本方法

mapgisui提供了setTheme方法，用于指定主题、定制自定义样式。

# setTheme方法使用：

# 1、参数说明

setTheme方法接收2个参数（themeStyle、payload），具体说明如下

参数 说明 备注
themeStyle 第一个参数用于指定主题，支持传入两种格式：字符串或对象 字符串格式即为3种主题类型：'light'、'dark'、'technology'，对象格式即为样式变量对象，详见下面示例
payload 第二个参数用于定制自定义样式，如主题色等信息

# 2、使用示例

引入mapgisui后即可使用该方法

示例1：themeStyle传入字符串：

import mapgisui from '@mapgis/webclient-vue-ui'

mapgisui.setTheme('dark', {
  colorGroup:["#8dc1a9", "#759aa0", "#00cbf0", "#e69d87", "#ea7e53"],
  dangerColor:'#A61D24'
})

示例2：themeStyle传入对象：

import mapgisui from '@mapgis/webclient-vue-ui'

mapgisui.setTheme({
    "title": "科技风格",
    "label": "technology",
    "style": "technology",
    "shadow": "#242424",
    "deepShadow": "rgb(0, 0, 0, 0.45)",
    "textColor": "rgba(225, 225, 225, 0.7)",
    "textColorSecondary": "rgba(255, 255, 255, 0.45)",
    "background": "#081a37e6",
    "backgroundLight": "#142745e6",
    "backgroundBase": "rgba(0, 0, 0, 0.08)",
    "selectedColor": "#00cbf026",
    "hoverColor": "#5eb7f2",
    "clickColor": "#2276bf",
    "successColor": "#49AA19",
    "successBgColor": "#324528",
    "successBorderColor": "#389E0D",
    "infoColor": "#00CBF0",
    "infoBgColor": "#122D36",
    "infoBorderColor": "#008BA3",
    "warningColor": "#D89614",
    "warningBgColor": "#4E4127",
    "warningBorderColor": "#D48806",
    "dangerColor": "#A61D24",
    "errorBgColor": "#44292A",
    "errorBorderColor": "#D9363E",
    "iconColorHover": "rgba(255, 255, 255, 0.75)",
    "headingColor": "rgba(225, 225, 225, 1)",
    "disabledTextColor": "rgba(225, 225, 225, 0.3)",
    "borderColorBase": "rgba(255, 255, 255, 0.15)",
    "componentBackground": "rgba(255, 255, 255, 0.04)",
    ...
})

# 3、主题色修改

可通过传入setTheme的第二个参数payload来指定新的主题色

其中colorGroup为颜色列表，该数组的第一项即为新的主题色

如下示例将暗色风的主题色从#1890ff切换为#8dc1a9：

import mapgisui from '@mapgis/webclient-vue-ui'

mapgisui.setTheme('dark', {
  colorGroup:["#8dc1a9", "#1890ff", "#00cbf0", "#e69d87", "#ea7e53"] // 将待切换的主题色'#1890ff'置为第一项
})

# 2、全局引入时指定主题

项目全局引入mapgisui时也可以指定主题样式等信息

具体示例如下,在项目的主文件中引入并指定主题：

// main.js
import mapgisui from '@mapgis/webclient-vue-ui'

Vue.use(mapgisui, {
  theme: 'technology',
  payload: {
    colorGroup:["#8dc1a9", "#1890ff", "#00cbf0", "#e69d87", "#ea7e53"]
  }
})

通过填写Vue.use(mapgisui)的第二个参数载荷来指定主题，支持填写该对象的两个key：theme和payload，这两项分别对应上文setTheme方法的2个参数，用法完全相同

← Less & Sass →