gs基础组件库扩展说明

使用说明

avatar

快捷键列表

vue文件

gslayouts-1

<gs-layouts>,
  <gs-layouts-header>$1</gs-layouts-header>
  <gs-layouts-content>$2</gs-layouts-content>
  <gs-layouts-footer>$3</gs-layouts-footer>
</gs-layouts>

gslayouts-2

<gs-layouts>
  <gs-layouts-header>${1}</gs-layouts-header>
  <gs-layouts>
    <gs-layouts-sider>$2</gs-layouts-sider>
    <gs-layouts>
      <gs-layouts-content>$3</gs-layouts-content>
      <gs-layouts-footer>$4</gs-layouts-footer>
    </gs-layouts>
    </gs-layouts>
</gs-layouts>

gslayouts-3

<gs-layouts>
  <gs-layouts-sider></gs-layouts-sider>
  <gs-layouts>
    <gs-layouts-header></gs-layouts-header>
    <gs-layouts-content></gs-layouts-content>
    <gs-layouts-footer></gs-layouts-footer>
  </gs-layouts>
</gs-layouts>

gsmenu

<gs-menu
  mode="inline"
  theme="light"
  :default-active=""
  @select=""
>
  <gs-sub-menu
    v-for="(submenus, index) in menus"
    :key="index"
    :title="submenus.title"
    :icon="submenus.icon"
    :index="submenus.index"
  >
    <gs-menu-item
      v-for="(item, subindex) in submenus"
      :key="subindex"
      :title="item.title"
      :icon="item.icon"
      :index="item.index"
    />
  </gs-sub-menu>
</gs-menu>

gssubmenu

<gs-sub-menu
  :title=""
  :icon=""
  :index=""
>
  <gs-menu-item
    v-for="(item, index) in "
    :key="index"
    :title="item.title"
    :icon="item.icon"
    :index="item.index"
  />
</gs-sub-menu>

gsmenuitem

<gs-menu-item
  :title=""
  :icon=""
  :index=""
/>

gsrow

<gs-row>
  <gs-col :span="12"></gs-col>
  <gs-col :span="12"></gs-col>
</gs-row>

gscol
```
<gs-col :span=""></gs-col>
```

gsbutton

<gs-button type="default" @click=""></gs-button>

gsicon
```
<gs-icon name="" />
```
gsinput
```
<gs-input v-model="" placeholder="" />
```

gsinputnumber

<gs-input-number
  v-model=""
  :min="1"
  :max="100"
  placeholder=""
/>

gstextarea

<gs-textarea v-model="" :rows="" placeholder="" />

gssearch

<gs-search placeholder="" @search="" />

gsradiogroup

<gs-radio-group v-model="">
  <gs-radio
    v-for="(item, index) in "
    :key="index"
    :label="item"
  ></gs-radio>
</gs-radio-group>

gsradio
```
<gs-radio :label=""></gs-radio>
```

gscheckboxgroup

<gs-checkbox-group v-model="">
  <gs-checkbox
    v-for="(item, index) in "
    :key="index"
    :label="item"
  ></gs-checkbox>
</gs-checkbox-group>

gscheckbox

<gs-checkbox v-model="" :label=""></gs-checkbox>

gsswitch
```
<gs-switch v-model="" />
```

gsslider

<gs-slider v-model="" :min="0" :max="100" />

gsselect

<gs-select v-model="" placeholder="">
  <gs-option
    v-for="item in "
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</gs-select>

gsoption

<gs-option :label="label" :value="value" />

gscascader

<gs-cascader v-model="" :options="options" placeholder="" />

gscascaderselect

<gs-cascader-select v-model="" :options="options" placeholder="" />

gstransfer
```
<gs-transfer v-model="":data="" />
```

gsdatepicker

<gs-date-picker v-model="" type="date" placeholder="" />

gstimepicker

<gs-time-picker v-model="" input-type="default" placeholder="" />

gsupload

<gs-upload
  type="|default,dragger,picture|"
  multiple
  action=""
  :before-remove=""
  @upload-done=""
></gs-upload>

gsform

<gs-form
  ref="form"
  :model="form"
  :rules="rules"
  label-width="80px"
>
  <gs-form-item label="" prop="">
    <gs-input v-model="form." placeholder="" />
  </gs-form-item>
</gs-form>

gsformitem

<gs-form-item label="" prop=""></gs-form-item>

gsautocomplete

<gs-auto-complete v-model="" :data-source="" placeholder="" />

gstreeselect

<gs-tree-select v-model="" :tree-props="" placeholder="" />

gsmodal

<gs-modal
  title=""
  v-model=""
  :width=""
  @cancel=""
  @confirm=""
>

gspopover

<gs-popover
  title=""
  :width=""
  trigger="click"
  placement="bottom"
>
  <!-- <gs-button slot="reference">trigger</gs-button> -->

</gs-popover>

gstooltip

<gs-tooltip
  title=""
  effect="dark"
  placement="bottom"
>
  <!-- <gs-button>trigger</gs-button> -->
