harderkai_ui v0.3.1

效果演示

• 初始化vue项目

vue create demo

• 安装组件库

npm install harderkai_ui

• 全局导入

import ItcastUI from 'harderkai_ui'
import 'harderkai_ui/lib/harderkai_ui.css'

Vue.use(ItcastUI)

• 使用组件

<template>
  <div id="app">
    <my-button type="success" @click="visible=true">显示登录框</my-button>
    <my-dialog title="用户登录" :visible.sync="visible" width="30%">
      <my-form :model="model" label-width="80px">
        <my-form-item label="用户名">
          <my-input v-model="model.username" placeholder="请输入用户名" clearable></my-input>
        </my-form-item>
        <my-form-item label="用户密码">
          <my-input v-model="model.password" placeholder="请输入用户密码" show-password></my-input>
        </my-form-item>
        <my-form-item label="即时配送">
          <my-switch v-model="model.soon" active-color="green" inactive-color="red"></my-switch>
        </my-form-item>
        <my-form-item label="爱好">
          <my-checkbox-group v-model="model.hobby">
            <my-checkbox label="篮球"></my-checkbox>
            <my-checkbox label="足球"></my-checkbox>
            <my-checkbox label="乒乓球"></my-checkbox>
          </my-checkbox-group>
        </my-form-item>
        <my-form-item label="性别">
          <my-radio-group v-model="model.gender">
            <my-radio label="1">男</my-radio>
            <my-radio label="0">女</my-radio>
          </my-radio-group>
        </my-form-item>
      </my-form>
      <template v-slot:footer>
        <my-button type="primary" @click="login">登录</my-button>
        <my-button @click="visible=false">取消</my-button>
      </template>
    </my-dialog>
  </div>
</template>

my-button组件

参数支持

事件支持

my-dialog组件

参数支持

事件支持

插槽说明

my-input组件

参数支持

事件支持

my-switch组件

参数支持

事件支持

my-radio组件

参数支持

my-radio-group组件

参数支持

my-checkbox

参数支持

my-checkbox-group组件

参数支持

my-form组件

参数支持

my-form-item组件

参数支持