# gd-ui

**Repository Path**: ligoudana/gd-ui

## Basic Information

- **Project Name**: gd-ui
- **Description**: 一个基于vue的ui组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-18
- **Last Updated**: 2021-08-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# gd-ui

## 简介

一个基于 Vue 2.x 的 UI 组件

## 使用

1. 安装

```
npm i gd-ui-vue
```

2. 全局注册

```js
import GdUI from 'gd-ui-vue/dist/gd-ui-vue.umd.min.js'
Vue.use(GdUI)
```

3. 导入样式

```js
import 'gd-ui-vue/dist/gd-ui-vue.css'
```

<br>

---

<br>

## 组件

### 按钮(gd-button)

<br>

| 属性     | 值               | 描述                                                                 |
| -------- | ---------------- | -------------------------------------------------------------------- |
| type     | String           | 按钮类型：primary,info,success,warning,danger                        |
| plain    | Boolean          | 是否为朴素按钮，默认为 false                                         |
| disabled | Boolean          | 是否禁用按钮，默认为 false                                           |
| round    | Boolean          | 是否为圆角按钮，默认为 false                                         |
| circle   | Boolean          | 是否为圆形按钮，默认为 false                                         |
| icon     | String           | 图标类名，默认为无,可选gd-icon-(search,edit,check,message,star-off,delete)|

<br>

| 事件  | 值       | 描述     |
| ----- | -------- | -------- |
| click | Function | 点击事件 |

<br>

---

<br>

### 对话框(gd-dialog)

<br>

| 属性     | 值      | 描述                               |
| -------- | ------- | ---------------------------------- |
| title    | String  | 对话框头部提示，默认为"提示"       |
| visiable | Boolean | 对话框可见状态，默认为 false       |
| width    | String  | 对话框宽度，默认为 60%             |
| top      | String  | 对话框距离顶部位置，默认为 15vh    |

<br>

| 插槽   | 描述                    |
| ------ | ----------------------- |
| title  | Dialog 标题区的内容     |
| footer | Dialog 按钮操作区的内容 |

<br>

---

<br>

### 输入框(gd-input)

<br>

| 属性         | 值      | 描述                               |
| ------------ | ------- | ---------------------------------- |
| placeholder  | String  | 占位符，默认为空字符串             |
| type         | String  | 表单类型，默认为'text'             |
| name         | String  | 表单命名，默认为空                 |
| value        | String  | 表单值，默认为空字符串             |
| disabled     | Boolean | 是否禁用，默认为 false             |
| clearable    | Boolean | 是否可清空，默认为 false           |
| showPassword | Boolean | 是否显示密码可见，默认为 false     |

<br>

### 切换(gd-switch)

<br>

| 属性          | 值      | 描述                               |
| ------------- | ------- | ---------------------------------- |
| name          | String  | 表单命名，默认为空                 |
| value         | String  | 表单值，默认为空字符串             |
| disabled      | Boolean | 是否禁用，默认为 false             |
| activeColor   | String  | 激活状态颜色，默认为#dcdfe6        |
| inactiveColor | String  | 未激化状态颜色，默认为#dcdfe6      |

<br>

需要先v-model绑定一个Boolean值

<br>

---

<br>

### 单选框(gd-radio)

<br>

| 属性    | 值                        | 描述                               |
| ------- | ------------------------- | ---------------------------------- |
| label   | [String, Number, Boolean] | 单选框 label 值，默认为空字符串    |
| name    | String                    | 表单命名，默认为空                 |
| value   | String                    | 表单值，默认为空字符串             |
| color   | String                    | 单选框选择时的颜色，默认为#409eff  |

<br>

### 单选框组(gd-radio-group)

<br>

用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model

<br>

---

<br>

### 复选框(gd-checkbox)

<br>

| 属性    | 值                        | 描述                               |
| ------- | ------------------------- | ---------------------------------- |
| label   | [String, Number, Boolean] | 单选框 label 值，默认为空字符串    |
| name    | String                    | 表单命名，默认为空                 |
| value   | String                    | 表单值，默认为空字符串             |
| color   | String                    | 单选框选择时的颜色，默认为#409eff  |

<br>

### 复选框组(gd-checkbox-group)

<br>

用于包裹多个 checkbox，通过 v-model 指定组内所有的 checkout 的 v-model

<br>

---

<br>

### 表单项(gd-form-item)

<br>

| 属性  | 值     | 描述                            |
| ----- | ------ | ------------------------------- |
| label | String | 单选框 label 值，默认为空字符串 |

<br>

### 表单(gd-form)

<br>

| 属性        | 值     | 描述                 |
| ----------- | ------ | -------------------- |
| model       | Object | 表单对象，必填       |
| label-width | String | 标签宽度，默认"80px" |

<br>

---

### 评分(gd-rate)

<br>

