听阳光的猫

道阻且长、望你如一

0%

项目部署上线

发表于 更新于 分类于
本文字数： 50k 阅读时长 ≈ 46 分钟

制作自己的官网

npm i -D vuepress

mkdir docs && echo '# Hello VuePress' > docs/README.md

npm run docs:dev

docs/README.md

1
2
3
# 轮子 UI 官网

 轮子 UI 是一个好用的 UI 框架，提供了 …… 等常用组件，适合移动端和 PC 端使用。

docs/get-started/README.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
---
title: 快速上手
---

# 快速上手

1. 引入 wheels
  import {Button, ButtonGroup, Icon} from 'd-wheels'
  import 'd-wheels/dist/index.css'

  export default {
    name: 'app',
    components: {
      'w-button': Button,
      'w-icon': Icon
    }
  }
  2. 引入 svg symbols
    <script src="//at.alicdn.com/t/font_2255771_2568c4dk59e.js"></script>
```




#### docs/install/README.md


```
---
title: 安装
---

# 安装
  1. 添加 CSS 样式

  使用本框架前，请在CSS中开启border-box

  *,*::before,*::after{box-sizing: border-box;}
  
  IE 8 及以上浏览器都支持此样式。

  你还需要设置默认颜色等变量(后续会改为 SCSS 变量)
  
  :root {
    --button-height: 32px;
    --font-size: 14px;
    --button-bg: white;
    --button-active-bg: #eee;
    --border-radius: 4px;
    --color: #333;
    --border-color: #999;
    --border-color-hover: #666;
  }
  
  IE 15 及以上浏览器都支持此样式。

2. 安装wheels
  
  npm i --save d-wheels
  
```



#### src/button.vue

````vue
<template>
  <button class="w-button" :class="{[`icon-${iconPosition}`]:true}" @click="$emit('click')">
    <w-icon class="icon" v-if="icon && !loading" :name="icon"></w-icon>
    <w-icon class="loading icon" v-if="loading" name="loading"></w-icon>
    <div class="w-button-content">
      <slot></slot>
    </div>
  </button>
</template>

<script>
import Icon from './icon'
export default {
  name: 'WheelsButton',
  components: {
    'w-icon': Icon
  },
  // props:['icon','iconPosition']
  props: {
    icon: {},
    loading: {
      type: Boolean,
      default: false
    },
    iconPosition: {
      type: String,
      default:'left',
      validator(value) {
        return value === 'left' || value === 'right'
      }
    }
  }
}
</script>

<style lang="scss">
  $font-size: 14px;
  $button-height: 32px;
  $button-bg: white;
  $button-active-bg: #eee;
  $border-radius: 4px;
  $color: #333;
  $border-color: #999;
  $border-color-hover: #666;
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .w-button { font-size: $font-size; height: $button-height; padding: 0 1em;
    border-radius: $border-radius; border: 1px solid $border-color;
    background: $button-bg;
    display: inline-flex; justify-content: center; align-items: center;
    vertical-align: middle;
    &:hover { border-color: $border-color-hover; }
    &:active { background-color: $button-active-bg; }
    &:focus { outline: none; }
    > .w-button-content { order: 2; }
    > .icon { order: 1; margin-right: .1em; }
    &.icon-right {
      > .w-button-content { order: 1; }
      > .icon { order: 2; margin-right: 0; margin-left: .1em;}
    }
    .loading {
      animation: spin 2s infinite linear;
    }
  }
</style>

docs/.vuepress/components/button-demos.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div>
    <w-button>默认按钮</w-button>
    <w-button icon="settings">默认按钮</w-button>
    <w-button :loading="true">默认按钮</w-button>
    <w-button disabled>默认按钮</w-button>

    <pre><code>{{content}}</code></pre>
  </div>
</template>
<script>
  import Button from '../../../src/button'
  export default {
    components: {
      'w-button': Button
    },
    data () {
      return {
        content: `
          <w-button>默认按钮</w-button>
          <w-button icon="settings">默认按钮</w-button>
          <w-button :loading="true">默认按钮</w-button>
          <w-button disabled>默认按钮</w-button>
      `.replace(/\t+| +/g, '').trim()
      }
    }
  }
</script>

docs/.vuepress/config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
module.exports = {
  base: '/Wheels/',
  title: '轮子UI',
  description: '一个好用的UI框架',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ],
    sidebar: [
      {
        title: '入门',
        children: [
          '/introduce/',
          '/get-started/',
        ]
      },
      {
        title: '组件',
        children: [
          '/components/button',
          '/components/tabs',
          '/components/input',
          '/components/grid',
          '/components/layout',
          '/components/toast',
          '/components/collapse',
          '/components/popover',
        ]
      },

    ]
  }
}

docs/components/button.md

1
2
3
4
5
6
7
8
9
10
---
title: Button
---
# 按钮

使用方法

<ClientOnly>
  <button-demos></button-demos>
</ClientOnly>

package.json

image-20201228193440294

报错

1
Module not found: Error: Can't resolve 'sass-loader'

npm uninstall sass-loader

npm install sass-loader@7.3.1 --save-dev

部署到github pages

deploy.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:Derek-Dong/wheels.git master:gh-pages

cd -

./deploy.sh

完成官网的Button页面

button-demos.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div class="wrapper">
    <w-button>默认按钮</w-button>
    <w-button icon="settings">默认按钮</w-button>
    <w-button :loading="loading" @click="loading=!loading">默认按钮</w-button>
    <w-button disabled>默认按钮</w-button>
  </div>
</template>
<script>
  import Button from '../../../src/button'
  export default {
    components: {
      'w-button': Button
    },
    data() {
      return {
        loading: true
      }
    }
  }
</script>
<style>
div.wrapper {
  margin-top: 10px;
}
</style>

button.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
---
title: Button 按钮
---

# Button 按钮

**使用方法**
#### 基本用法：

<ClientOnly>
  <button-demos></button-demos>
</ClientOnly>

#### 示例代码：

​```vue
  <w-button>默认按钮</w-button>
  <w-button icon="settings">默认按钮</w-button>
  <w-button :loading="true" @click="loading=!loading">默认按钮</w-button>
  <w-button disabled>默认按钮</w-button>
