uni-app之自定义组件
2020-09-21 本文已影响0人
Cute_小肥鸡
一、新建组件
1、在项目“component文件夹”存放公共组件
图1
2、绑定组件
- 2-1、页面：在新建组件中，需要给“<template></template>”绑定组件名称，如：GrowUpClass
<template name="GrowUpClass">
<view>
<view class="cu-modal drawer-modal justify-end" :class="isShowModal?'show':''">
<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]"
style="min-width:100%;background-color:#F1F1F1;">
<view style="overflow-y: auto;height: 92%;">
<view class="cu-list menu text-left margin-top">
<view class="cu-item" v-for="(CL_item,CL_index) in ClassList" :key="CL_index" :data-id="CL_item.FClassID">
<view class="content">
<checkbox-group class="block fl margin-right-sm" @change="selClassChange" :value="CL_item.FClassID" :data-index="CL_index">
<checkbox :class="selClassIDList.indexOf(CL_item.FClassID)!==-1?'checked':''" :checked="selClassIDList.indexOf(CL_item.FClassID)!==-1?true:false"></checkbox>
</checkbox-group>
<view class="padding-top-xs">{{ CL_item.FClassName }}</view>
</view>
</view>
</view>
<view class="cu-tabbar-height"></view>
</view>
<view class="cu-bar foot tabbar bg-white" style="border-top:none">
<view v-if="selClassList.length>0">
<text class="cuIcon-back padding-left text-gray" @click="hideTabModal"></text>
<text class="text-my-color padding-left-xs" @click="clickShowSelClass" data-target="showSelClassModal">
<text class="text-my-color">已选择：</text>
<text class="text-my-color">{{ selClassList.length }}个<text class="padding-left-xs text-my-color cuIcon-fold"></text></text>
</text>
</view>
<view v-else>
<text class="cuIcon-back padding-left text-gray" @click="hideTabModal"></text>
<text class="text-my-color padding-left-xs">已选择：</text>
</view>
<view class="text-right padding-right" v-if="selClassList.length>0" @click="clickSelClassOKBtn">
<button class="cu-btn my-bg">确定</button>
</view>
<view class="text-right padding-right" v-else>
<button class="cu-btn my-bg" disabled="disabled">确定</button>
</view>
</view>
</view>
</view>
<!-- 已选择班级的模态框 -->
<view class="cu-modal drawer-modal justify-end" :class="showSelClassModalName=='showSelClassModal'?'show':''">
<view class="cu-dialog basis-lg bg-white" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]"
style="min-width:100%;background-color:#F1F1F1;">
<view class="cu-list menu text-left margin-top">
<view class="cu-item" v-for="(so_Item,so_Index) in selClassList" :key="so_Index">
<view class="content">
<view class="padding-top-xs fl">{{ so_Item.cName }}</view>
<view class="cuIcon-roundclose padding-top-xs fr text-gray" :data-index="so_Index" @click="clickDelSelClass"></view>
</view>
</view>
</view>
<!-- 返回 -->
<view class="cu-bar foot tabbar bg-white" style="border-top:none">
<view>
<text class="cuIcon-back padding-left text-gray" @click="hideShowSelClassModal"></text>
<text class="text-my-color padding-left-xs">已选择数量：{{selClassList.length}}</text>
</view>
<view class="text-right padding-right" v-if="selClassList.length>0" @click="hideShowSelClassModal">
<button class="cu-btn my-bg">确定</button>
</view>
</view>
</view>
</view>
</view>
</template>
- 2-2、JS：在新建组件中，需要在
export default中声明方法，然后在props定义需要外界传入的参数，在watch定义变量 或者 加载默认数据
<script>
export default {
name: "GrowUpClass",
data() {
return {
isShowModal: false,
CustomBar: 0,
showSelClassModalName: null, //已选择班级的模态框
selClassList: [], //已选择班级的班级信息列表
selClassIDList: [], //已选择班级的班级ID列表
ClassList: [], //班级列表
hasClassList: 0 //班级是否有数据
};
},
props: { //此处定义传入的参数
isShow: {
type: Boolean
},
param: {
type: Array
}
},
watch: {
isShow(param) {
if (param) {
this.isShowModal = true;
} else {
this.isShowModal = false;
}
},
param(param) {
if (param) {
var token_1 = param[0].token; //机构ID
this.getSClassList(token_1); //页面一打开，就加载数据
}
}
},
methods: {
getSClassList(currentToken) { /////////////////////////////////////////////////////////////////页面默认数据
uni.request({
url: getApp().globalData.ehhost + '/api/Classes/getClassList',
method: 'POST',
header: {
"content-type": "application/x-www-form-urlencoded"
},
data: {
'token': currentToken
},
success: (res) => {
if (res.statusCode == 200) {
this.ClassList = res.data.resData;
if (this.ClassList.length > 0) {
this.hasClassList = 2;
} else {
this.hasClassList = 1;
}
} else {
this.hasClassList = 1;
}
}
})
},
selClassChange(e) { /////////////////////////////////////////////////////////////////点击“checkbox框”
let index = e.currentTarget.dataset.index;
let cbVal = e.detail.value; //用于判断是否选中checkbox
let cid = this.ClassList[index].FClassID; //班级ID
let cName = this.ClassList[index].FClassName; //班级名称
//获取“班级ID”，根据班级ID判断是否有值（有的话=>给选中效果，没有的话=>取消选中效果）
//this.$set更新数组的同时，更新视图
if (cbVal.length > 0) {
//将班级id、班级名称等组成数组
this.selClassList.push({
'cID': cid,
'cName': cName
});
//将班级id组成数组，用于判断“点击父级后，子级的班级是否选中”
this.selClassIDList.push(cid);
} else {
//删除“已选择班级”的数据 -- 没有勾选“班级”的话，删除数组中对应的班级
for (let i_3 = 0; i_3 < this.selClassList.length; i_3++) {
if (this.selClassList[i_3]["cID"] == cid) {
this.selClassList.splice(i_3, 1);
}
}
for (let i_4 = 0; i_4 < this.selClassIDList.length; i_4++) {
if (this.selClassIDList[i_4] == cid) {
this.selClassIDList.splice(i_4, 1);
}
}
}
},
clickShowSelClass(e) { /////////////////////////////////////////////////////////////////打开“已选择班级”的模态框
this.showSelClassModalName = e.currentTarget.dataset.target;
},
hideShowSelClassModal(e) {
this.showSelClassModalName = null;
},
clickDelSelClass(e) { /////////////////////////////////////////////////////////////////打开“已选择班级”的模态框 -- 删除某班级
let index = e.currentTarget.dataset.index;
this.selClassList.splice(index, 1);
this.selClassIDList.splice(index, 1);
},
hideTabModal(e) { /////////////////////////////////////////////////////////////////关闭当前模态框，回到具体页面（子组件通知父组件关闭当前模态框）
this.$emit('isClose', false);
},
clickSelClassOKBtn() { /////////////////////////////////////////////////////////////////确认按钮
var currentOID_1 = this.currentOID;
var currentType_1 = this.currentType;
var selClassList_1 = this.selClassList;
var selClassIDList_1 = this.selClassIDList;
this.$emit('isClose', false); //返回“关闭”组件
this.$emit('selClassList', selClassList_1); //返回“班级ID、班级名称”组成的数组
this.$emit('selClassIDList', selClassIDList_1); //返回“班级ID”组成的数组
}
}
}
</script>
注意：this.$emit()将组件的值传递给视图模板
this.$emit('isClose', false); //返回“关闭”组件
this.$emit('selClassList', selClassList_1); //返回“班级ID、班级名称”组成的数组
this.$emit('selClassIDList', selClassIDList_1); //返回“班级ID”组成的数组
二、使用组件
1、引用组件
import 组件名称 from "../../components/组件名.vue";
2、注册组件
export default{
components:{
组件名称
},
}
3、在视图模板中使用组件
<组件名称 组件属性="对应的值"></组件名称>
可以自定义
:isShow="isShowClass"视图模板中，打开组件
:param="cParamList"视图模板中，需要传入组件的参数
@isClose="closeClassModal"从组件返回数据，通知视图模板
@selClassList="rSelClassList"从组件返回“班级ID、班级名称”组成的数组，通知视图模板
@selClassIDList="rSelClassIDList"从组件返回“班级ID”组成的数组，通知视图模板
4、实例
//第1点（引用组件）和第2点（注册组件）
<script>
import GrowUpClass from "../../../components/choice/GrowUpClass.vue";
export default {
components: {
GrowUpClass
},
data() {
return {
isClickClass: 0, //判断是否点击了“接收班级”（0没有点击，1已经点击）
isShowClass: false, //是否显示“接收班级”的模态框
cParamList: [], //“接收班级”的模态框 -- 给自定义组件传递参数
};
},
methods: {
///////////////////////////////////////////////////////////////////////////////1、选择班级
clickSelectClass() {
if (this.isShowClass) {
this.isShowClass = false;
} else {
this.isShowClass = true;
this.cParamList = [{
'token': wx.getStorageSync('access_token')
}];
this.isClickClass = 1;
}
},
closeClassModal(data) {
if (!data) {
this.isShowClass = false;
this.isClickClass = 0;
}
},
rSelClassList(data) {
this.isShowClass = false;
this.isClickClass = 0;
this.prSelClassList = data;
console.log(this.prSelClassList);
},
rSelClassIDList(data) {
this.isShowClass = false;
this.isClickClass = 0;
this.prSelClassIDList = data;
console.log(this.prSelClassIDList);
},
}
}
</script>
//第3点（在视图模板中使用组件）
<template>
<view>
<view v-if="isClickClass==0">
<view class="cu-form-group align-start margin-top">
<view class="title">发布内容：</view>
<textarea maxlength="-1" placeholder="为这次成长记录说点什么吧" :value="publishContentVal" @input="publishContentInput"></textarea>
</view>
<view class="cu-form-group margin-top">
<view class="title">接收班级：</view>
<view class="text-black" v-if="currentPType=='class'">
<text>{{ currentCName }}</text>
</view>
<view class="text-black" @click="clickSelectClass" v-else-if="currentPType=='own'">
<text>请选择</text>
<text class="padding-left-xs text-xl text-grey"><text class="cuIcon-right"></text></text>
</view>
</view>
<view class="cu-form-group margin-top">
<view class="title">发布类型：</view>
<picker :value="publishTypeIndex" :range="publishTypeList" @change="pTypeChange">
<view class="picker">{{ publishTypeList[publishTypeIndex] }}</view>
</picker>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action text-black">图片上传：</view>
<view class="action">{{ imgPathList.length }} / 7</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgPathList" :key="index" @tap="ViewImage" :data-url="imgPathList[index]">
<image :src="imgPathList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgPathList.length<7">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-bar tabbar bg-white foot" @click="publishRecordOK">
<view class="action">
<text class="text-my-color text-lg">立即发布</text>
</view>
</view>
</view>
<!-- 选择班级 -->
<GrowUpClass ref="GrowUpClass" :isShow="isShowClass" :param="cParamList" @isClose="closeClassModal" @selClassList="rSelClassList"
@selClassIDList="rSelClassIDList"></GrowUpClass>
</view>
</template>
