QinUi

# 全局配置

内置 stores 全局数据维护。使用 pinia@2.0.36 才能生效。

# 获取

可引用 stores 进行读取。

# 主题色读取

主题颜色 --qinuiPrimaryColor ，主题背景颜色 --qinuiPrimaryBgColor 。

color: var(--qinuiPrimaryColor, #ff361f);
background-color: var(--qinuiPrimaryBgColor, rgba(254,44,85,0.1));

# 设置方法

通过 stores 里内置方法设置。

# 主题色

import { useQinuiStoreWithOut } from '@fe6/qin-ui/lib/qinui-tools/libs/stores';
const theQinuiStore = useQinuiStoreWithOut();
theQinuiStore.onSetPrimaryColor('#FE2C55');

# 字体图标

import { useQinuiStoreWithOut } from '@fe6/qin-ui/lib/qinui-tools/libs/stores';
const theQinuiStore = useQinuiStoreWithOut();
theQinuiStore.onSetIconfontFamily('iconfont');

import { useQinuiStoreWithOut } from '@fe6/qin-ui/lib/qinui-tools/libs/stores';
const theQinuiStore = useQinuiStoreWithOut();
theQinuiStore.onSetCopyright({
  image: `${onGetImgCdn()}image/btm-copyright.png`,
  webviewPageUrl: 'https://www.fanzhi.cn',
  imageWidth: '686rpx',
});

# empty

import { useQinuiStoreWithOut } from '@fe6/qin-ui/lib/qinui-tools/libs/stores';
const theQinuiStore = useQinuiStoreWithOut();
theQinuiStore.onSetEmpty({
  host: `${onGetImgCdn()}empty/`,
  imageWidth: '336rpx',
  imageHeight: '220rpx',
});

# tabbar

import { useQinuiStoreWithOut } from '@fe6/qin-ui/lib/qinui-tools/libs/stores';
const theQinuiStore = useQinuiStoreWithOut();
theQinuiStore.onSetTabbar({
  data: [
    {
      label: '首页',
      value: 'Home',
      icon: 'icon-home',
    },
    {
      label: '订单',
      value: 'OrderList',
      icon: 'icon-detail',
    },
    {
      label: '我的',
      value: 'Account',
      icon: 'icon-user',
    },
  ],
});

← 注意事项 →