rabbit-ui-core

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