buUI - 一个Vue UI 组件
作者:大补
安装
注册 npmjs
发布一个 npm 包
你可以通过
npm install --save buui
使用本框架前,请在CSS中开启 border-box
*{box-sizing: border-box;}
Button 组件
按钮组件 Button.vue 单文件组件。
<template>
<button class="g-button">按钮</button>
</template>
<script>
export default {};
</script>
<style lang="scss">
.g-button {
font-size: var(--font-size);
height: var(--button-height);
padding: 0 1em;
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
background: var(--button-bg);
&:hover {
border-color: var(--border-color-hover);
}
&:active {
background-color: var(--button-active-bg);
}
&:focus {
outline: none;
}
}
</style>
新建一个app.js
import Vue from 'vue';
import Button from './button.vue';
Vue.component('g-button', Button) //全局组件
new Vue({
el: '#app',
})
新建一个index.html 引入 app.js 文件
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--button-height: 32px;
--font-size: 14px;
--button-bg: white;
--button-active-bg: #eee;
--border-radius: 4px;
--color: #333;
--border-color: #999;
--border-color-hover: #666;
}
</style>
<style>
#app {
margin: 20px;
}
</style>
<body>
<div id="app">
<g-button></g-button>
</div>
</body>
<script src="./src/app.js"></script>
</html>
添加Icon.vue
- 添加 iconfont 添加一些 icon ,通过 props 接收设置 icon 图标的属性值 ,icon-position (left | right) 设置 icon 的位置
使用方法:<g-button icon="settings">按钮</g-button> <g-button icon="right" icon-position="right">按钮</g-button>
添加ButtonGroup.vue
- 其作用是将两个按钮合并成一个
使用方法:
<g-button-group>
<g-button icon="left">按钮</g-button>
<g-button>更多</g-button>
<g-button icon="right" icon-position="right">按钮</g-button>
</g-button-group>
效果图
input
- 设置input四种状态。
- value 态 可输入
- disabled 态 禁止输入和点击
- readonly 态 可以点击不能修改
- error 态 可以显示一些提示信息
<div class="box">
<g-input value="张三" @change="inputChange"></g-input>
<g-input value="李四" readonly></g-input>
<g-input value="王五" disabled></g-input>
</div>
<div class="box">
<g-input value="王五" error="姓名不能少于两个字"></g-input>
</div>
- 双向绑定
data:{
value: '1'
}
<g-input v-model="value"></g-input>
<div>
value: {{value}}
</div>
通过设置事件实现双向绑定
<input :value="value" @input="$emit('input',$event.target.value)" type="text" >