hcj-ui v1.0.3

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 | 是否禁用 | 否 |

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>

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>

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>

form 表单

  <hcj-form v-model="formData>
     <hcj-form-item label="输入框">
       <hcj-input></hcj-input>
     </hcj-form-item>
  </hcj-form>

2024-5-9