Xiaozhong-ui NPM

安装组件库
npm install xiaozhong-ui -S
导入组件库
import xiaozhongUI from 'xiaozhong-ui'
注册组件库
Vue.use(xiaozhongUI)

组件

图标 zh-iconfont

先在导入线上项目地址 eg: <link rel="stylesheet" href="//at.alicdn.com/t/font_1233314_umigplitpko.css">

API

Icon 图标

如何使用

<zh-iconfont size="ios-checkmark" />

props

属性	说明	类型	默认值
icon	图标的名称	String
size	图标的大小	Number	18
color	图标的颜色	String	#000

slider 轮播图

如何使用

实例

items: [
        {
          href: 'home',
          src:
            '****.png?width=750&height=320'
        },
        {
          href: 'home',
          src:
            '****.png?width=750&height=320'
        }
      ]

swiperOption: {
          direction: 'vertical',
          slidesPerView: 1,
          spaceBetween: 30,
          mousewheel: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }

input 输入框

如何使用

<zh-input width="100%" alt="请输入密码" placeholder="密码" type="password" />

props

属性	说明	类型	默认值
alt	输入框的占位符	String	'请输入名称'
placeholder	输入框的名称	String	'名称'
type	输入框的类型	String	'text'
width	输入框的宽度	String/Number	'100%'
color	输入框内文字颜色	String	'100%'
focus-color	输入框填写时文字颜色	String	'100%'

button 按钮

如何使用

` <zh-button type="primary" width="80px" height="auto" padding="8px 20px" fontSize="auto" fontColor="#fff"

>button</zh-button>`

props

属性	说明	类型	默认值
type	按钮的类型	String	'primary'
width	按钮的宽度	String	'80px'
height	按钮的高度	String	'auto'
padding	按钮的内边距	String	'8px 20px'
fontSize	按钮文字大小	String	'auto'
fontColor	按钮填文字颜色	String	'#fff'