SOURCE

var App = new Vue({
  el: "#app",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
})

<div id="app" class="glui-mini">
  <glui-tag>
    标签一
  </glui-tag>
  <glui-tag type="success">
    标签二
  </glui-tag>
  <glui-tag type="info">
    标签三
  </glui-tag>
  <glui-tag type="warning">
    标签四
  </glui-tag>
  <glui-tag type="danger">
    标签五
  </glui-tag>
  <br>
  <br>
  <glui-button>
    默认按钮
  </glui-button>
  <glui-button type="primary">
    主要按钮
  </glui-button>
  <glui-button type="success">
    成功按钮
  </glui-button>
  <glui-button type="info">
    信息按钮
  </glui-button>
  <glui-button type="warning">
    警告按钮
  </glui-button>
  <glui-button type="danger">
    危险按钮
  </glui-button>
  <br>
  <br>
  <glui-dropdown split-button type="primary">
    默认尺寸
    <glui-dropdown-menu slot="dropdown">
      <glui-dropdown-item>
        黄金糕
      </glui-dropdown-item>
      <glui-dropdown-item>
        狮子头
      </glui-dropdown-item>
      <glui-dropdown-item>
        螺蛳粉
      </glui-dropdown-item>
      <glui-dropdown-item>
        双皮奶
      </glui-dropdown-item>
      <glui-dropdown-item>
        蚵仔煎
      </glui-dropdown-item>
    </glui-dropdown-menu>
  </glui-dropdown>
  <br>
  <br>
  <glui-input placeholder="请输入内容">
  </glui-input>
  <br>
  <br>
  <glui-select v-model="value" placeholder="请选择">
    <glui-option v-for="item in 10" :key="item" :label="item" :value="item">
    </glui-option>
  </glui-select>
  <br>
  <br>
  <glui-input-number :min="1" :max="10" label="描述文字">
  </glui-input-number>
  <br>
  <br>
  <glui-radio label="1">
    备选项
  </glui-radio>
  <glui-radio label="2">
    备选项
  </glui-radio>
  <br>
  <br>
  <glui-checkbox-group>
    <glui-checkbox label="复选框 A">
    </glui-checkbox>
    <glui-checkbox label="复选框 B">
    </glui-checkbox>
    <glui-checkbox label="复选框 C">
    </glui-checkbox>
    <glui-checkbox label="禁用" disabled>
    </glui-checkbox>
    <glui-checkbox label="选中且禁用" disabled>
    </glui-checkbox>
  </glui-checkbox-group>
  <br>
  <br>
  <glui-table :data="tableData" style="width: 100%" border>
    <glui-table-column prop="date" label="日期" width="180">
    </glui-table-column>
    <glui-table-column prop="name" label="姓名" width="180">
    </glui-table-column>
    <glui-table-column prop="address" label="地址">
    </glui-table-column>
  </glui-table>
  <br>
  <br>
  <glui-card>
    <glui-form label-width="80px">
      <glui-form-item label="活动名称">
        <glui-input>
        </glui-input>
      </glui-form-item>
      <glui-form-item label="取色器">
        <glui-color-picker value="#409EFF">
        </glui-color-picker>
      </glui-form-item>
      <glui-form-item>
        <glui-button type="primary">
          立即创建
        </glui-button>
        <glui-button>
          取消
        </glui-button>
      </glui-form-item>
    </glui-form>
  </glui-card>
  <br>
  <br>
</div>