Niu_xcx_ci NPM

牛哥的小程序组件库 v1.0.3

查看代码源：https://gitee.com/HnaQian/niu-xcx-ci

安装

npm install -g niu_xcx_ci@latest

示例

$ niu
Usage: niu [options] [command]

Options:
  -V, --version        output the version number
  -h, --help           display help for command

Commands:
  init <projectName>   项目初始化
  add <componentName>  添加组件
  help [command]       display help for command

更新日志

2022-03-24 v1.0.3

添加使用文档

组件库

1、QActionSheet 弹窗组件

该组件作为底层基础组件，可以直接在页面中使用实现简单的弹窗，也可在此基础之上编写一定业务的自定义组件

属性	类型	默认值	必填	说明
isShow	Boolean	False	是	是否展示弹窗
actionType	BOTTOM/CENTER	CENTER	否	展示位置
iscloosebg	Boolean	true	否	点击阴影是否关闭弹窗
zIndex	Number	998	否	弹窗层级
closeModal	eventhandle		否	当关闭弹窗时

actionType=BOTTOM的示例：

{
  "usingComponents": {
    "QActionSheet": "/components/QActionSheet/index"
  }
}

<QActionSheet
  isShow="{{isShowTan}}"
  actionType="BOTTOM"
>
  <view class="test" slot="actionContent">
  </view>
</QActionSheet>

2、QButton 按钮

属性	类型	默认值	必填	说明
width	Number	350	否	宽度（rpx）
plain	boolean	false	否	按钮是否镂空，背景色透明

{
  "usingComponents": {
    "QButton": "/components/QButton/index"
  }
}

<QButton width="{{686}}">确认</QButton>

3、QFormTCI 表单输入组合

包含标题、内容和一个图片/视频

属性	类型	默认值	必填	说明
formdata	eventhandle		否	当数据发生变化的时候都会被调用

{
  "usingComponents": {
    "QFormTCI": "/components/QFormTCI/index"
  }
}

<QFormTCI catch:formdata="formdata"></QFormTCI>

4、QKeyValueList 键值展示列表

属性	类型	默认值	必填	说明
list	Array	[]	是	数据

list：

属性	类型	说明
key	string	左边文案
value	string	右边文案
url	string	如果不为空，会出现向右箭头，点击可以跳转

{
  "usingComponents": {
    "QKeyValueList": "/components/QKeyValueList/index"
  }
}

<QKeyValueList list="{{uinfo}}" />

5、QModal modal弹窗（依赖组件QActionSheet）

属性	类型	默认值	必填	说明
isShow	Boolean	False	是	是否展示弹窗数据
title	string		是	标题
iscloosebg	Boolean	true	否	点击阴影是否关闭弹窗
leftBtn	eventhandle		否	确定
rightBtn	eventhandle		否	取消

{
  "usingComponents": {
    "QModal": "/components/QModal/index"
  }
}

<QModal isShow="{{show}}" title="确定要出去么？" catch:leftBtn="leftBtn" catch:rightBtn="rightBtn" />

6、QNavigationBar 导航栏

属性	类型	默认值	必填	说明
homeUrl	String	/pages/index/index	否	是否展示弹窗数据
mode	BLACK、WHITE	BLACK	否	文字模式（白色、黑色）
title	String		否	标题
customStyle	String		否	自定义背景样式
leftIconType	BACK、EMPTY	BACK	否	左边icon类型（返回，空白）

7、QPage 页面基础组件（依赖组件QNavigationBar）

属性	类型	默认值	必填	说明
navigator	object	null	否	导航栏属性见QNavigationBar的属性，如果为null，则不展示导航栏

8、QSwiper 轮播图

属性	类型	默认值	必填	说明
dataSource	Array	[]	是	数据源
height	number	300	否	高度（rpx）

datasource：

属性	类型	说明
img	string	图片链接
url	string	如果为空，点击不可以跳转

9、QTabs

属性	类型	默认值	必填	说明
tabList	array\<{text:string}>		是	tab数据
current	Number	0	否	默认第几个高亮
type	CENTER、LEFT	CENTER	否	展示类型，居中、居左
changeCurrent	eventhandle		否	切换tab的时候