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 | 否 |

2024-11-29 更新阅读文档