# hcj-ui

**Repository Path**: yang-gangjian/hcj-ui

## Basic Information

- **Project Name**: hcj-ui
- **Description**: vue环境中简单易用的web UI组件库，丰富的CSS背景墙纸及高度个性化的UI组件，满足朴素页面及个性化建站。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2023-11-01
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: UI, Web, 前端页面, Vue, hcj-ui

## README

# :triangular_flag_on_post: hcj-ui :triangular_flag_on_post: 
### :round_pushpin: vue2下一款只专注于您网页界面装饰的UI

###  :white_check_mark: hcj-ui详细文档传送门：[https://www.yorock.top](https://www.yorock.top/)
![hcj-ui](src/img%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250904145149_20_204.png)
### ————————————————————
## 技术
#### 1.vue.js2.0
#### 2.JavaScript
#### 3.Css
### ————————————————————
## 示例
### 1.安装使用
 **hcj-ui目前仅支持vue2环境下使用** 
```
npm install hcj-ui
```
### 2.引入
 **在main.js配置文件中**
```
import hcjui from 'hcj-ui';
Vue.use(hcjui);
```
### 3.使用
## button 按钮
 **任何vue文件template结构中** 
```
// 基本使用
<hcj-button>按钮</hcj-button>
// 类型
<hcj-button type="twinkle">按钮</hcj-button>
// 属性
<hcj-button round type="twinkle">按钮</hcj-button>
```
 **button类型** 
| 类型(type) | 效果   | 是否必填 |
|----------|------|------|
| default  | 默认   | 否    |
| twinkle  | 闪烁   | 否    |
| slide    | 填充   | 否    |
| line     | 边框渐变 | 否    |
| premary  | 主要按钮 | 否    |

 **button属性** 
| 属性       | 描述   | 是否必填 |
|----------|------|------|
| round    | 是否圆角 | 否    |
| disabled | 是否禁用 | 否    |

## switch 开关
```
// 基本使用，v-model传入布尔值，true初始状态为开，false初始状态为关
<hcj-switch v-model="swicth"></hcj-switch>
<script>
    data() {
        return {
            switch: false
        }
    }
</script>
```
 **switch 属性** 
| 属性           | 描述                            | 类型  | 是否必填 |
|---------------|-------------------------------|-----|------|
| v-model | 绑定值，用于判断开关状态                    | 布尔值 | 是    |
| activeColor        | 状态为关的按钮颜色 | 字符串 | 否    | 
| inactiveColor        | 状态为开的按钮颜色 | 字符串 | 否    | 
| inactiveColor        | 状态为开的按钮颜色 | 字符串 | 否    | 
| circleColor        | 内圆按钮颜色 | 字符串 | 否    | 

## background css背景
 **基本使用** 
```
<hcj-background bg="bg1"></hcj-background>
```
**参数**
 bg1至bg24
例：

```
<hcj-background bg="bg2"></hcj-background>
<hcj-background bg="bg3"></hcj-background>
<hcj-background bg="bg4"></hcj-background>
'''
<hcj-background bg="bg24"></hcj-background>
```
## dialog 弹框
 **基本使用** 
 ```
// 触发弹框按钮
<hcj-button @click="visible = true">弹出弹框</hcj-button>
<hcj-dialog :visible.sync="visible"></hcj-dialog>

// js代码需要返回一个参数
<script>
export default {
    data() {
        visible: false,
    }
}
</script>
 ```
**slot插槽使用**
```
 <hcj-dialog :visible.sync="visible">
    <template v-slot:title>
        温馨提示（标题）
    </template>
    <div>
        内容
    </div>
    <template v-slot:footer>
        <hcj-button  type="premary" @click="visible = false">确定</hcj-button>
        <hcj-button type="line" @click="visible = false">取消</hcj-button>
    </template>
 </hcj-dialog>
``` 
**参数**
| 参数            | 描述                            | 类型  | 是否必填 |
|---------------|-------------------------------|-----|------|
| :visible.sync | 用于判断弹框是否弹出                    | 布尔值 | 是    |
| v-slot        | 用于修改弹框区域，title标题区域，footer按钮区域 | 字符串 | 是    |
## radio 单选框
**单独使用**
```
 <hcj-radio label="1" v-model="option">选项1</hcj-radio>
 <hcj-radio label="2" v-model="option">选项2</hcj-radio>
<script>
  data() { return: {option:1} }
<script>
```
**选项组**
```
 <hcj-radio-group v-model="optionGroup">
    <hcj-radio label="3">选项1</hcj-radio>
    <hcj-radio label="4">选项2</hcj-radio>
 </hcj-radio-group>
 <script>
   data() { return: {optionGroup:1} }
 <script>
```
| 参数      | 描述  | 是否必填 |
|---------|-----|------|
| v-model | 绑定值 | 是    |

