hyachin-ui v0.1.1

Hyachin-UI

Teach you how to code by youself（notes updating synchronously...）

https://www.yuque.com/docs/share/4cdc9c90-aac4-48fd-b5f2-28267609aa06?# 《hyachin-ui 搭建指南》

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Use Hyachin-UI

安装组件库

yarn add hyachin-ui

全局导入

import HyachinUI from "hyachin-ui";
import "hyahcin/dist/hyachin-ui.css";
Vue.use(HyachinUI);

Button

Basic usage

<div class="row">
  <!-- type使用 -->
  <hy-button @click="fn">按钮</hy-button>
  <hy-button type="primary">按钮</hy-button>
  <hy-button type="success">按钮</hy-button>
  <hy-button type="info">按钮</hy-button>
  <hy-button type="warning">按钮</hy-button>
  <hy-button type="danger">按钮</hy-button>
</div>
<!-- plain使用 -->
<div class="row">
  <hy-button>按钮</hy-button>
  <hy-button plain type="primary">按钮</hy-button>
</div>
<!-- round使用 -->
<div class="row">
  <hy-button round>按钮</hy-button>
</div>
<!-- icon+circle使用 -->
<div class="row">
  <hy-button round icon="hy-icon-close" circle type="primary"></hy-button>
</div>
<!-- disabled使用 -->
<div class="row">
  <hy-button
    disabled
    round
    icon="hy-icon-close"
    circle
    type="primary"
  ></hy-button>
</div>

Attributes

Events

Dialog

basic use

<template>
  <div id="app">
    <hy-button type="primary" @click="visible = true">显示</hy-button>
    <hy-dialog :visible.sync="visible" title="文字标题">
      <!-- 以下为slot，和title属性二选一 -->
      <!-- <template v-slot:header>
        <h3>自定义标题</h3>
      </template> -->
      内容
      <template v-slot:footer>
        <hy-button @click="visible = false">取消</hy-button>
        <hy-button type="primary" @click="visible = false">确定</hy-button>
      </template>
    </hy-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
      };
    },
  };
</script>

Attributes

Slot

Input

basic use

<template>
  <div id="app">
    <hy-input
      placeholder="请输入用户名"
      type="password"
      name="username"
      disabled
      clearable
      show-password
    ></hy-input>
    <hy-input
      v-model="username"
      type="password"
      showPassword
      @blur="handleBlur"
      @change="handleChange"
      @focus="handleFocus"
    ></hy-input>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        username: "zs",
      };
    },
    methods: {
      handleBlur() {
        console.log("do something when blur");
      },
      handleChange() {
        console.log("do something when change");
      },
      handleFocus() {
        console.log("do something when focus");
      },
    },
  };
</script>
<style lang="scss">
  #app {
    .hy-input {
      width: 200px;
    }
  }
</style>

Attributes

Events

Switch

basic use

<template>
  <div id="app">
    <hy-switch v-model="active" :name="username"></hy-switch>
    <hy-switch
      v-model="active"
      inactiveColor="green"
      activeColor="red"
      @change="handleChange"
    ></hy-switch>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        active: false,
        username: "zs",
      };
    },
    methods: {
      handleChange(val) {
        console.log("do something when change", val);
      },
    },
  };
</script>

Attributes

Events

Radio

basic use

<template>
  <div id="app">
    <hy-radio label="1" v-model="gender">男</hy-radio>
    <hy-radio label="0" v-model="gender">女</hy-radio>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        gender: "1",
      };
    },
    methods: {},
  };
</script>

Attributes

RadioGroup

在 RadioGroup 上写 v-model，可将绑定的值作用于其包裹的所有 radio

basic use

<hy-radio-group v-model="gender">
  <hy-radio label="1">男</hy-radio>
  <hy-radio label="0">女</hy-radio>
</hy-radio-group>

Attributes

Checkbox

basic use

<template>
  <div id="app">
    <hy-checkbox v-model="active">是否选中</hy-checkbox>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        active: true,
      };
    },
  };
</script>

Attributes

CheckboxGroup

basic use

<template>
  <div id="app">
    <hy-checkbox-group v-model="fruits">
      <hy-checkbox label="apple"></hy-checkbox>
      <hy-checkbox label="banana"></hy-checkbox>
      <hy-checkbox label="peach"></hy-checkbox>
    </hy-checkbox-group>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        fruits: ["apple"],
      };
    },
  };
</script>

Attributes

Form&FormItem

basic use

<template>
  <div id="app">
    <hy-form :model="model" label-width="100px">
      <hy-form-item label="用户名">
        <hy-input
          placeholder="请输入用户名"
          v-model="model.username"
        ></hy-input>
      </hy-form-item>
      <hy-form-item label="选择">
        <hy-switch v-model="model.active"></hy-switch>
      </hy-form-item>
    </hy-form>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        model: {
          username: "zs",
          active: true,
        },
      };
    },
  };
</script>

Form Attributes

FormItem Attributes