</gs-tooltip>

gsprogress

<gs-progress type="line" :percent="" :status="" />

gsbadge
```
<gs-badge :count="">

</gs-badge>
```
gsalert
```
<gs-alert type="info" title="" />
```

gstables

<gs-tables
  :columns="columns"
  :loading="loading"
  :data="data"
/>

gstablecolumn

<gs-tables-column
  :prop="col.prop"
  :label="col.label"
  :width="col.width"
/>

gspagination

<gs-pagination
  :current="pageIndex"
  :total="total"
  :page-size="pageSize"
  layout="pagesizes,pager,jumper,jumpbtn"
  @page-change="onPageChange"
  @page-size-change="onSizeChange"
/>

gstags
```
<gs-tag color="magenta"></gs-tag>
```

gsactabletags

<gs-tag
  selectable
  closable
></gs-tag>

gssteps

<gs-steps :active="" align-center>
  <template slot="header">
    <gs-step
      v-for="(item, index) in steps"
      :key="index"
      :title="item.title"
      :icon="item.title"
    />
  </template>
  <template slot="content"></template>
  <template slot="footer"></template>
</gs-steps>

gsstep
```
<gs-step title="" icon="" />
```

gstabs

<gs-tabs
  v-model="activeName"
  type=""
  direction="horizontal"
>
  <gs-tab-pane
    v-for="item in items"
    :key="item.name"
    :name="item.name"
    :label="item.label"
    :icon="item.icon"
  >

  </gs-tab-pane>
</gs-tabs>

gstabpane

<gs-tab-pane name="" label="" icon="">

</gs-tab-pane>

gstextlist

<gs-text-list title="">
  <gs-text-list-item
    v-for="item in items"
    :key="item.id"
    :title="item.title"
    :content="item.content"
    :extra="item.extra"
    :action-list="item.actions"
  />
</gs-text-list>

gstextlistitem

<gs-text-list-item
  :title="title"
  :content="content"
  :extra="extra"
  :action-list="actions"
/>

gscardlist

<gs-card-list title="">
  <gs-card
    v-for="item in items"
    :key="item.id"
    :title="item.title"
    :action="item.actions"
    img-height="225"
  />
</gs-card-list>

gscard

<gs-card
  :title="title"
  :action="actions"
  img-height="225"
/>

gscarousel

<gs-carousel autoplay loop bordered>
  <gs-carousel-item
    v-for="item in items"
    :key="item.id"
  >

  </gs-carousel-item>
</gs-carousel>

gscarouselitem

<gs-carousel-item>

</gs-carousel-item>

gscollapse

<gs-collapse v-model="">
  <gs-collapse-item
    v-for="item in items"
    :key="item.id"
    :name="item.name"
    :title="item.title"
  >

  </gs-collapse-item>
</gs-collapse>

gscollapseitem

<gs-collapse-item :name="name" :title="title">

</gs-collapse-item>

gstree

<gs-tree :data="" :props="" @node-click="" />

gstimeline

<gs-timeline>
  <gs-timeline-item
    v-for="item in items"
    :key="item.id"
    :title="item.title"
    :sub-title="item.subTitle"
    :content="item.content"
  />
</gs-timeline>

gstimelineitem

<gs-timeline-item
  :title="title"
  :sub-title="subTitle"
  :content="subTitle"
/>

gsempty
```
<gs-empty />
```

gsavatar

<gs-avatar
  :shape"shape"
  :size"size"
/>

gsdrawer

<gs-drawer
  v-model="visible"
  placement="right"
  title=""
  width=""
  @close=""
>

gsmask

<gs-mask :visible.sync="visible" @close=""></gs-mask>

gsscrollbar

<gs-scrollbar :wrap-style="" :view-style="">

</gs-scrollbar>

js文件

message-success

this.$message.success('content', [duration],
  () => {}
);

message-error

this.$message.error('content', '[duration]',
  () => {}
);

message-info

this.$message.info('content', '[duration]',
  () => {}
);

message-warning

this.$message.warning('content', '[duration]',
  () => {}
);

message-warn

this.$message.warn('content', '[duration]',
  () => {}
);

message-loading

this.$message.loading('content', '[duration]',
  () => {}
);

notification

this.$notification['[type]']({
  message: 'message',
  description: 'string|VNode|function(h)'
});

modal-success

this.$success({
  title: 'string|vNode',
  content: 'string|vNode'
});

modal-info

this.$info({
  title: 'string|vNode',
  content: 'string|vNode'
});

modal-error

this.$error({
  title: 'string|vNode',
  content: 'string|vNode'
});

modal-warning

this.$warning({
  title: 'string|vNode',
  content: 'string|vNode'
});

modal-confirm

this.$confirm({
  title: 'string|vNode',
  content: 'string|vNode',
  okText: 'string',
  cancelText: 'string',
  onCancel: () => {},
  onOk: () => {}
});

Gs-UI snippets

gridsum-frontend

gs基础组件库扩展说明

使用说明

快捷键列表

vue文件

js文件