## checkbox 复选框
**单独使用**
```
  <hcj-checkbox label="复选框1" v-model="checkboxClick"></hcj-checkbox>
 <script>
   data() { return: { checkboxClick: false, } }
 <script>
```
**组合使用**
```
<hcj-checkbox-group v-model="hobby">
   <hcj-checkbox label="唱"></hcj-checkbox>
   <hcj-checkbox label="跳"></hcj-checkbox>
   <hcj-checkbox label="rap"></hcj-checkbox>
   <hcj-checkbox label="篮球"></hcj-checkbox>
</hcj-checkbox-group>
 <script>
   data() { return: { hobby: ['唱','跳'] } }
 <script>
```
| 参数      | 描述  | 是否必填 |
|---------|-----|------|
| v-model | 绑定值 | 是    |

## input 输入框
```
   <div style="width: 180px;float: left;margin: 10px 10px;">
      <hcj-input
      disabled
      placeholder="请输入内容" type="password"></hcj-input>
      <hcj-input
      clear-input
      style="margin-top: 10px;" 
      placeholder="请输入内容" 
      v-model="intText"></hcj-input>
      <hcj-input 
      type="text"
      placeholder="请输入密码"
      show-password
      style="margin-top: 10px;"
      v-model="intText"></hcj-input>
   </div>
```
| 参数          | 描述 | 类型 | 是否必填 |
|-------------|----|----|------|
| placeholder |  输入框提示  |  string  |   否   |
| type        |  输入框类型  |  string  |   否   |
| disabled    |  是否禁用  |  boolean  |   否   |
| clear-input |  是否显示清空按钮  |  boolean  |   否   |
| show-password | 是否显示明文密码按钮   |  boolean  |   否   |
| v-model |  数据绑定  |  string  |   是   |

**form 表单**
```
  <hcj-form v-model="formData>
     <hcj-form-item label="输入框">
       <hcj-input></hcj-input>
     </hcj-form-item>
  </hcj-form>
```
## drawer 抽屉
**常规使用：通过事件改变自定义visible值控制抽屉的显示与隐藏，该值类型为Boolean**
```
<hcj-button @click="visible = true">点击</hcj-button<
<hcj-drawer :visible.sync="visible"></hcj-drawer>
//js代码需要返回一个参数
<script>
    export default {
        data() {
            visible: false,
        }
    }
</script>
```
**通过template的v-slot插槽语法，可在对应插槽内更改标题Boolean**
```
<hcj-button @click="visible = true">点击</hcj-button>
<hcj-drawer :visible.sync="visible1">
    <template v-slot:title>修改的标题</template>
    <div>
        叮叮当当！我来辽！
    </div>
</hcj-drawer>

//js代码需要返回一个参数
<script>
    export default {
        data() {
            visible1: false,
        }
    }
</script>
```
**通过属性place修改抽屉弹窗的位置，left左边，righ右边。默认为左边，该值类型为String**
```
<hcj-button @click="visible2 = true">左边</hcj-button>
<hcj-button @click="visible3 = true">右边</hcj-button>
<hcj-drawer :visible.sync="visible2" place="left"></hcj-drawer>
<hcj-drawer :visible.sync="visible3" place="right"></hcj-drawer>

//js代码
<script>
    export default {
        data() {
            visible2: false,
            visible3: false,
        }
    }
</script>
```
| 属性          | 值 | 类型 | 是否必填 |
|-------------|----|----|------|
| :visible.sync |  true/false  |  boolean  |   是   |
| v-slot        |  title  |  string  |   否   |

## message 消息提示
**通过修改属性type更换提示类型，success成功，error失败，不填则默认基础类型。该值类型为String**
```
<hcj-button @click="MessageType()">成功</hcj-button>
</hcj-drawer>

//js代码需要返回一个参数
<script>
export default {
        methods: {
            MessageType() {
                this.$Mess({
                    message: '这是成功提示！',
                    type: 'success'
                })
            }
        }
    }
</script>
```
**通过属性place修改消息提示的位置，left左边，righ右边。默认为中间，该值类型为String**
```
<hcj-button @click="MessageAlgin('left')">左边</hcj-button>
<hcj-button @click="MessageAlgin('right')">右边</hcj-button>
//js代码
<script>
export default {
        methods: {
            MessageAlgin(algin) {
                this.$Mess({
                    message: algin == 'left' ? '这是左边提示！' : '这是右边提示！',
                    type: algin == 'left' ? 'success' : 'error',
                    place: algin
                })
            }
        }
    }
</script>
```
| 属性          | 值 | 类型 | 是否必填 |
|-------------|----|----|------|
| message |  string  |  string  |   否   |
| type        |  success/error  |  string  |   否   |
| place        |  left/right  |  string  |   否   |

2025-9-4 更新阅读文档