1.状态面板组件
1.1 引入
import cloudStatusPanel from "../../components/cloudStatusPanel.vue";
1.2 props and methods
props: {
id: "", // 面板状态ID
dataList: { // 数据列表
type: Array,
default: () => {
return [];
},
},
descData: { // 不是列表时的数据展示
default: () => {
return "123";
},
},
typeList: { // 类型数据
type: Array,
default: () => {
return ["调拨申请"];
},
},
type: { // 类型索引
type: Number,
default: 0,
},
statusList: { // 状态数据
type: Array,
default: () => {
return ["申请通过"];
},
},
statusColor: { // 状态颜色数组
type: Array,
default: () => {
return ["red"];
},
},
status: { // 状态索引
type: Number,
default: 0,
},
time: { // 时间
type: String,
default: "2020-06-30 16:35:20",
},
editBtn: false, // 编辑按钮显示
renewalBtn: false, // 续费按钮显示
giveBackBtn: false, // 归还按钮显示
},
methods: { // 都可接收一个参数 id
edit() { // 编辑按钮抛出事件
this.$emit("edit", this.id);
},
renewal() { // 续费按钮抛出事件
this.$emit("renewal", this.id);
},
giveBack() { // 归还按钮抛出事件
this.$emit("giveBack", this.id);
},
},
1.3 插槽
<cloudStatusPanel editBtn renewalBtn giveBackBtn>
<template #content> 123</template>
<template #btn> 456</template>
</cloudStatusPanel>
2.添加资产组件
2.1 引入
import cloudAddBtn from "../../components/cloudAddBtn.vue"
2.2 props
props: {
text: {
type: String,
default: "添加资产",
},
title: { //标题
type: String,
default: "选择资产",
},
isTitle:{ //是否有标题
type:Boolean,
default:true
}
},
3.上传附件组件
图 1 图 2
3.1 引入
import cloudUpload from "../../components/cloudUpload.vue"
3.2 props and methods
props: {
isShow: { // false是图1 true是图2
type: Boolean,
default: false,
},
imgs: { // 图2 要传的图片 不传则会显示暂无
type: String,
default: "",
},
},
//上传的之后 传的事件和上传之后的图片地址
_this.$emit("upload", _this.enclosure);
4.底部确认按钮组件
图1 图2
4.1 引入
import cloudBottomBtn from "../../components/cloudBottomBtn.vue"
4.2 props
props: {
isSolid: { //true是图1 false是图2
type: Boolean,
default: true,
},
btnText: {
type: String,
default: "提交",
},
marginTop:{
type:Number,
default:130
},
marginBottom:{
type:Number,
default:70
}
},
5.头部状态组件
5.1 引入
import cloudHeadStatus from "../../components/cloudHeadStatus.vue"
5.2 props
props:{
text:{ //
type:String,
default:""
},
isRefuse:{ //是否是拒绝的状态
type:Boolean,
default:false
},
color:{ //字体颜色
type:String,
default:"#1A1A1A"
}
}
6.资产块
2.1 导入
import cloudPropertyBlock from "../../components/cloudPropertyBlock.vue";
2.2 props
title: { type: String, default: "ASDA4584GIGO" }, // 标题
frist: { type: String, default: "ASDA4584GIGO" }, // 第一个盒子内容
second: { type: String, default: "ASDA4584GIGO" }, // 第二个盒子内容
count: { type: Number, default: 1 }, // 数量
time: { // 时间
type: String,
default: "2020-11-12 10:02:03",
},
2.3 插槽
<cloudPropertyBlock>
<template #frist> 123</template>
<template #second> 456</template>
</cloudPropertyBlock>
7.底部弹框
7.1引入
import cloundPopup from "../../components/cloundPopup.vue";
<cloundPopup ref="pop">
<view class="pop-box">
<image @click="invited" class="close-img" src="../../static/member/close.png" />
<view class="title"> 邀请成员 </view>
<view class="qrcode" id="qrcode"> </view>
<view class="bottom-btn"> 保存二维码 </view>
</view>
</cloundPopup>
invited() {
this.$refs.pop.cancel();
}
8.备注输入框 textarea
8.1引入
import cloudRemarks from "../../components/cloudRemarks.vue";
8.2 props
props: {
value: {
type: [String, Number],
default: "",
},
title: {
type: String,
default: "备注",
},
placeholder: {
type: String,
default: "请输入备注",
},
isShow: {
type: Boolean,
default: false,
},
remarksText: {
type: String,
default: "暂无",
},
},
8.3双向绑定
<cloudRemarks v-model="value"></cloudRemarks>
9.头部导航栏
9.1引入
import cloudNavBar from "../../components/cloudNavBar.vue";
9.2 props
export default {
props: {
showArrow: {
type: Boolean,
default: true,
},
title: {
type: String,
default: "",
},
bgc: {
type: String,
default: "#ffff",
},
flag: { // 是否自定义导航事件
type: Boolean,
default: true,
},
bottom: { // 显示下底线
type: Boolean,
default: false,
},
},
9.2 handler
navJump() {
if (this.flag) {
uni.navigateBack({});
} else {
this.$emit("jump");
}
},
10 input and select
10.1 引入
import cloudFormlist from "../../components/cloudFormlist.vue";
10.2 props
value: {
type: [String, Number],
default: "",
},
isSelect: {
type: Boolean,
defalut: false,
},
isTagging: "",
placeholder: {
type: String,
default: "请输入",
},
10.3 v-model
<cloudFormlist v-model="value" isTagging> </cloudFormlist>
11 空状态盒子
11.1引入
import cloudFormlist from "../../components/cloudNoneBox.vue";
11.2 props
props: {
width: {
type: Number,
default: 442
},
height: {
type: Number,
default: 347
},
bgc: {
type: String,
default: '#ffff'
}
}
12.有背景颜色的导航栏组件
12.1 引入
import cloudNavAssets from "../../components/cloudNavAssets.vue";
12.2 props
props: {
leftText: {
type: String,
default: "",
},
rightText: {
type: String,
default: "",
},
},
12.3 插槽
<cloud-nav-assets leftText="左边" rightText="右边">
<view slot="left">左边内容</view>
<view slot="right">右边内容</view>
</cloud-nav-assets>
13.下划线导航栏组件
13.1 引入
import cloudNavList from "../../components/cloudNavList.vue"
13.2 props
props: {
leftTitle: {
type: String,
default: "发起申请",
},
rightTitle: {
type: String,
default: "历史申请",
},
},
13.3 插槽
<cloud-nav-list>
<view slot="left">左边内容</view>
<view slot="right">右边内容</view>
</cloud-nav-list>
14.左右两边布局组件
14.1 引入
import orderInfo from "../../components/orderInfo.vue";
注：需要在组件外面设置一个盒子控制两边的边距，因为一期有用到这个组件，所以就没改组件里面的样式
14.2 props
props: {
leftText: { //左边文字
type: String,
defalut: "",
},
rightText: { //右边文字
type: String,
defalut: "",
},
colorStyle: { //右边文字颜色
type: String,
defalut: "#262626",
},
isLast: { //是否是最后一个 (需要在最后一个设置true,去掉下边框)
type: Boolean,
defalut: false,
},
},
15 搜索组件
15.1引入
import cloudSearch from "../../components/cloudSearch.vue";
15.2 props
props: {
value: {
type: [String, Number],
default: "",
},
placeholder: {
type: String,
default: "请输入关键字进行搜索",
},
},
15.3 v-model
<cloudSearch v-model="value"> </cloudSearch>
