hxy-ui

hxy-ui

小小窝

通过vue/cli4封装的ui库

一.UI库组件列表

1. HxyForm

二.组件的参数

1. HxyForm

<hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form>

Props：

hxyFormStyle

类型: Object
必需: false
默认: { width: "200px",height: "100px", }
说明: hxyFormStyle参数可以控制HxyForm组件的样式
参考代码:

<hxy-form :hxyFormStyle="hxyFormStyle"></hxy-form>

  data() {
    return {
      hxyFormStyle: {
        width: "300px",
        height: "100px",
        backgroundColor: "red",
      },
    };
  },

Events

hxyFormSub

参数: date
返回参数是一个Object,里面包含user与password
user:表单填写的用户名
password:表单填写的密码

参考代码:

<template>
  <div id="app">
    <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form>
  </div>
</template>

<script>
//局部引用 => 按需引用
 import { HxyForm } from 'hxy-ui'  
 import "hxy-ui/lib/hxy-ui.css";
export default {
  name: "App",
  components: {
    HxyForm
  },
  data() {
    return {
      hxyFormStyle: {
        width: "300px",
        height: "100px",
      },
    };
  },
  methods:{
    hxyFormSub(date){
      alert(date.user)
      alert(date.password)
    }
  }
};
</script>

展示效果

三、ui库安装使用

下载

npm install -s hxy-ui

全局注册组件

 //main.js
 import hxyui from "hxy-ui"; 
 // 导入默认样式
 import "hxy-ui/lib/hxy-ui.css";
 Vue.use(hxyui);

使用组件

在组件中直接使用

 <!-- App.vue-->
  <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form>

demo:

<template>
 <div id="app">
   <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form>
 </div>
</template>

<script>
//  import { HxyForm } from 'hxy-ui'  
//  import "hxy-ui/lib/hxy-ui.css";
export default {
 name: "App",
 components: {
   // HxyForm
 },
 data() {
   return {
     hxyFormStyle: {
       width: "500px",
       height: "100px",
     },
   };
 },
 methods:{
   hxyFormSub(data){
     alert(data.user)
     alert(data.password)
   }
 }
};
</script>

<style >
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

局部注册组件/按需注册(HxyForm为例子)

在组件中按需注册HxyFrom组件
导入

 //App.vue
 import { HxyForm } from 'hxy-ui'  
 // 导入默认样式
 import "hxy-ui/lib/hxy-ui.css";

注册

 components: {
    HxyForm
  },

使用

  <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form>

demo:

<template>
 <div id="app">
   <hxy-form :hxyFormStyle="hxyFormStyle" @hxyFormSub="hxyFormSub"></hxy-form>
 </div>
</template>

<script>
//局部引用 => 按需引用
import { HxyForm } from 'hxy-ui'  
import "hxy-ui/lib/hxy-ui.css";
export default {
 name: "App",
 components: {
   HxyForm
 },
 data() {
   return {
     hxyFormStyle: {
       width: "500px",
       height: "100px",
     },
   };
 },
 methods:{
   hxyFormSub(data){
     alert(data.user)
     alert(data.password)
   }
 }
};
</script>

<style >
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>