Base-ui-autumnfish NPM

BaseUI

download

npm install BaseUI

install

/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>

说明

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

UI Vue2 autumnfish

@everything-registry/sub-chunk-1216 @infinitebrahmanuniverse/nolb-base-

1.0.0

2 years ago