​```

# Attributes
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
| icon | 设置内置的icon |    String | setting，info，left，right，download，loading，thumbs-up，down| -- 
|iconPosition|图标位置|String|left、right|left
| loading      | 加载状态      |  Boolean |true、false| false

将 scss 变量提升到 helper.scss

src/helper.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$button-height: 32px;
$font-size: 14px;
$button-bg: white;
$button-active-bg: #eee;
$border-radius: 4px;
$color: #333;
$border-color: #999;
$border-color-hover: #666;
$grey:#ddd;
$height: 32px;
$input-font-size: 12px;
$box-shadow-color: rgba(0, 0, 0, 0.5);
$red: #F1453D;
$popover-border-color:#333;
$blue:blue;
$tab-height:40px;
$tabs-border-color:#ddd;
$disable-text-color: grey;
$toast-min-height: 40px;
$toast-bg: rgba(0, 0, 0, 0.75);

src/button-group.vue

image-20201230202827884

src/button.vue

image-20201230202910543

src/collapse-item.vue

image-20201230203006528

src/collapse.vue

image-20201230203025514

src/input.vue

image-20201230203127561

src/popover.vue

image-20201230203211155

src/tabs-head.vue

image-20201230203302177

src/tabs-item.vue

image-20201230203332652

src/toast.vue

image-20201230202646620

完善 index.js

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import Button from './src/button'
import ButtonGroup from './src/button-group'
import Icon from './src/icon'
import Input from './src/input'
import Col from './src/col'
import Row from './src/row'
import Layout from './src/layout'
import Header from './src/header'
import Footer from './src/footer'
import Sider from './src/sider'
import Content from './src/content'
import Toast from './src/toast'
import plugin from './src/plugin.js'
import Tabs from './src/tabs'
import TabsHead from './src/tabs-head'
import TabsBody from './src/tabs-body'
import TabsItem from './src/tabs-item'
import TabsPane from './src/tabs-pane'
import Popover from './src/popover'
import Collapse from './src/collapse'
import CollapseItem from './src/collapse-item'

export {
  Button,
  ButtonGroup,
  Icon,
  Input,
  Col,
  Row,
  Layout,
  Header,
  Footer,
  Sider,
  Content,
  Toast,
  plugin,
  Tabs,
  TabsHead,
  TabsBody,
  TabsItem,
  TabsPane,
  Popover,
  Collapse,
  CollapseItem,
}

完成官网的 Input 页面

input.vue

image-20201230204741231

docs/.vuepress/components/input-demos.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <div>
    <div class="easy">
      <g-input placeholder="请输入内容"></g-input>
      <g-input value="默认内容"></g-input>
      <g-input disabled value="默认内容"></g-input>
    </div>
    <div class="error">
      <g-input error="用户名不低于两个字"></g-input>
    </div>
    <div class="bindDate">
      <g-input v-model="value"></g-input>
      <p>value: {{value}}</p>
    </div>
  </div>
</template>
<script>
import Input from '../../../src/input'
export default {
  components:{'g-input':Input},
  data(){
    return{
      value:'默认内容'
    }
  }
}
</script>
<style lang="scss">
div.easy{
  margin-top: 10px;
  margin-bottom: 8px;
  > input{
    margin-top: 8px;
  }
}
div.bindDate{
  margin-top: 8px;
  height: 64px;
}
</style>

docs/components/input.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
---
title: Input 输入框
---
# Input 输入框

**使用方法**

#### 基本用法：

<ClientOnly>
<input-demos></input-demos>
</ClientOnly>

<br>

#### 示例代码：

​```vue
<w-input placeholder="请输入内容"></w-input>
<w-input value="默认内容"></w-input>
<w-input disabled value="默认内容"></w-input>
<w-input error="用户名不低于两个字"></w-input>

