uniapp分装 uview1.0x 中的多组件的分装

多组件的分装"/>

uniapp分装 uview1.0x 中的多组件的分装

u-picker 封装

u-radio 分装

u-select 分装

正在加载中 分装

u-picker 封装

uniapp分装 uview1.0x 中的 u-checkbox

<!-- 日期选择器  专注于时间和地区的选择-->
<!-- 只支持 年月日时分秒 按顺序排列 -->
<!-- 不回显原因：在页面的data中 写上你绑定的对应的属性~~~~~否则监听不到回显~~~~~ -->
<!-- 不回显原因：修改页面  不能直接 this.form = data[0],这样监听响应失效~~~~~ -->
<template><view style="width: 100%"><u-input :disabled="disabled" :input-align="align" :placeholder="`请选择 ${placeholder}`" v-model="valueLable" type="select" :select-open="show" @click="disabled? '' : show = true" :border="border" /><u-picker :mode="mode" v-model="show" :params="params" @cancel="cancel" @confirm="confirm" :safe-area-inset-bottom="safebottom" /></view>
</template><script>export default {name: "fs-picker",props: {placeholder: { type: String, default: '' }, // 提示mode: { type: String, default: 'time' }, // 模式 time、region 时间、地区valueformat: { type: String, default: 'yyyy-MM-dd HH:mm:ss' }, //选中的值，valuelabelformat: { type: String, default: 'yyyy-MM-dd' },border: { type: Boolean, required: false }, // 是否显示边框value: { type: String, default: '' },align: { type: String, default: 'right' },safebottom: { type: Boolean, default: true }, //底部安全区域disabled:{type:Boolean, default: false},// 禁用全部},data() {return {show: false, //控制显隐valueLable: '', //当前展示的值currentValue: '',//当前展示的 keyvalueLabelArr: [],//当前拆分的 值 [yyyy，MM，dd，HH，mm，ss]valueArr: [],//当前拆分的 值 [2002，01，03，24，59，59]params: { year: false, month: false, day: false, hour: false, minute: false, second: false, }, //时间模式obj: { 'yyyy': 'year', 'MM': 'month', 'dd': 'day', 'HH': 'hour', 'mm': 'minute', 'ss': 'second' },};},mounted() {// 2021-11-18 00:00:00//初始化 下拉框选项this.valueLabelArr = this.paramsFormat(this.valueformat) //[yyyy,dd,zz,hh,ss,hh]let obj = {}this.valueLabelArr.forEach(item => { obj[this.obj[item]] = true })this.params = obj},watch: {// 监听 valuevalue: {handler(newValue, oldValue) {console.log('-fs-picker--','新：',newValue, '旧：',typeof oldValue,oldValue)if(!newValue) returnthis.currentValue = newValuethis.initData(newValue)},immediate: true}},methods: {//初始化数据initData(newValue) {//初始化显示的值let valueLable = this.labelformat //yyyy-MM-dd//拆分 valuethis.valueArr = this.paramsFormat(newValue) //【2022，】this.valueLabelArr = this.paramsFormat(this.valueformat) //[yyyy,dd,zz,hh,ss,hh]console.log(this.valueArr,this.valueLabelArr,'this.valueArr')this.valueLabelArr.forEach((item, index) => {if (valueLable.indexOf(item) != -1) {//yyyy年MM月dd日let reg = new RegExp(item, "i")valueLable = valueLable.replace(reg, this.valueArr[index] || '00')console.log(valueLable,'valueLabel')}})console.log(valueLable,'this.valuelabel')this.valueLable = valueLable},//成功选中confirm(e) {let NYR = [] //年月日let SFM = [] //时分秒this.valueLabelArr = this.paramsFormat(this.valueformat)this.valueLabelArr.forEach((item, index) => {if (item == 'yyyy' || item == 'MM' || item == 'dd') { NYR.push(e[this.obj[item]]) }if (item == 'HH' || item == 'mm' || item == 'ss') { SFM.push(e[this.obj[item]]) }})let NYRstr = ''let SFMstr = ''if (NYR.length) { NYRstr = NYR.join('-') }if (SFM.length) { SFMstr = SFM.join(':') }let value = ''if (NYRstr && SFMstr) {value = NYRstr + ' ' + SFMstr} else if (NYRstr && !SFMstr) {value = NYRstr} else if (!NYRstr && SFMstr) {value = SFMstr}this.$emit('input', value)this.$emit('returnData', { value, oldValue: this.valueLable })console.log('开放方法：returnData：', { value, oldValue: this.valueLable, })},//取消 选择cancel(e) {},//解析日期格式paramsFormat(date) { //yyyy-dd-zz hh:ss:bblet arrFormat = []if (date.indexOf(' ') > 0 && date.indexOf(' ') < date.length - 1) {//有 时 / 时分 / 时分秒let arr = date.split(' ') // ['yyyy-dd-zz', 'hh']| ['yyyy-dd-zz', 'hh:ss'] |['yyyy-dd-zz', 'hh:ss:bb']arrFormat = [...arr[0].split('-'), ...arr[1].split(':')] //[yyyy,MM,dd,zz,hh,ss,hh]} else {arrFormat = date.split('-') //[yyyy,MM,dd]}return arrFormat}}}
</script><style lang="scss" scoped></style>

使用

<fs-picker v-model="form.JSSJ" placeholder="结束时间" labelformat="yyyy-MM-dd HH:mm:ss"></fs-picker>

u-radio 分装

<!-- 单选组件分装 -->
<template><view><u-radio-group :disabled="disabled" @change="radioGroupChange" :wrap="wrap" v-model="selectValue"><u-radio @change="radioChange"  v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item[valuename] || item.value"> {{ item[labelname] || item.label}}</u-radio></u-radio-group></view>
</template><script>export default {name:"fs-checkbox",props: {value: {type:String, default:''},//值 '1'labelname: {type:String,default:'dictValue'}, // 默认 label tagvaluename: {type: String, default: 'dictKey'}, // 默认 value taglist: {type: Array, default() {return []}},//字典 [{dictKey:1,dictValue:'男'}] 默认wrap: {type:Boolean, default: false},//是否独占一行disabled:{type:Boolean, default: false},// 禁用全部},mounted() {//当 值为空时触发// if(!this.value && (this.value !== 0 || this.value !== '0')) {// 	this.selectValue = this.value// }},watch:{value:{handler(newValue,oldValue) {if(newValue || newValue === 0 || newValue === '0') {this.selectValue = newValue}else {this.selectValue = ''}},deep:true,immediate: true}},data() {return {selectValue: ''};},methods:{//radioChangeradioChange(e) {},//获取选中的数据 数组格式radioGroupChange(e) {// console.log(e,'eeeee')let returnData = e || ''this.$emit('input',returnData)this.$emit('returnData',returnData)console.log('开放方法: returnData')}}}
</script><style lang="scss"></style>

使用

<fs-radio v-model="recordForm.DWLX" :list="[{dictValue: '是',dictKey: '0'},{dictValue: '否',dictKey: '1'}]"></fs-radio>

u-select 分装

<!-- 点击弹窗下拉选择  可 单/多 列-->
<template><view style="width: 100%"><u-input :input-align="inputaling" :placeholder="`请选择 ${placeholder}`" v-model="valueLable" type="select" :select-open="show" @click="show = true" :border="border"/><u-select v-model="show" :mode="mode" :list="list" @confirm="confirm" :value-name="valuename" :label-name="labelname" :safe-area-inset-bottom="true"></u-select></view>
</template><script>export default {name:"fs-select",props:{placeholder: {type:String,default:''}, // 提示labelname: {type:String,default:'dictValue'}, // 默认 label tagvaluename: {type: String, default: 'dictKey'}, // 默认 value tagmode: {type: String, default: 'single-column'}, // 模式list: {type: Array, default(){return []}}, //下拉列表数据value: {type:[String, Number],required:true},//选中的值，valueborder: {type: Boolean,required:false},// 是否显示边框inputaling: {type:String,default:'right'},},data() {return {show: false,//控制显隐valueLable: ''//展示的值};},watch:{//监听 valuevalue(newValue, oldValue) {this.list.forEach((item,index) => {if(newValue == item[this.valuename]) {this.valueLable = item[this.labelname]}})},//监听 valuelist:{handler(newValue, oldValue) {newValue.forEach((item,index) => {if(this.value == item[this.valuename]) {this.valueLable = item[this.labelname]}})},deep: true}},methods:{//成功选中confirm(e) {console.log(e,'e--')this.valueLable = e[0].labelthis.$emit('input',e[0].value)this.$emit('change',e)// console.log(this.$emit('change'))}}}
</script><style lang="scss"></style>

使用

<fs-select :list="[{dictKey: 1,dictValue: '男'}, {dictKey: 2,dictValue: '女'}]" v-model="form.SEX" ></fs-select>

正在加载中 分装

<!-- 加载数据 loading弹窗 -->
<template><u-mask :show="show" @click="$emit('update:show', false)"><view class="load_more_m"><u-loading mode="circle" color="#169ef9" /><view class="word">正在加载中...</view></view></u-mask>
</template><script>export default {name:"loading-mask",data() {return {};},props:{show:Boolean},methods:{}}
</script><style lang="scss" scoped>.load_more_m {margin: 33vh auto auto;width: 300rpx;height: 200rpx;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 20rpx;flex-direction: column;.word {margin-top: 24rpx;letter-spacing: 0.1em;}}
</style>

使用

<loading-mask :show.sync="showMask"></loading-mask>

u-popup 分装

<template><view style="color: #000000;"><view style="position: relative;" @click="openClick"><slot name="btn"><!-- <view class="fs_button">测试</view> --></slot></view><u-popup v-model="showPopup" mode="bottom" :mask-close-able="maskclose" :height="height" :border-radius="borderradius" :safe-area-inset-bottom="true" :closeable="closeable"><view class="popup_title">{{title}}</view><scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" :class="toggleClass" ><slot><view style="height: 100%" v-if="height"><u-empty text="暂无数据" mode="list"></u-empty></view></slot></scroll-view><view class="mask_footer" v-if="(confirmbtn || cancalbtn) && footBtn"><slot name="footer"><u-button type="primary"  style="width:320rpx" @click="confirmClick" v-if="confirmbtn">{{confirmtext}}</u-button><u-button type="info" style="width:320rpx" @click="cancalClick" v-if="cancalbtn">取 消</u-button></slot></view></u-popup></view>
</template><script>export default {name: "popup",props: {height: { type: String, default: '90%' },borderradius: { type: String, default: '20' },title: { type: String, default: '' },maskclose: {type:Boolean, default: false},//点击 mask 关闭closeable: {type:Boolean, default: false},//关闭按钮confirmbtn: {type:Boolean, default: true},cancalbtn: {type:Boolean, default: true},confirmtext: { type: String, default: '确 认' },footBtn: {type:Boolean, default: true},//底部按钮事件visible: {type:Boolean, default: false},//没有 按钮插槽 控制显隐的属性},data() {return {showPopup: false, //切换弹窗scrollTop: 0,//滚动};},watch:{visible(newValue,oldValue) {this.showPopup = newValue}},computed:{toggleClass() {if(this.footBtn) {//都在return 'popup_all'}else if(!this.footBtn){ //头在 脚不在return 'popup_header'}}},methods: {//点击确认事件confirmClick() {console.log('confirmClick','点击确认')this.$emit('confirmClick',this.done)// this.showPopup = false},//done() {this.showPopup = falsethis.$emit('update:visible', false);},//点击取消事件cancalClick() {this.showPopup = falseconsole.log('cancalClick','点击取消')this.$emit('cancalClick')this.$emit('update:visible', false);},//点击打开弹窗openClick() {console.log(1111)this.showPopup = truethis.$emit('changeClick')console.log('点击按钮可触发：changeClick 事件，在 fs-popup 组件上绑定')},//滚动到顶部触发的事件upper() {console.log('滚动到顶部触发的事件 @scrolltoupper')this.$emit('scrolltoupper')},//滚动到底部触发的事件lower() {console.log('滚动到底部触发的事件 @scrolltolower')this.$emit('scrolltolower')},}}
</script><style lang="scss" scoped>
.popup_title{text-align: center;font-size: 36rpx;font-weight: 500;line-height: 70rpx;height: 70rpx;border-bottom: 2rpx solid #888;
}// 关闭按钮样式
/deep/.u-close.u-close--top-right{top: 0rpx !important;
}.mask_footer{height: 50px;padding: 0 30rpx;display: flex;justify-content: space-around;align-items: center;border-top: 2rpx solid #888;
}// 切换滚动组件高度问题
.popup_all{height: calc(100% - 43px - 45px);}
.popup_header{height: calc(100% - 45px);}
.popup_no{height: calc(98%);}// 自定义按钮
.fs_button {color: #ffffff;border-color: #2979ff;background-color: #2979ff;display: inline-flex;width: auto;font-size: 22rpx;padding-top: 1px;height: 50rpx;line-height: 50rpx;padding: 0 20rpx;border-radius: 5px;
}</style>

使用

<fs-popup title="市场准入检查情况" :visible.sync="sczrshow" @confirmClick="sczradd" @cancalClick="sczrqx" :height="zobj.SCZRJCQKDX==1? '90%': '60%'"><u-cell-group :border="false"><u-cell-item :arrow="false" hover-class="none" bg-color="white"><u-form-item label-width="1px"><fs-radio v-model="zobj.SCZRJCQKDX" @returnData="bhgqk" :list="[{dictValue: '未发现不合格现象',dictKey: '0'},{dictValue: '不合格',dictKey: '1'}]"></fs-radio></u-form-item><view v-if="zobj.SCZRJCQKDX==1"><!-- <fs-checkbox v-model="recordForm.CSLX" :list="typeBoxList" valuename="name" labelname="label"></fs-checkbox> --><u-checkbox-group wrap @change='sczrbhg'><u-checkbox v-model="item.checked" v-for="(item, index) in SCZRJCQK" :key="index" :name="item.name">{{item.name}}</u-checkbox></u-checkbox-group></view><u-form-item label="不合格情况" :label-style='{fontSize:"20px"}' label-position='top'><u-input   v-model="zobj.SCZRJCQK" type="textarea" maxlength="2222" border:height="100" :auto-height="true" /></u-form-item></u-cell-item></u-cell-group></fs-popup>

checkbox 封装

<!-- 多选组件分装 -->
<template><view><u-checkbox-group :disabled="disabled" @change="handleChangeCheckbox" :wrap="wrap"><u-checkbox @change="checkboxChange"  v-model="item.checked" v-for="(item, index) in formatList" :key="index" :name="item[valuename] || item.value" v-show="!item.hidden"> {{ item[labelname] || item.label}}</u-checkbox></u-checkbox-group></view>
</template><script>export default {name:"fs-checkbox",props: {value: {type:String, default:''},//值 '1,2,3,4,5'keyname: {type: String, default:''}, //key 名字labelname: {type:String,default:'dictValue'}, // 默认 label tagvaluename: {type: String, default: 'dictKey'}, // 默认 value taglist: {type: Array, default() {return []}},//字典 [{dictKey:1,dictValue:'男'}] 默认wrap: {type:Boolean, default: false},//是否独占一行disabled:{type:Boolean, default: false},// 禁用全部},mounted() {this.formatData()// console.log(this.list,'this.list')},watch:{list(newvalue, oldValue) {this.formatData()},value(newValue, oldValue) {console.log(newValue,'1111111111111111111111111111111111111111')this.formatData()}},data() {return {formatList:[],//重新赋值，解决奇葩bug};},methods:{//格式化数据formatData() {//当 值为空时触发if(!this.value && (this.value !== 0 || this.value !== '0')) {this.list.forEach(item => {item.checked = false})this.formatList = this.list}else{let arr = []if(this.value === 0 || this.value === '0' || this.value != '') {//不为空if(this.value.indexOf(',') != -1) {//选多个arr = this.value.split(',')}else { //选一个arr = [this.value]}//赋值 checked true falsethis.list.forEach(item => {this.$set(item,'checked', false)})arr.forEach(item1 => {this.list.forEach(item2 => { console.log(item1 == item2[this.valuename]); if(item1 == item2[this.valuename]) {item2.checked = true;}})})this.formatList = this.list}}},//checkboxChangecheckboxChange(e) {console.log(e,'eee')},//获取选中的数据 数组格式handleChangeCheckbox(e) {console.log(e,'e')let returnData =(e || []).join(",")console.log(returnData,'选中的')this.$emit('input',returnData)this.$emit('returnData',{value: returnData,prop: this.keyname || ''})console.log('开放方法: returnData')}}}
</script><style lang="scss"></style>

使用

<fs-checkbox v-model="form.hzlx" :list="[{name: "铁道",value: "12"},{name: "船舶",value: "13"},{name: "民航",checked: false,value: "14"}," valuename="value" labelname="name"></fs-checkbox>

下拉加载更多数据 fs-load-more

示例

组件

<!-- 下拉加载更多数据状态 -->
<template><view v-if="page.total > page.pageSize" class="load_more" style="padding: 32rpx; background-color: #FFFFFF;"><u-loadmore :status="status" color=" #169ef9" /></view>
</template><script>/*** param {String} status // 加载前值为loadmore，加载中为loading，没有数据为nomore* page {Object} status // 页码-数据小于每页显示条数时不显示组件*/export default {props: {status: { type: String, default: 'loadmore' },page: { type: Object,default() {return {currentPage: 1, pageSize: 10, total: 0}} }},}
</script><style lang="scss" scoped>
.load_more {padding: 40rpx 0 160rpx;color: #169ef9;
}
</style>

使用

#模板
<fs-load-more :page="page" :status="status"></fs-load-more>#状态
status: "loadmore"
page: { pageSize: 10, currentPage: 1, total: 0 }#调接口
if (this.status == 'nomore') return;
try{this.status = 'loading'const data = await post(this.page.currentPage, this.page.pageSize, {});this.page.total = data.total;if (this.page.currentPage == 1) {this.data = data.records} else {this.data.push(...data.records)if (this.data.length < this.page.total) {this.status = 'loadmore'} else {this.status = 'nomore'}}
}catch(e){}

fs-load-page

组件

<!-- 加载状态:首次进入页面显示数据加载中，没有数据显示暂无数据 -->
<template><view><view v-if="(page.current == 1 || page.currentPage == 1 ) && firstLoading" class="empty_wrap" :style="{top: top + 'rpx'}"><view class="container"><view class="box"><view class="atom"></view><view class="atom"></view><view class="atom"></view><div class="dot"></div></view></view></view><view v-if="page.total == 0 && !firstLoading && isList" class="empty_wrap" :style="{top: top + 'rpx'}"><view class="data_empty"><image src="@/static/img/fs-empty-data.png"></image><view class="tip_title"> 暂无数据 </view></view></view></view>
</template><script>export default {props: {loading: { type: Boolean, default: true },isList: { type: Boolean, default: true },firstFlag: { type: Boolean, default: false },top: { type: String | Number, default: 0 },page: { type: Object, default () { return { currentPage: 1, pageSize: 10, total: 0 } } }},watch: {loading: {handler(newValue, oldValue) {if (newValue == true && this.firstFlag) { this.firstLoading = true }if (newValue == false) { this.firstLoading = false; }console.log(newValue, this.firstLoading, 'this.firstLoading')},deep: true,immediate: true},},data() {return {firstLoading: true,};}}
</script><style lang="scss" scoped>.empty_wrap {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 999;background: white;display: flex;align-items: center;justify-content: center;.data_empty {flex-direction: column;.tip_title {text-align: center;}}}.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.box {position: relative;width: 120rpx;height: 120rpx;}.dot {position: absolute;width: 10px;height: 10px;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #0396FF;animation: dotbreath 2s linear infinite;}.atom {position: absolute;width: 100%;height: 100%;border-radius: 50%;border-left-width: 6rpx;border-top-width: 6rpx;border-left-color: #0396FF;border-left-style: solid;border-top-style: solid;border-top-color: transparent;}.atom:nth-of-type(1) {left: 0%;top: 0%;animation: atom1 1s linear infinite;}.atom:nth-of-type(2) {right: 0%;top: 0%;animation: atom2 1s linear infinite;}.atom:nth-of-type(3) {right: 0%;bottom: 0%;animation: atom3 1s linear infinite;}@keyframes dotbreath {0% {opacity: 1;}50% {opacity: 0.5;}100% {opacity: 1;}}@keyframes atom1 {0% {transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);}100% {transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);}}@keyframes atom2 {0% {transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);}100% {transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);}}@keyframes atom3 {0% {transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);}100% {transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);}}
</style>

使用

<!-- 首次加载 --><fs-load-page :page="page" :loading="loading" :firstFlag="firstFlag"></fs-load-page>