BaseUI

download

npm install BaseUI

install

1. /src/main.js

import BaseUI from 'base-ui'
import 'base-ui/dist/base-ui.css'
Vue.use(BaseUI)

use

<BaseButton type="primary">按钮</BaseButton>

BaseBox

盒子组件

示例代码:

<BaseBox>
  <template #title>标题</template>
  <template>默认插槽</template>
</BaseBox>

说明

| 插槽名 | 说明 | 默认值 | | ------- | -------------------- | ------ | | default | 主体区域 | 无 | | title | 顶部区域，不传递为空 | 标题 |

BaseButton

按钮组件

示例代码:

<BaseButton type="default">默认按钮</BaseButton>
<BaseButton type="success">成功按钮</BaseButton>
<BaseButton type="primary">主要按钮</BaseButton>
<BaseButton type="danger">危险按钮</BaseButton>
<BaseButton type="warning">警告按钮</BaseButton>

说明

| 属性名 | 说明 | 默认值 | 可选值 | | -------- | ------------ | ------- | -------------------------------------- | | type | 配色风格 | default | default/success/primary/danger/warning | | @click | 点击事件 | 无 | - | | 默认插槽 | 支持传递内容 | 按钮 | - |

BaseCheckBox

单选框

示例代码:

<template>
  <BaseCheckBox v-model="checked">内容</BaseCheckBox>
</template>
<script>
  export default {
    data() {
      return {
        checked: false,
      }
    },
  }
</script>

说明

| 属性名 | 说明 | 默认值 | 可选值 | | -------- | ------------------------------------ | ------ | ---------- | | value | 是否选中，支持v-model | false | true/false | | @input | 切换选中状态触发，传出最新选中状态 | - | - | | 默认插槽 | 支持传递内容，会和 checkbox 一起高亮 | - | - |

BaseInput

输入框

示例代码:

<template>
  <BaseInput v-model="info" placeholder="输入文本" type="text" />
  <BaseInput ref="pwi" v-model="password" placeholder="输入密码" type="password" />
</template>
<script>
  export default {
    data() {
      return {
        info: '感觉自己萌萌哒',
        password: '123',
      }
    },
    created() {
      this.$refs.pwi.focus()
    },
  }
</script>

说明

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | | --------- | -------------------------------------------- | -------- | ------ | ------------- | | value | 输入的文本，支持v-model | string | - | - | | @input | 调整输入内容时触发，传出最新的内容 | function | - | - | | type | 输入框的类型 | string | text | text/password | | autofocus | 是否自动获取焦点 | boolean | false | true/false | | focus | 实例方法，获取焦点，通过 this.$refs.xxx.调用 | function | - | - |

BaseInputNum

计数器组件

示例代码:

<template>
  <BaseInputNum v-model="num" />
</template>
<script>
  export default {
    data() {
      return {
        num: 0,
      }
    },
  }
</script>

说明

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | | ------ | ------------------------------ | -------- | ------ | ------ | | value | 数字，支持v-model | number | - | - | | @input | 数字改变时触发，传出最新的内容 | function | - | - |

BaseSwitch

switch 开关

示例代码:

<template>
  <BaseSwitch v-model="isClose" />
</template>
<script>
  export default {
    data() {
      return {
        isClose: false,
      }
    },
  }
</script>

说明

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | | ------ | ---------------------------------- | -------- | ------ | ---------- | | value | 开关状态，支持v-model | boolean | false | true/false | | @input | 开关状态改变时触发，传出最新的状态 | function | - | - |

BaseTabs

tabs 栏

示例代码:

<template>
  <BaseTabs v-model="isClose" :tabs="tabs" />
</template>
<script>
  export default {
    data() {
      return {
        active: 1,
        tabs: [
          {
            value: 1,
            text: '吃饭',
          },
          {
            value: 2,
            text: '睡觉',
          },
        ],
      }
    },
  }
</script>

说明

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | | ------ | ------------------------------------------------------- | -------- | ------ | ------ | | value | 选中值，支持v-model | string | - | - | | @input | 选中值改变时触发，传出最新的值 | function | - | - | | tabs | 列表项{value:xxx,text:xxx}，value:选中值，text:文本 | array | | |

BaseTitle

标题栏

示例代码:

<template>
  <BaseTitle>标题</BaseTitle>
</template>

说明

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | | -------- | ------------ | ---- | ------ | ------ | | 默认插槽 | 支持传入内容 | - | 标题 | - |