# rabbit-ui-core

Latest version **1.0.6** (published 2022-03-28) · 0 weekly downloads

## Install

```sh
npm install rabbit-ui-core
pnpm add rabbit-ui-core
yarn add rabbit-ui-core
bun add rabbit-ui-core
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2022-03-28 |
| First published | 2022-03-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 277.5 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | 猫爷 |
| Maintainers | lamphc |
| Keywords | vue3, hooks, ui |

## Links

- npm: https://www.npmjs.com/package/rabbit-ui-core
- npm.io page: https://npm.io/package/rabbit-ui-core

## Dependencies (8)

- [vue](https://npm.io/package/vue.md) ^3.2.13
- [vuex](https://npm.io/package/vuex.md) ^4.0.0
- [axios](https://npm.io/package/axios.md) ^0.26.1
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.0
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [vue-router](https://npm.io/package/vue-router.md) ^4.0.3
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^8.1.2
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2022-03-28
- 1.0.5 — 2022-03-28
- 1.0.4 — 2022-03-28
- 1.0.3 — 2022-03-24
- 1.0.2 — 2022-03-22
- 1.0.1 — 2022-03-21
- 1.0.0 — 2022-03-21

## README

# rabbit-ui-core

<p align="left">
  <a href="https://v3.cn.vuejs.org/">
    <img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg" alt="vue">
  </a>
  <a href="https://vueuse.org/">
    <img src="https://img.shields.io/static/v1?label=hook&message=@vueuse/core&color=blueviolet" alt="@vueuse/core">
  </a>
</p>

## install

```
npm i rabbit-ui-core
```

## useage

`public/index.html`

```
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
```

`main.js`

```
import RabbitUi from 'rabbit-ui-core'
import 'rabbit-ui-core/dist/rabbit-ui.css'

createApp(App).use(RabbitUi).mount('#app')
```

## componets/hooks demo

### XtxButton

```
/**
  type: default(默认) | primary | help | plain | gray
  size: large | middle(默认) | small | mini
  */
  <XtxButton type="primary">msg</XtxButton>
```

### XtxBread & XtxBreadItem

```
  <XtxBread separator="😄">
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <XtxBreadItem>
      {{ 分类 }}
    </XtxBreadItem>
    <XtxBreadItem>
      {{ 海鲜 }}
    </XtxBreadItem>
  </XtxBread>
```

### XtxSlider

```
  <XtxSlider :data="imgList" autoPlay />
```

### XtxCheckbox

```
  <XtxCheckbox v-model="check" />

  import { ref } from 'vue'
  setup () {
    const check = ref(false)
    return {check}
  }
```

### XtxCity

```
  <XtxCity :data="cityList" />
```

```
  import { onMounted, ref } from 'vue'
  import axios from 'axios'

  setup () {
    const cityList = ref([])
    onMounted(async () => {
      const { data } = await axios({ url: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json' })
      cityList.value = data
    })
  }
```

### XtxGoodViewer

```
  <XtxGoodViewer :imageList="goods.mainPictures" />
```

### msg

```
  import { msg } from 'rabbit-ui-core'

  /**
  * type: warn(默认) 警告  error 错误  success 成功
  * text: 内容
  * time: 2000 关闭时间
  */
  msg({ text: 'hi rabbit-core-ui!' })
```

### XtxConfirm

```
  import { XtxConfirm } from 'rabbit-ui-core'

  XtxConfirm({ title: '警告', text: '确认退出吗？' })
  .then(() => console.log('确定'))
  .catch(() => console.log('取消'))
```

### useCountDown

```
  import { useCountDown } from 'rabbit-ui-core'

  setup() {
    const { countTimeText, start } = useCountDown()

    const go = ()=>{
      // 传入秒数，开始倒计时
      start(1800)
    }
    // 分秒显示
    return {countTimeText}
  }
```

## sponsor

<p align="left">
  <a href="https://gitee.com/heima-class">
     <img src="https://img.shields.io/static/v1?label=gitee&message=sponsor&color=blueviolet" alt="sponsor">
  </a>
    <a href="https://github.com/lamphc">
     <img src="https://img.shields.io/static/v1?label=github&message=sponsor&color=fd1800" alt="sponsor">
  </a>
</p>

---
_Source: https://npm.io/package/rabbit-ui-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._