buUI- 一个Vue UI 组件

最新推荐文章于 2024-09-23 21:39:49 发布

大补bu

最新推荐文章于 2024-09-23 21:39:49 发布

阅读量672

点赞数

分类专栏： buUI- 一个Vue UI 组件文章标签： vue js html javascript css

本文链接：https://blog.csdn.net/qq_31068787/article/details/111193918

版权

buUI- 一个Vue UI 组件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文档介绍了如何创建一个名为buUI的Vue UI组件库，包括Button组件、Icon组件和ButtonGroup组件的详细实现。Button组件提供基本样式，Icon组件允许设置图标及位置，ButtonGroup组件用于组合按钮。此外，还展示了Input组件的多种状态及其双向绑定功能。文章提供了完整的代码示例，帮助读者理解和使用这个组件库。

摘要由CSDN通过智能技术生成

buUI - 一个Vue UI 组件

作者：大补

github地址可以点个 Start。
在线浏览

安装

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四种状态。
1. value 态可输入
2. disabled 态禁止输入和点击
3. readonly 态可以点击不能修改
4. 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"   >

大补bu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录