lg-gs-ui 文档

set-up

1. 安装
2. 使用

组件

gs-header

说明：gs-header 组件目前仅限于在卡友地带APP中使用，兼容沉浸式和非沉浸式两种页面样式。

• 按需引入

    import { GsHeader } from 'lg-gs-ui'
    Vue.component('GsHeader', GsHeader)
    
    // 页面 xxx.vue
    <template>
       ...
       <gs-header :options="headerOptions"></gs-header>
       ...
    </template>

• 配置项：

| 参数名 | 参数说明 | 参数类型 | 是否必填 | 默认值 | | --- | --- | --- | --- | --- | | textColor | 字体颜色 | string | 否 | '#333' | | bgColor | 头部背景色 | string | 否 | '#fff' | | myStyle | 头部自定义样式内容（行内样式） | object | 否 | / | | className | 头部自定义样式类名 | string | 否 | / | | fullscreen | 是否为沉浸式页面 | boolean | 是 | false | | options | 头部其他配置 | object | 是 | / |

options 所有参数

| 参数名 | 参数说明 | 参数类型 | 是否必填 | 默认值 | | --- | --- | --- | --- | --- | | title | 标题内容 | string | 否 | / | | back | 是否显示返回按钮 | boolean | 是 | true | | share | 是否显示分享按钮 | boolean | 否 | false | | backIcon | 返回按钮icon class | string | 否 | 'iconfont icon-back' | | shareIcon | 分享按钮icon class | string | 否 | 'iconfont icon-share' | | shareColor | 分享按钮字体颜色| string | 否 | / |

• 可用 slot 插槽

  • <slot name="left"></slot> 左侧插槽，可以用于自定义返回键按钮等
  • <slot name="right"></slot>右侧插槽，可以用于自定义右侧内容、自定义分享按钮等

• emit事件

  • 如果options.back等于true，点击返回按钮，emit事件back。可以通过@back监听。
  • 如果options.share等于true，点击分享按钮，emit事件share。可以通过@share监听。

gs-water-mark

水印组件，可以用在管理后台项目中涉及用户敏感信息的页面中添加水印。

• 按需引入

    import { gsWaterMark } from 'lg-gs-ui'
    Vue.component('gsWaterMark', gsWaterMark)
    
    // 页面 xxx.vue
    <template>
       ...
       <gs-water-mark :showStyle="showStyle" :water="water"></gs-water-mark>
       ...
    </template>

• 配置项：

| 参数名 | 参数说明 | 参数类型 | 是否必填 | 默认值 | | --- | --- | --- | --- | --- | | water | 水印相关配置 | object | 是 | 详见下面描述 | | showStyle | 水印容器样式配置 | obejct | 否 | 详见下面描述 |

water 详细参数

| 参数名 | 参数说明 | 参数类型 | 是否必填 | 默认值 | | --- | --- | --- | --- | --- | | container | 水印父级容器 | string | 否 | $parent.$el 默认为当前组件的父级 | | content | 水印内容 | string | 是 | / | | color | 水印字体颜色 | string | 否 | 'rgba(184, 184, 184, 0.5)' | | size | 水印字体大小 | string 或 number | 否 | 20 | | time | 是否在内容后拼接当前日期 | boolean | 是 | 当前日期，如 '2023-02-20' | | rotate | 水印旋转角度 | number | 否 | -10 （取值范围： -20 至 20） |

showStyle 说明

如果showStyle不传参，水印默认铺满父级容器，在页面中的效果如图：

也可以通过传参，修改水印的大小、在父容器下的大小、位置等，如：

    showStyle: {
       width: '50%',
       height: '50%',
       left: '20px',
       top: '20%',
       backgroundRepeat: 'repeat'
    }