<!--可支持数据绑定-->
<w-input v-model="value"></w-input>
<p>value: {{value}}</p>
​```

# Attributes
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|value| 设置默认内容 | String |--|-- 
|disabled| 是否禁用状态 | Boolean |true, false|false
|readonly| 是否只读状态 | Boolean |true, false|false
|placeholder| 提示信息 | String |--|-- 
|error| 错误信息 | String |--|--

解决 tabs-head.vue 里 line 的位置问题

index.html

image-20201231103146216

src/app.js

image-20201231103219482

src/tabs-head.vue

image-20201231103302512

完成官网的 tabs 页面

docs/.vuepress/components/tabs-demos.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
  <div style="margin-top: 10px">
    <div>
      <w-tabs :selected="selected1">
        <w-tabs-head>
          <w-tabs-item name="1">标题一</w-tabs-item>
          <w-tabs-item name="2">标题二</w-tabs-item>
        </w-tabs-head>
        <w-tabs-body>
          <w-tabs-pane name="1">内容1</w-tabs-pane>
          <w-tabs-pane name="2">内容2</w-tabs-pane>
        </w-tabs-body>
      </w-tabs>
    </div>

    <div style="margin-top: 20px">
      <w-tabs :selected="selected2">
        <w-tabs-head>
          <w-tabs-item name="1">标题一</w-tabs-item>
          <w-tabs-item disabled name="2">标题二</w-tabs-item>
          <w-tabs-item name="3">标题三</w-tabs-item>
        </w-tabs-head>
        <w-tabs-body>
          <w-tabs-pane name="1">内容1</w-tabs-pane>
          <w-tabs-pane name="2">内容2</w-tabs-pane>
          <w-tabs-pane name="3">内容3</w-tabs-pane>
        </w-tabs-body>
      </w-tabs>
    </div>
  </div>
</template>
<script>
import Tabs from '../../../src/tabs'
import TabsHead from '../../../src/tabs-head'
import TabsBody from '../../../src/tabs-body'
import TabsItem from '../../../src/tabs-item'
import TabsPane from '../../../src/tabs-pane'
export default {
  data() {
    return {
      selected1: '1',
      selected2: '1'
    }
  },
  components: {
    'w-tabs': Tabs,
    'w-tabs-head': TabsHead,
    'w-tabs-body': TabsBody,
    'w-tabs-item': TabsItem,
    'w-tabs-pane': TabsPane,
  }
}
</script>

docs/components/tabs.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
---
title: Tabs 标签页
---
# Tabs 标签页

**使用方法**

#### 基本用法

<ClientOnly>
<tabs-demos></tabs-demos>
</ClientOnly>

#### 示例代码

​```vue
  <w-tabs :selected="selected1">
    <w-tabs-head>
      <w-tabs-item name="1">标题一</w-tabs-item>
      <w-tabs-item name="2">标题二</w-tabs-item>
    </w-tabs-head>
    <w-tabs-body>
      <w-tabs-pane name="1">内容1</w-tabs-pane>
      <w-tabs-pane name="2">内容2</w-tabs-pane>
  </w-tabs-body>
  </w-tabs>

  <w-tabs :selected="selected2">
    <w-tabs-head>
      <w-tabs-item name="1">标题一</w-tabs-item>
      <w-tabs-item disabled name="2">标题二</w-tabs-item>
      <w-tabs-item name="3">标题三</w-tabs-item>
    </w-tabs-head>
    <w-tabs-body>
      <w-tabs-pane name="1">内容1</w-tabs-pane>
      <w-tabs-pane name="2">内容2</w-tabs-pane>
      <w-tabs-pane name="3">内容3</w-tabs-pane>
    </w-tabs-body>
  </w-tabs>
