petite-vue-ui

petite-vue-ui 一个基于petite-vue的Components能力实现的UI库，帮助开发者快速构建小型项目

引用

petite-vue-ui 同样只需从CDN加载即可：

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  import { pvButton } from 'https://unpkg.com/petite-vue-ui'
  createApp({
    pvButton
  }).mount()
</script>

<span v-scope="pvButton()"></span>

使用 ES module 来构建一个petite-vue-ui项目
使用 v-scope 来使用组件 => v-scope="pvButton()"

传参

petite-vue-ui 使用数据驱动：

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  import { pvButton } from 'https://unpkg.com/petite-vue-ui'
  const pvButtonConfig = {
    slot: 'Love from pv-ui',
    type: 'success',
    border: 'round',
    icon: 'pv-icon-like',
    click: 'pvButtonClick'
  }
  createApp({
    pvButton,
    pvButtonConfig,
    pvButtonClick() {
      console.log(`Love from pv-ui  :\)`)
    }
  }).mount()
</script>

<span v-scope="pvButton(pvButtonConfig)"></span>

pvButton效果

`petite-vue-ui-button`

Button Attributes

参数	说明	类型	可选值	默认值
type	类型	String	primary / success / warning / danger / info	primary
border	边框	String	rect / round / circle	rect
disabled	禁用	Boolean	true / false	false
icon	图标	String	图标详情	——
title	标题	String	——	——

Button Slot

名称	说明
slot	按钮容器内容

Button Events

事件名称	说明	使用
click	当button点击时触发	传入click事件的名称

`petite-vue-ui-dialog`

Dialog Attributes

参数	说明	类型	可选值	默认值
visible	是否显示 Dialog	String	——	'false'
title	Dialog 的标题，也可通过具名 slot （见下表）传入	string	——	'提示'
width	Dialog 的宽度	String	——	30%
top	Dialog CSS 中的 margin-top 值	String	——	15vh
closeOnClickModal	是否可以通过点击 modal 关闭 Dialog	boolean	true / false	true
showClose	是否显示关闭按钮	boolean	——	true

Dialog Slot

名称	说明
titleSlot	Dialog 标题区的内容
bodySlot	Dialog 的内容
footerSlot	Dialog 按钮操作区的内容

Dialog Events

事件名称	说明	使用
close	Dialog 关闭的回调	传入close事件的名称

使用示例

<script type="module">
  import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
  import { pvButton, pvDialog } from 'https://unpkg.com/petite-vue-ui'

  const visible = reactive({
    value: false,
    dialogShow() {
      this.value = true
    }
  })

  const pvButtonConfig = {
    slot: 'open Dialog',
    type: 'primary',
    border: 'round',
    icon: 'pv-icon-respond',
    click: 'visible.dialogShow'
  }

  const pvDialogConfig = {
    visible: 'visible.value',
    bodySlot: 'Hello petite-vue-ui',
    close: 'handleClose'
  }

  const handleClose = () => {
    console.log('Dialog is closed')
  }

  createApp({
    pvButton,
    pvDialog,
    pvButtonConfig,
    pvDialogConfig,
    handleClose,
    visible
  }).mount()
</script>

<span v-scope="pvButton(pvButtonConfig)"></span>
<div v-scope="pvDialog(pvDialogConfig)"></div>

`petite-vue-ui-input`

Input Attributes

参数	说明	类型	可选值	默认值
type	类型	String	text，password 和其他原生 input 的 type 值	text
autofocus	是否自动获取焦点	boolean	true / false	false
Vmodel	v-model 绑定值	string	——	——
placeholder	输入框占位文本	String	——	——
clearable	是否可清空	boolean	true / false	false
disabled	禁用	boolean	true / false	false
icon	输入框头部图标	string	图标详情	——

Input Events

事件名称	说明	使用
blur	在 Input 失去焦点时触发	传入blur事件的名称
focus	在 Input 获得焦点时触发	传入focus事件的名称
change	仅在输入框失去焦点或用户按下回车时触发	传入change事件的名称
input	在 Input 值改变时触发	传入input事件的名称

使用示例

<script type="module">
  import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
  import { pvInput } from 'https://unpkg.com/petite-vue-ui'

const msg = reactive({
  value: 'Love&&Peace'
})

const pvInputConfig = {
  autofocus: true,
  clearable: true,
  placeholder: ':) to you',
  icon: 'pv-icon-search',
  Vmodel: 'msg.value',
  input: 'isInput'
}

const isInput = () => {
  console.log(msg.value)
}

createApp({
  pvInput,
  pvInputConfig,
  msg,
  isInput
}).mount()
</script>

<div v-scope>
  <div v-scope="pvInput(pvInputConfig)"></div>
  <div>inputValue:{{msg.value}}<div>
</div>

Package detail

petite-vue-ui

readme

petite-vue-ui

引用

传参

`petite-vue-ui-button`

Button Attributes

Button Slot

Button Events

`petite-vue-ui-dialog`

Dialog Attributes

Dialog Slot

Dialog Events

使用示例

`petite-vue-ui-input`

Input Attributes

Input Events

使用示例