@fei_w/vaui NPM

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

vue ui

@everything-registry/sub-chunk-318

1.0.1

3 years ago

1.0.0

3 years ago

0.1.0

3 years ago