​```

# Attributes

### Tabs

|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|selected| 当前选中 | String |name| --

### TabsHeadItem 
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|name| 唯一标识，必选 | String |--|-- 
|disabled|设置是否禁用|Boolean|true、false|false

### TabsBodyPane
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|name| 唯一标识，必选 | String |--|--

完成官网的 grid 页面

docs/.vuepress/components/grid-demo-1.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
  <div>
    <w-row class="demoRow">
      <w-col span="8">
        <div class="demoCol">8</div>
      </w-col>
      <w-col span="8">
        <div class="demoCol">8</div>
      </w-col>
      <w-col span="8">
        <div class="demoCol">8</div>
      </w-col>
    </w-row>
    <w-row class="demoRow">
      <w-col span="6">
        <div class="demoCol">6</div>
      </w-col>
      <w-col span="6">
        <div class="demoCol">6</div>
      </w-col>
      <w-col span="6">
        <div class="demoCol">6</div>
      </w-col>
      <w-col span="6">
        <div class="demoCol">6</div>
      </w-col>
    </w-row>
    <w-row class="demoRow">
      <w-col span="4">
        <div class="demoCol">4</div>
      </w-col>
      <w-col span="4">
        <div class="demoCol">4</div>
      </w-col>
      <w-col span="4">
        <div class="demoCol">4</div>
      </w-col>
      <w-col span="4">
        <div class="demoCol">4</div>
      </w-col>
      <w-col span="4">
        <div class="demoCol">4</div>
      </w-col>
      <w-col span="4">
        <div class="demoCol">4</div>
      </w-col>
    </w-row>
    <w-row class="demoRow">
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
    </w-row>
  </div>
</template>
<script>
import Row from '../../../src/row'
import Col from '../../../src/col'
export default {
  components:{
    'w-row' : Row,
    'w-col' : Col,
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.demoRow{
  margin: 10px 0;
}
.demoCol {
  height: 50px;
  border: 1px solid #ccc;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

docs/.vuepress/components/grid-demo-2.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<template>
  <div style="padding-top: 16px;">
    <w-row class="demoRow" gutter="10">
      <w-col span="8">
        <div class="demoCol">8</div>
      </w-col>
      <w-col span="8">
        <div class="demoCol">8</div>
      </w-col>
      <w-col span="8">
        <div class="demoCol">8</div>
      </w-col>
    </w-row>
    <w-row class="demoRow" gutter="10">
      <w-col span="6">
        <div class="demoCol">6</div>
      </w-col>
      <w-col span="6">
        <div class="demoCol">6</div>
      </w-col>
      <w-col span="6">
        <div class="demoCol">6</div>
      </w-col>
      <w-col span="6">
        <div class="demoCol">6</div>
      </w-col>
    </w-row>
  </div>
</template>

<script>
import Row from '../../../src/row'
import Col from '../../../src/col'
export default {
  components: {
    'w-row' : Row,
    'w-col' : Col
  },
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.demoRow{
  margin: 10px 0;
}
.demoCol {
  height: 50px;
  border: 1px solid #ccc;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

docs/.vuepress/components/grid-demo-3.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
  <div style="padding-top: 16px;">
    <w-row class="demoRow" gutter="10">
      <w-col span="8">
        <div class="demoCol">8</div>
      </w-col>
      <w-col span="8" offset="8">
        <div class="demoCol">8</div>
      </w-col>
    </w-row>
    <w-row class="demoRow" gutter="10">
      <w-col span="6" offset="6">
        <div class="demoCol">6</div>
      </w-col>
      <w-col span="6" offset="6">
        <div class="demoCol">6</div>
      </w-col>
    </w-row>
    <w-row class="demoRow" gutter="10">
      <w-col span="4">
        <div class="demoCol">4</div>
      </w-col>
      <w-col span="4" offset="4">
        <div class="demoCol">4</div>
      </w-col>
      <w-col span="4" offset="8">
        <div class="demoCol">4</div>
      </w-col>
    </w-row>
    <w-row class="demoRow" gutter="10">
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2" offset="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2" offset="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2" offset="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2">
        <div class="demoCol">2</div>
      </w-col>
      <w-col span="2" offset="2">
        <div class="demoCol">2</div>
      </w-col>
    </w-row>
  </div>
</template>
<script>
import Row from '../../../src/row'
import Col from '../../../src/col'
export default {
  components: {
    'w-row' : Row,
    'w-col' : Col
  },
}
</script> 
<style scoped>
* {
  box-sizing: border-box;
}
.demoRow{
  margin: 10px 0;
}
.demoCol {
  height: 50px;
  border: 1px solid #ccc;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

docs/components/grid.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
---
title: Grid 栅格
---
# Grid 栅格

**使用方法**

### 24网格

#### 预览

<ClientOnly>
<grid-demo-1></grid-demo-1>
</ClientOnly>

#### 示例代码 

​```vue
<w-row class="demoRow">
  <w-col span="8">
    <div class="demoCol">8</div>
  </w-col>
  <w-col span="8">
    <div class="demoCol">8</div>
  </w-col>
  <w-col span="8">
    <div class="demoCol">8</div>
  </w-col>
</w-row>
<w-row class="demoRow">
  <w-col span="6">
    <div class="demoCol">6</div>
  </w-col>
  <w-col span="6">
    <div class="demoCol">6</div>
  </w-col>
  <w-col span="6">
    <div class="demoCol">6</div>
  </w-col>
  <w-col span="6">
    <div class="demoCol">6</div>
  </w-col>
</w-row>
<w-row class="demoRow">
  <w-col span="4">
    <div class="demoCol">4</div>
  </w-col>
  <w-col span="4">
    <div class="demoCol">4</div>
  </w-col>
  <w-col span="4">
    <div class="demoCol">4</div>
  </w-col>
  <w-col span="4">
    <div class="demoCol">4</div>
  </w-col>
  <w-col span="4">
    <div class="demoCol">4</div>
  </w-col>
  <w-col span="4">
    <div class="demoCol">4</div>
  </w-col>
</w-row>
<w-row class="demoRow">
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
</w-row>
​```

### 设置 gutter

#### 预览

<ClientOnly>
<grid-demo-2></grid-demo-2>
</ClientOnly>

#### 示例代码

​```vue
<w-row class="demoRow" gutter="10">
  <w-col span="8">
    <div class="demoCol">8</div>
  </w-col>
  <w-col span="8">
    <div class="demoCol">8</div>
  </w-col>
  <w-col span="8">
    <div class="demoCol">8</div>
  </w-col>
</w-row>
<w-row class="demoRow" gutter="10">
  <w-col span="6">
    <div class="demoCol">6</div>
  </w-col>
  <w-col span="6">
    <div class="demoCol">6</div>
  </w-col>
  <w-col span="6">
    <div class="demoCol">6</div>
  </w-col>
  <w-col span="6">
    <div class="demoCol">6</div>
  </w-col>
