vaui

第一次发包有点小激动，这是一个根据公司ui的设计习惯，简单封装了这个vue2.X ui组件库，该组件库参考了bootstrap、element和vant，但是还是有很多不完善的地方，希望自己继续学习，继续努力，继续加油吧！！！

安装

yarn add @fei_w/vaui
// 或者
npm install --save @fei_w/vaui

使用

在main.js中

import {
  Icon,
  Cell,
  Avatar,
  Layout,
  DividerLine
} from '@fei_w/vaui/vaui.umd.min.js'
import '@fei_w/vaui/common.css'
import '@fei_w/vaui/vaui.css'

组件

组件的详细参数如下

Avatar

/* 例子 */
<va-avatar circle size="120" avatar="https://picsum.photos/200/200"></va-avatar>

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | avatar | 头像图片链接 | String | - | | circle | 圆形头像 | Boolean | false | | size | 头像尺寸 | String|Number | 40 |

Cell

/* 例子 */
<va-cell
	title="规则"
    content="支持专星送，支持门店购买使用"
    border-bottom
    ></va-cell>
<va-cell
	title="发票"
	content="支持开纸质发票、电子发票"
    ></va-cell>   
 <va-cell
    title="门店"
    content="查看可使用门店"
    value="共九家"
    is-link
    clickable
    ></va-cell>
  <va-cell
      title="须知"
      content="兑换时请提供您的姓名、联系方式、卡券二维码，核
  销后不退"
      ></va-cell>
  <va-cell
     title="须知"
     content="兑换时请提供您的姓名、联系方式、卡券二维码，核
 销后不退"
     titleWidth="44"
     titleHeight="20"
     alignBothEnds
     ></va-cell>

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | title | 左侧title的内容| String | - | | content | 中间的内容 | String | - | | value | 右侧的内容 | String | - | | clickable | 是否开启点击反馈| Boolean | false | | isLink | 显示右侧箭头 | Boolean | false | | alignBothEnds | title两端文字对齐，与titleWidth，titleHeight配合使用 | Boolean | false | | borderBottom | 显示底部1px分割线 | Boolean | false | | titleWidth | 设置title的宽度 | String|Number | - | | titleHeight |设置title的高度 | String|Number | - | | titleStyle | 设置title的style | String|Object | - | | contentStyle |设置content的style | String|Object | - | | valueStyle | 设置value的宽度 | String|Object | - | | name | icon的name，可选值： 'icon-you-copy' | String | icon-you-copy | | iconSize | icon的尺寸 | String|Number | 16 |

插槽 | 参数 | 说明 | | ---- | ---- | | title | 自定义左侧title位置的内容 | | content | 自定义中间content位置的内容 | | icon | 自定义右侧icon位置的内容 |

/* 例子 */

<va-cell
	title="规则"
    border-bottom
    >
    <template #content>
	  我是内容
	</template>
	<template #icon>
	  我是右侧的内容，可以是按钮等
	</template>
</va-cell>

Layout

/*示例*/
<va-layout
      title="华为专卖店"
      titleStyle="font-size:16px;"
    >
      <template #content>
        <va-cell
	       title="规则"
	       content="支持专星送，支持门店购买使用"
	       border-bottom
	       ></va-cell>
      </template>
    </va-layout>

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | title | title | String | - | | titleStyle | title的样式 | String | - | | avatar | 头像/图片链接 | String | String | | statusTitle | 右侧状态区的文案 | String | - | | statusClass | 右侧状态区的class类名 | String | - | | statusStyle | 右侧状态区的样式 | String | - | | layoutStyle | 整个layout外层的样式 | String | - | | layoutClass | 整个layout外层的class | String | - |

DividerLine

分割线

/*示例*/
<va-divider-line />

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | height | 分割线高度 | String|Number | 10 | | bgColor | 分割线颜色| String | #f5f5f5 |

Icon

<va-icon class="text-grey" name="icon-you-copy" :size="iconSize"></va-icon>

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | name | name | String | - | | size | icon大小| String | 16 |