lg-gs-ui v0.0.2

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>

• 配置项：

options 所有参数

• 可用 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 详细参数

showStyle 说明

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

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

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