</w-row>
​```

### 设置空隙

#### 预览

<ClientOnly>
<grid-demo-3></grid-demo-3>
</ClientOnly>

#### 示例代码

​```vue
<w-row class="demoRow" gutter="10">
  <w-col span="8">
    <div class="demoCol">8</div>
  </w-col>
  <w-col span="8" offset="8">
    <div class="demoCol">8</div>
  </w-col>
</w-row>
<w-row class="demoRow" gutter="10">
  <w-col span="6" offset="6">
    <div class="demoCol">6</div>
  </w-col>
  <w-col span="6" offset="6">
    <div class="demoCol">6</div>
  </w-col>
</w-row>
<w-row class="demoRow" gutter="10">
  <w-col span="4">
    <div class="demoCol">4</div>
  </w-col>
  <w-col span="4" offset="4">
    <div class="demoCol">4</div>
  </w-col>
  <w-col span="4" offset="8">
    <div class="demoCol">4</div>
  </w-col>
</w-row>
<w-row class="demoRow" gutter="10">
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2" offset="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2" offset="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2" offset="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2">
    <div class="demoCol">2</div>
  </w-col>
  <w-col span="2" offset="2">
    <div class="demoCol">2</div>
  </w-col>
</w-row>
​```

# Attributes

### Row 
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|gutter| 间距 | String、Number |--|0
|position|对齐方式|String|left、center、right|left

### Col
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|span| 栅格占据的列数 | String、Number |1-24|--
|offset|栅格左侧的间隔格数| String、Number|1-24|--
|ipad|ipad响应式布局|Number、Object|span数字或{span:1;offset:1}|--
|narrowPc|窄屏幕响应式布局|Number、Object|span数字或{span:1;offset:1}|--
|pc|普通电脑响应式布局|Number、Object|span数字或{span:1;offset:1}|--
|widePc|宽屏响应式布局|Number、Object|span数字或{span:1;offset:1}|--

完成官网的 layout 页面

docs/.vuepress/components/layout-demo-1.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
  <div style="padding-top: 16px;">
    <w-layout style="color: white; margin-bottom:50px;">
      <w-header style="height: 50px; background:lightskyblue;">
        header
      </w-header>
      <w-content style="height: 100px; background:deepskyblue;">
        content
      </w-content>
      <w-footer style="height: 50px; background:lightskyblue;">
        footer
      </w-footer>
    </w-layout>
  </div>
</template>
<script>
import Layout from '../../../src/layout'
import Header from '../../../src/header'
import Footer from '../../../src/footer'
import Content from '../../../src/content'
import Sider from '../../../src/sider'
export default {
  components: {
    'w-layout' : Layout,
    'w-header' : Header,
    'w-footer' : Footer,
    'w-content' : Content,
    'w-sider' : Sider,
  },
}
</script> 
<style scoped>
* {
  box-sizing: border-box;
}

</style>

docs/.vuepress/components/layout-demo-2.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <div style="padding-top: 16px;">
    <w-layout style="color: white; overflow:hidden; margin-bottom:50px;">
      <w-header style="height: 50px; background:lightskyblue;">
        header
      </w-header>
      <w-layout>
        <w-sider style="height: 100px; background:#ddd; width:200px; color: black;">
          sider
        </w-sider>
        <w-content style="height: 100px; background:deepskyblue;">
          content
        </w-content>
      </w-layout>
      <w-footer style="height: 50px; background:lightskyblue;">
        footer
      </w-footer>
    </w-layout>
  </div>
</template>
<script>
import Layout from '../../../src/layout'
import Header from '../../../src/header'
import Footer from '../../../src/footer'
import Content from '../../../src/content'
import Sider from '../../../src/sider'
export default {
  components: {
    'w-layout' : Layout,
    'w-header' : Header,
    'w-footer' : Footer,
    'w-content' : Content,
    'w-sider' : Sider,
  },
}
</script>
<style scoped>
* {
  box-sizing: border-box;
}
</style>

docs/.vuepress/components/layout-demo-3.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <div style="padding-top: 16px;">
    <w-layout style="color: white; overflow:hidden; margin-bottom:50px;">
      <w-sider style=" background:#ddd; width:200px; color: black;">
        sider
      </w-sider>
      <w-layout>
        <w-header style="height: 50px; background:lightskyblue;">
          header
        </w-header>
        <w-content style="height: 100px; background:deepskyblue;">
          content
        </w-content>
        <w-footer style="height: 50px; background:lightskyblue;">
          footer
        </w-footer>
      </w-layout>
    </w-layout>
  </div>
</template>
<script>
import Layout from '../../../src/layout'
import Header from '../../../src/header'
import Footer from '../../../src/footer'
import Content from '../../../src/content'
import Sider from '../../../src/sider'
export default {
  components: {
    'w-layout' : Layout,
    'w-header' : Header,
    'w-footer' : Footer,
    'w-content' : Content,
    'w-sider' : Sider,
  },
}
</script>
<style scoped>
* {
  box-sizing: border-box;
}
</style>

docs/components/layout.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
---
title: Layout 布局
---
# Layout 布局

**使用方法**

### 布局一

#### 预览

<ClientOnly>
<layout-demo-1></layout-demo-1>
</ClientOnly>

#### 示例代码

​```vue
<w-layout style="color: white; margin-bottom:50px;">
    <w-header style="height: 50px; background:#9E91F2;">
      header
    </w-header>
    <w-content style="height: 100px; background:#7B62D9;">
      content
    </w-content>
    <w-footer style="height: 50px; background:#9E91F2;">
      footer
    </w-footer>