| 属性        | 值     | 描述                 |
| ----------- | ------ | -------------------- |
| v-model     | Number | 表单值，默认为 0      |
| size        | Number | 定义图标大小         |

---

<br>

### 轮播图(gd-carousel)

<br>

| 属性         | 值      | 描述                                         |
| ------------ | ------- | ------------------------------------------- |
| height       | String  | 轮播图高度，默认 500px                       |
| autoplay     | Boolean | 是否自动切换，默认true                       |
| interval     | Number  | 自动切换的时间间隔，单位为毫秒，默认3000      |
| initial      | Number  | 初始状态激活的幻灯片的索引，从 0 开始         |
| hasDot       | Boolean | 是否显示指示器                               |
| hasDirector  | Boolean | 是否显示切换箭头                             |
| trigger      | String  | 指示器的触发方式，默认hover                  |
| direction    | String  | 走马灯展示的方向，默认为horizontal（vertical）|

<br>

#### 轮播图示例
```js
<template>
  <div id='app'>
    <gd-carousel
      :autoplay='true'
      :interval='3000'
      :initial='1'
      :hasDot='true'
      :hasDirector='true'
      trigger='hover'
      direction='horizontal'
    >
      <gd-carousel-item v-for='(item, index) in 4' :key="index">
        <h1>{{item}}</h1>
      </gd-carousel-item>
    </gd-carousel>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss" scoped>
h1 {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
img {
  width: 100%;
  height: 100%;
}
</style>

```
<br>

### 放大镜(gd-magnifier)

<br>

| 属性         | 值      | 描述                       |
| ------------ | ------- | ---------------------------|
| link         | String  | 跳转连接                   |
| blank        | Boolean | 是否新建窗口,默认true      |
| imgUrl       | String  | 图片地址                   |
| imgAlt       | String  | 图片提示                   |
| imgWidth     | Number  | 图片宽度，默认375          |
| imgHeight    | Number  | 图片高度，默认500          |
| magWidth     | Number  | 放大镜宽度，默认150        |
| magHeight    | Number  | 放大镜高度，默认150        |

<br>

#### 放大镜示例
```js
<template>
  <div id='app'>
    <div class='wrapper'>
      <gd-magnifier
        :link='link'
        :blank='blank'
        :imgUrl='imgUrl'
        :imgAlt='imgAlt'
        :imgWidth='imgWidth'
        :imgHeight='imgHeight'
        :magWidth='magWidth'
        :magHeight='magHeight'
      ></gd-magnifier>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-d502580a8d7df723419a6f9fcbe6f82c_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630418906&t=9451e54741b7fe131ae2bafb5ad60753',
      blank: true,
      link: 'https://www.baidu.com',
      imgWidth: 375,
      imgHeight: 540,
      magWidth: 150,
      magHeight: 150,
      imgAlt: 'jojo'
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 375px; // 540
  margin: 100px auto;
}
</style>

```

<br>
---

<br>

#### dialog 示例
```js
<template>
  <div id='app'>
    <gd-button @click="visible=true">显示dialog</gd-button>
    <gd-dialog title="温馨提示" width='40%' top='25vh' :visible.sync='visible'>
      <gd-form :model='dialogModel'>
        <gd-form-item label='用户名'>
          <gd-input v-model='dialogModel.username' clearable></gd-input>
        </gd-form-item>
        <gd-form-item label='密码'>
          <gd-input v-model='dialogModel.password' type='password' showPassword></gd-input>
        </gd-form-item>
        <gd-form-item label='开关'>
          <gd-switch v-model='dialogModel.switch'></gd-switch>
        </gd-form-item>
        <gd-form-item label='爱好'>
          <gd-checkbox-group v-model="dialogModel.hobby">
            <gd-checkbox label='吃饭'></gd-checkbox>
            <gd-checkbox label='睡觉'></gd-checkbox>
            <gd-checkbox label='打豆豆'></gd-checkbox>
          </gd-checkbox-group>
        </gd-form-item>
        <gd-form-item label='性别'>
          <gd-radio-group v-model="dialogModel.gender">
            <gd-radio label='1'>男</gd-radio>
            <gd-radio label='0'>女</gd-radio>
          </gd-radio-group>
        </gd-form-item>
        <gd-form-item label='评分'>
          <gd-rate v-model='dialogModel.score' :size='25'></gd-rate>
        </gd-form-item>
      </gd-form>
      <template v-slot:footer>
        <gd-button type='primary' @click="visible=false">确定</gd-button>
        <gd-button @click="visible=false">取消</gd-button>
      </template>
    </gd-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogModel: {
        username: '',
        password: '',
        switch: false,
        hobby: [],
        gender: '1',
        score: 0
      },
      visible: false
    }
  }
}
</script>

<style>
#app .gd-input {
  width: 300px
}
</style>

```

<br>