YUI

Mobile UI elements for Vue 2.0 DEMO

安装

npm i ydjyui -S

使用

import Vue from 'vue'
import YdjyUi from 'ydjyui'
import '../static/css/yui.css'

Vue.use(YdjyUi)

说明

Radio(单选框)

• 单选框基本用法

<y-radio
  v-model="value"
  :options="['选项A', '选项B', '选项C']">
</y-radio>

• 单选框右对齐

<y-radio
  align="right"
  v-model="value"
  :options="['选项A', '选项B', '选项C']">
</y-radio>

• 单选框设置禁用选项

<y-radio
  v-model="value"
  :options="options">
</y-radio>

script部分

return {
  value：'值A',
  options:[{
        label: '被禁用',
        value: '值F',
        disabled: true
      },{
        label: '选项A',
        value: '值A'
      },{
        label: '选项B',
        value: '值B'
      }]
 }

• 单选框带头像组织

<y-radio
  v-model="value"
  align="right"
  :options="options">
 </y-radio>

script部分

return {
  value：'杨国宝',
  options:[{
		label: '杨国宝',
		nature:'一年级/语文',
		value: '杨国宝',
		img:'./images/attend/att-head.png'
	},{
		label: '刘二鹏',
		nature:'一年级/语文',
		value: '刘二鹏',
		img:'./images/attend/att-head.png'
	},{
		label: '张文顺',
		nature:'一年级/语文',
		value: '张文顺',
		img:'./images/attend/att-head.png'
	}]
}

• API

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |:----|:----|:----:|:----:|:----:| |options | 选择项(必填项) | Array | |label | 选项标题 | String | |nature | 选项组织（选填） | String | |img | 选项图片（例如老师头像，选填） | String | |value | 绑定值 | String | |align | 单选框对齐位置 | String | left, right | left |

Check(复选框)

• 复选框基本用法

<y-check
  v-model="value"
  :options="['选项A', '选项B', '选项C']">
</y-check>

• 复选框设置最多选中数

<y-check
  v-model="value"
  :max=2
  :options="['选项A', '选项B', '选项C']">
</y-check>

• 复选框右对齐

<y-check
  v-model="value"
  align="right"
  :options="['选项A', '选项B', '选项C']">
</y-check>

• 复选框设置禁用选项

<y-check
  v-model="value"
  :options="options">
</y-check>

script部分

return {
  value:['值A'],
  options:[{
        label: '被禁用',
        value: '值F',
        disabled: true
      },{
        label: '选项A',
        value: '值A'
      },{
        label: '选项B',
        value: '值B'
      }]
}

• 复选框带头像组织

<y-check
  v-model="value"
  align="right"
  :options="options">
</y-check>

script部分

return {
  value:['杨国宝'],
  options:[{
		label: '杨国宝',
		nature:'一年级/语文',
		value: '杨国宝',
		img:'./images/attend/att-head.png'
	},{
		label: '刘二鹏',
		nature:'一年级/语文',
		value: '刘二鹏',
		img:'./images/attend/att-head.png'
	},{
		label: '张文顺',
		nature:'一年级/语文',
		value: '张文顺',
		img:'./images/attend/att-head.png'
	}]
}

• API

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |:----|:----|:----:|:----:|:----:| |options | 选择项(必填项) | Array | |label | 选项标题 | String | |nature | 选项组织（选填） | String | |img | 选项图片（例如老师头像，选填） | String | |value | 绑定值 | String | |max | 最多可选个数 | String | |align | 单选框对齐位置 | String | left, right | left |

Popover(弹出框)

position 属性指定了 Popover 的位置（position 可选值‘middle’、‘bottom’）。

比如，position 为 'bottom' 时，Popover 会从屏幕下方移入，并最终固定在屏幕下方。

移入/移出的动效会根据 position 的不同而自动改变，无需手动配置。

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 Popover 的显示与隐藏。

• 居中弹出

<y-popover v-model="popupVisible">
	<div class="m-pop-ct-del">
		<p class="f-pad-1-half f-fs-esm">这是居中弹出框，始终显示在屏幕中间</p>
	</div>
</y-popover>

• 底部弹出

title是提示框的标题，仅position的属性为bottom时有效

<y-popover v-model="popoverBottom" v-on:click-event="doSth" title="底部弹出" handle="完成" position="bottom">
  <div class="m-pop-ct-del">
		<p class="f-pad-1-half f-fs-esm">这是底部弹出框，始终显示在屏幕底部</p>
	</div>
</y-popover>

• API

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |:----|:----|:----:|:----:|:----:| |position | 弹出框位置 | String | bottom,middle | middle | |title | 标题，仅限position值为bottom时有效 | String | |handle | 右侧完成按钮，仅限position值为bottom时有效 | String | |v-on:click-event | 底部弹出框时点击“完成”事件，默认事件关闭当前弹出框 | Function |

CDN

• https://969723815.github.io/YUI/static/css/yui.css
• https://969723815.github.io/YUI/components/dist/ydjy-ui.min.js

Development

npm run dev