</w-layout>
​```

### 布局二

#### 预览

<ClientOnly>
<layout-demo-2></layout-demo-2>
</ClientOnly>

#### 示例代码

​```vue
<w-layout style="color: white; overflow:hidden; margin-bottom:50px;">
    <w-header style="height: 50px; background:#9E91F2;">
      header
    </w-header>
    <w-layout>
      <w-sider style="height: 100px; background:#ddd; width:200px; color: black;">
        sider
      </w-sider>
      <w-content style="height: 100px; background:#7B62D9;">
        content
      </w-content>
    </w-layout>
    <w-footer style="height: 50px; background:#9E91F2;">
      footer
    </w-footer>
</w-layout>
​```

### 布局三

#### 预览

<ClientOnly>
<layout-demo-3></layout-demo-3>
</ClientOnly>

#### 示例代码

​```vue
<w-layout style="color: white; overflow:hidden; margin-bottom:50px;">
    <w-sider style=" background:#ddd; width:200px; color: black;">
      sider
    </w-sider>
    <w-layout>
      <w-header style="height: 50px; background:lightskyblue;">
        header
      </w-header>
      <w-content style="height: 100px; background:deepskyblue;">
        content
      </w-content>
      <w-footer style="height: 50px; background:lightskyblue;">
        footer
      </w-footer>
    </w-layout>
</w-layout>
​```

完成官网的 Toast 页面

docs/.vuepress/components/toast-demo-1.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div style="padding-top: 16px;">
    <div>
      <w-button @click="$toast('这是上方的内容')">上方弹出</w-button>
      <w-button @click="$toast('这是中间的内容', {position:'middle'})">中间弹出</w-button>
      <w-button @click="$toast('这是下方的内容', {position:'bottom'})">下方弹出</w-button>
    </div>
  </div>
</template>
<script>
import plugin from '../../../src/plugin'
import WButton from '../../../src/button'
import Vue from 'vue'
Vue.use(plugin)
export default {
  components: {WButton},
}
</script>
<style>
.wrapper {
  z-index: 30 !important;
}
</style>

docs/.vuepress/components/toast-demo-2.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div style="padding-top: 16px;">
    <div>
      <w-button @click="onClickButton">上方弹出</w-button>
    </div>
  </div>
</template>
<script>
import plugin from '../../../src/plugin'
import WButton from '../../../src/button'
import Vue from 'vue'
Vue.use(plugin)
export default {
  components: {WButton},
  methods: {
    onClickButton () {
      this.$toast('你知道我在等你吗？', {
        closeButton: {
          text: '知道了',
          callback: () => {
            console.log('他说知道了')
          }
        }
      })
    }
  },
}
</script>

docs/.vuepress/components/toast-demo-3.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div style="padding-top: 16px;">
    <div>
      <w-button @click="onClickButton">上方弹出</w-button>
    </div>
  </div>
</template>
<script>
import plugin from '../../../src/plugin'
import WButton from '../../../src/button'
import Vue from 'vue'
Vue.use(plugin)
export default {
  components: {WButton},
  methods: {
    onClickButton () {
      this.$toast('<strong style="color:red;">加粗的提示</strong>', {
        enableHtml: true
      })
    }
  },
}
</script>

docs/components/toast.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
---
title: Toast 文字提示
---
# Toast 文字提示

**使用方法**

### this.$toast

#### 预览

<ClientOnly>
<toast-demo-1></toast-demo-1>
</ClientOnly>

#### 示例代码

​```vue
  <w-button @click="$toast('点击弹出提示')">上方弹出</w-button>
  <w-button @click="$toast('点击弹出提示', {position:'middle'})">中间弹出</w-button>
  <w-button @click="$toast('点击弹出提示', {position:'bottom'})">下方弹出</w-button>
​```

### 设置关闭按钮

#### 预览

<ClientOnly>
<toast-demo-2></toast-demo-2>
</ClientOnly>

#### 示例代码

​```vue
<template>
    <div>
      <w-button @click="onClickButton">上方弹出</w-button>
    </div>
</template>
<script>
export default {
methods: {
    onClickButton () {
      this.$toast('你知道我在等你吗？', {
        closeButton: {
          text: '知道了',
          callback: () => {
            console.log('他说知道了')
          }
        }
      })
    }
  },
}
</script>
​```

### 支持传入 HTML

#### 预览

<ClientOnly>
<toast-demo-3></toast-demo-3>
</ClientOnly>

#### 示例代码

​```vue
<template>
    <div>
      <w-button @click="onClickButton">上方弹出</w-button>
    </div>
</template>
<script>
export default {
  methods: {
    onClickButton () {
      this.$toast('<strong style="color:red;">加粗的提示</strong>', {
        enableHtml: true
      })
    }
  },
}
</script>
​```

# options
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
| message | 显示内容，函数第一个参数 |    String | --| --
| object | 函数接受的第二个参数 |    String | autoClose, closeButton, enableHtml, position| --
| position | 设置位置 |    String | top、middle、bottom| middle
|autoClose|是否自动关闭|Boolean|true、false|true
| closeButton | 设置关闭按钮      |  Object |--| {message:'关闭', callback:undefined}
|enableHtml|是否支持html内容|Boolean|true、false|false

完成官网的 Collapse 页面

docs/.vuepress/components/collapse-demos.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div class="wrapper">
    <div>
      <w-collapse :selected.sync="selectedTab" single>
        <w-collapse-item title="标题1" name="1">hello，你好呢。</w-collapse-item>
        <w-collapse-item title="标题2" name="2">你知道我在想你吗?</w-collapse-item>
        <w-collapse-item title="标题3" name="3">我在等你呀!</w-collapse-item>
      </w-collapse>
    </div>
  </div>
</template>
<script>
import Collapse from '../../../src/collapse'
import CollapseItem from '../../../src/collapse-item'
export default {
  data() {
    return {
      selectedTab: ['1']
    }
  },
  components: {
    'w-collapse': Collapse,
    'w-collapse-item': CollapseItem
  }
}
</script>
<style scoped>
.wrapper{
  margin-top: 10px;
}
</style>

docs/components/collapse.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
---
title: Collapse 折叠面板
---
# Collapse 折叠面板

**使用方法**

### 基本用法

<ClientOnly>
<collapse-demos></collapse-demos>
</ClientOnly>

#### 示例代码

​```vue
<w-collapse :selected.sync="selectedTab" single>
  <w-collapse-item title="标题1" name="1">hello，你好呢。</w-collapse-item>
  <w-collapse-item title="标题2" name="2">你知道我在想你吗?</w-collapse-item>
  <w-collapse-item title="标题3" name="3">我在等你呀!</w-collapse-item>
</w-collapse>

<script>
export default {
  data() {
    return {
      selectedTab: ['1']
    }
  },
}
</script>
​```

# Attributes

### Collapse 
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|selected| 选中项 | Array |--|[]
| single | 是否单一展示 |    boolean | true、false|false

### CollapseItem
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|title| 标题 | String |--|--
| name | 唯一标识，必填 |    String |-- |--

src/collapse-item.vue

image-20201231125422565

完成官网的 Popover 页面

docs/.vuepress/components/popover-demo-1.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <div style="padding-top: 16px;">
    <w-popover position="left">
      <w-button>左边弹出</w-button>
      <template slot="content">
        <strong style="color: #F1453D">加粗的提示</strong>
      </template>
    </w-popover>
    <w-popover>
      <w-button>上方弹出</w-button>
      <template slot="content">
        <a href="https://github.com/Derek-Dong/wheels">这是个a链接</a>
      </template>
    </w-popover>
    <w-popover position="bottom">
      <w-button>下方弹出</w-button>
      <template slot="content">
        普通文本内容
      </template>
    </w-popover>
    <w-popover position="right">
      <w-button>右边弹出</w-button>
      <template slot="content">
        普通文本内容
      </template>
    </w-popover>

  </div>
</template>

<script>
import WButton from '../../../src/button'
import WPopover from '../../../src/popover'
export default {
  components: {WButton, WPopover},
}
</script>
<style>
content-wrapper {
  z-index: 30;
}
</style>

docs/.vuepress/components/popover-demo-2.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div style="padding-top: 16px;">
    <w-popover position="left" trigger="hover">
      <w-button>左边弹出</w-button>
      <template slot="content">
        弹出内容
      </template>
    </w-popover>
    <w-popover trigger="hover">
      <w-button>上方弹出</w-button>
      <template slot="content">
        弹出内容
      </template>
    </w-popover>
    <w-popover position="bottom" trigger="hover">
      <w-button>下方弹出</w-button>
      <template slot="content">
        弹出内容
      </template>
    </w-popover>
    <w-popover position="right" trigger="hover">
      <w-button>右边弹出</w-button>
      <template slot="content">
        弹出内容
      </template>
    </w-popover>
  </div>
</template>

<script>
import WButton from '../../../src/button'
import WPopover from '../../../src/popover'
export default {
  components: {WButton, WPopover},
}
</script>

docs/components/popover.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
---
title: Popover 弹出框
---
# Popover 弹出框

**使用方法**

### 支持 HTML

#### 预览

<ClientOnly>
<popover-demo-1></popover-demo-1>
</ClientOnly>

#### 示例代码

​```vue
<w-popover position="left">
  <w-button>左边弹出</w-button>
  <template slot="content">
    <strong style="color: #F1453D">加粗的提示</strong>
  </template>
</w-popover>
<w-popover>
  <w-button>上方弹出</w-button>
  <template slot="content">
    <a href="https://github.com/Derek-Dong/wheels">这是个a链接</a>
  </template>
</w-popover>
<w-popover position="bottom">
  <w-button>下方弹出</w-button>
  <template slot="content">
    普通文本内容
  </template>
</w-popover>
<w-popover position="right">
  <w-button>右边弹出</w-button>
  <template slot="content">
    普通文本内容
  </template>
</w-popover>
​```

### 支持 hover 触发

#### 预览

<ClientOnly>
<popover-demo-2></popover-demo-2>
</ClientOnly>

#### 示例代码

​```vue
<w-popover position="left" trigger="hover">
  <w-button>左边弹出</w-button>
  <template slot="content">
    弹出内容
  </template>
</w-popover>
<w-popover trigger="hover">
  <w-button>上方弹出</w-button>
  <template slot="content">
    弹出内容
  </template>
</w-popover>
<w-popover position="bottom" trigger="hover">
  <w-button>下方弹出</w-button>
  <template slot="content">
    弹出内容
  </template>
</w-popover>
<w-popover position="right" trigger="hover">
  <w-button>右边弹出</w-button>
  <template slot="content">
    弹出内容
  </template>
</w-popover>
​```

# Attributes
|参数| 说明 |  类型  | 可选值 | 默认值 |
| :-------------: |:-------------:| :-----:|:-----:|:-----:|
|position| 设置弹出框相对触发区域的位置 | String |left、right、top、bottom| top
|trigger| 设置触发模式 | String |click、hover|click

更新官网的 README.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
home: true
heroText: 轮子UI
tagline: 一个基于Vue的 UI 组件库
actionText: 快速上手 →
actionLink: /get-started/
features:
- title: 简洁至上
  details: 以简洁易上手为中心思想，以简易的配置帮助你构建项目。
- title: Vue驱动
  details: Vue是一套用于构建用户界面的渐进式JavaScript框架，目前绝大部分前端人员都在使用。
- title: 持续集成
  details: 项目在构建之时坚持给每个组件写测试，并通过 Travis-CI 做了持续集成，保证了项目的高质量。
footer: MIT Licensed | Copyright © 2020-present Derek-Dong
---

更新官网的入门/介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
---
title: 介绍
---

[![Build Status](https://travis-ci.org/Orange-ice/Ice-UI.svg?branch=master)](https://github.com/Derek-Dong/wheels)
![npm](https://img.shields.io/npm/v/ice-vue-ui)

# 介绍

### 开发目的

造轮子其实就是一种学习，这是我在学习Vue过程中开发的一个简单的UI框架，
希望对你有所帮助。

### 基本信息

Ice-UI 是一个基于 Vue 的 UI 组件库，目前包括有 Button、Tabs、Input、Grid、
Layout、Toast、Collapse、Popover 组件。项目尚未完工，持续更新中。

Ice-UI是个人学习过程中造出来的UI库，如果你在使用过程中发现问题，
非常感谢你提出宝贵意见。
PS：目前项目属于开发中，暂不建议在生产项目中使用。

### 作者

- Derek-Dong
- [Github](https://github.com/Derek-Dong/wheels)

更新官网的入门/快速上手

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
---
title:快速上手
---

# 快速上手

### npm 安装

​```bash
npm i --save d-wheels
​```

### 开始使用

1. 添加 CSS 样式

使用本框架前，请确保整个项目的 CSS 开启了 border-box

​```CSS
*,*::before,*::after{box-sizing: border-box;}
​```

IE 8及以上浏览器都支持此样式

2. 引入 wheels

按需引入需要的组件，以达到减小项目体积的目的。

需要注意的是，样式文件要记得引入。

​```js
import {Button, ButtonGroup, Icon} from 'd-wheels'
import 'd-wheels/dist/index.css'

export default {
  name: 'app',
  components: {
    'w-button': Button,
    'w-icon': Icon
  }
}
​```

**完整组件列表和引入方式**

​```js
import Vue from 'vue'
import {
    Button,
    Icon,
    ButtonGroup,
    Input,
    Col,
    Row,
    Layout,
    Header,
    Footer,
    Sider,
    Content,
    Toast,
    plugin,
    Tabs,
    TabsHead,
    TabsBody,
    TabsItem,
    TabsPane,
    Popover,
    Collapse,
    CollapseItem

} from 'd-wheels'

Vue.component('w-button', Button)
Vue.component('w-icon', Icon)
Vue.component('w-button-group', ButtonGroup)
Vue.component('w-input', Input)
Vue.component('w-row',Row)
Vue.component('w-col',Col)
Vue.component('w-layout',Layout)
Vue.component('w-header',Header)
Vue.component('w-sider',Sider)
Vue.component('w-content',Content)
Vue.component('w-footer',Footer)
Vue.use(plugin)                           // toast 组件的使用方法
Vue.component('w-tabs',Tabs)
Vue.component('w-tabs-head',TabsHead)
Vue.component('w-tabs-body',TabsBody)
Vue.component('w-tabs-item',TabsItem)
Vue.component('w-tabs-pane',TabsPane)
Vue.component('w-popover',Popover)
Vue.component('w-collapse',Collapse)
Vue.component('w-collapse-item',CollapseItem)
​```

取消侧边栏折叠

image-20201231143545817

发布到npm

image-20210101124052426

npm publish