Commit 8c14f14d by pangchong

feat: 布置工作开发

parent 7ee1e50c
...@@ -11,7 +11,16 @@ ...@@ -11,7 +11,16 @@
</template> </template>
</global-navbar> </global-navbar>
<!-- tab切换 --> <!-- tab切换 -->
<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" :name-key="nameKey" :value-key="valueKey"></z-tabs> <global-tabs
:current="current"
:lineWidth="40"
:list="tabList"
:keyName="nameKey"
@handleChange="tabsChange"
inactiveStyle="color:#86909C"
:width="250"
:height="100"
></global-tabs>
<slot name="top"></slot> <slot name="top"></slot>
</template> </template>
<!-- 滚动内容 --> <!-- 滚动内容 -->
...@@ -77,6 +86,11 @@ const ps = defineProps({ ...@@ -77,6 +86,11 @@ const ps = defineProps({
type: Number, type: Number,
default: 0 default: 0
}, },
//tab数据搜索字段
tabValueField: {
type: String,
default: 'status'
},
//tab数据name //tab数据name
nameKey: { nameKey: {
type: String, type: String,
...@@ -87,11 +101,6 @@ const ps = defineProps({ ...@@ -87,11 +101,6 @@ const ps = defineProps({
type: String, type: String,
default: 'value' default: 'value'
}, },
//tab数据搜索字段
tabValueField: {
type: String,
default: 'status'
},
//是否展示自定义导航栏 //是否展示自定义导航栏
showNavbar: { showNavbar: {
type: Boolean, type: Boolean,
...@@ -144,24 +153,20 @@ const getStyle = computed(() => { ...@@ -144,24 +153,20 @@ const getStyle = computed(() => {
} }
return style return style
}) })
const tabs = ref()
const current = ref(ps.current) const current = ref(ps.current)
//返回 //返回
const goBack = () => { const goBack = () => {
uni.navigateBack() uni.navigateBack()
} }
// tabs通知swiper切换 // tabs通知swiper切换
const tabsChange = (index) => { const tabsChange = (item) => {
current.value = index current.value = item.index
} }
// swiper滑动中 // swiper滑动中
const swiperTransition = (e) => { const swiperTransition = (e) => {}
tabs.value.setDx(e.detail.dx)
}
// swiper滑动结束 // swiper滑动结束
const swiperAnimationfinish = (e) => { const swiperAnimationfinish = (e) => {
current.value = e.detail.current current.value = e.detail.current
tabs.value.unlockDx()
} }
//获取列表刷新对象 //获取列表刷新对象
const pagingArr = ref([]) const pagingArr = ref([])
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:inactiveStyle="inactiveStyle" :inactiveStyle="inactiveStyle"
:lineWidth="lineWidth" :lineWidth="lineWidth"
:lineHeight="lineHeight" :lineHeight="lineHeight"
:itemStyle="itemStyle" :itemStyle="getItemStyle"
:current="current" :current="current"
:keyName="keyName" :keyName="keyName"
@click="handleClick" @click="handleClick"
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'
const es = defineEmits(['handleClick', 'handleChange']) const es = defineEmits(['handleClick', 'handleChange'])
const ps = defineProps({ const ps = defineProps({
list: { list: {
...@@ -53,11 +55,17 @@ const ps = defineProps({ ...@@ -53,11 +55,17 @@ const ps = defineProps({
type: [Number, String], type: [Number, String],
default: 3 default: 3
}, },
width: {
type: [Number, String],
default: 'auto'
},
height: {
type: [Number, String],
default: 88
},
itemStyle: { itemStyle: {
type: [String, Object], type: [String, Object],
default: () => { default: () => {}
return { height: '88rpx' }
}
}, },
current: { current: {
type: [Number, String], type: [Number, String],
...@@ -69,6 +77,14 @@ const ps = defineProps({ ...@@ -69,6 +77,14 @@ const ps = defineProps({
} }
}) })
const getItemStyle = computed(() => {
return {
boxSizing: 'border-box',
...ps.itemStyle,
width: typeof ps.width == 'number' ? ps.width + 'rpx' : ps.width,
height: typeof ps.height == 'number' ? ps.height + 'rpx' : ps.height
}
})
const handleClick = (item, index) => { const handleClick = (item, index) => {
es('handleClick', item, index) es('handleClick', item, index)
} }
......
...@@ -103,6 +103,41 @@ ...@@ -103,6 +103,41 @@
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path": "pages/panel/assign-work/edit-decompose",
"style": {
"navigationBarTitleText": "添加分解计划",
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/assign-work/edit-approval",
"style": {
"navigationBarTitleText": "添加领导批示",
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/assign-work/edit-gzFeedback",
"style": {
"navigationBarTitleText": "跟踪反馈",
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/assign-work/edit-followUpFeedback",
"style": {
"navigationBarTitleText": "后续措施反馈",
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/assign-work/edit-validate",
"style": {
"navigationBarTitleText": "工作验证",
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
...@@ -183,6 +183,7 @@ const handleSubmit = async () => { ...@@ -183,6 +183,7 @@ const handleSubmit = async () => {
if (res.code == 200) { if (res.code == 200) {
uni.navigateBack() uni.navigateBack()
appraisalRecordStore.getRqmDetails() appraisalRecordStore.getRqmDetails()
uni.$emit('appraisalRecordReload')
uni.$message.showToast(res.message) uni.$message.showToast(res.message)
} else { } else {
uni.$message.showToast(res.message) uni.$message.showToast(res.message)
......
<template>
<view class="card-details-footer">
<view class="left">
<global-field :label="leftLabel" :value="leftValue"></global-field>
</view>
<view class="right">
<global-field :label="rightLabel" :value="rightValue"></global-field>
</view>
</view>
</template>
<script setup>
const ps = defineProps({
leftLabel: {
type: String,
default: ''
},
leftValue: {
type: String,
default: ''
},
rightLabel: {
type: String,
default: ''
},
rightValue: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.card-details-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 0;
border-bottom: 2rpx solid #f4f4f4;
}
</style>
<template>
<view class="card-details-item">
<view class="title" v-if="title">{{ title }}</view>
<view class="label" v-if="label">{{ label }}</view>
<view class="content">{{ content }}</view>
</view>
</template>
<script setup>
const ps = defineProps({
title: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
content: {
type: String,
default: ''
}
})
</script>
<style lang="scss" scoped>
.card-details-item {
border-bottom: 2rpx solid #f4f4f4;
padding: 16rpx 0;
.title {
font-size: 34rpx;
color: $uni-text-5;
font-weight: 500;
margin-bottom: 16rpx;
}
.label {
font-size: 34rpx;
color: $uni-text-5;
margin-bottom: 16rpx;
}
.content {
font-size: 30rpx;
color: $uni-text-4;
line-height: 40rpx;
}
}
</style>
...@@ -48,8 +48,5 @@ const ps = defineProps({ ...@@ -48,8 +48,5 @@ const ps = defineProps({
} }
} }
} }
&-content {
padding: 16rpx 0;
}
} }
</style> </style>
...@@ -64,3 +64,6 @@ ...@@ -64,3 +64,6 @@
justify-content: space-between; justify-content: space-between;
} }
} }
.card-empty {
padding-top: 16rpx;
}
...@@ -50,10 +50,29 @@ ...@@ -50,10 +50,29 @@
</view> </view>
</view> </view>
<card-details title="工作反馈"> <card-details title="工作反馈">
<card-details-item
title="问题分析"
content="首航B6867飞机1月1日海口过站机组反映绿系统液压油量低,隔离发现PTU总管1113GM上管"
></card-details-item>
<card-details-item title="解决措施" label="工作目标" content="一、 工作目标 分析6867飞机渗漏原因,视情采"></card-details-item>
<card-details-item
label="分解计划"
content="二、 任务分解 1. B6867飞机绿系统液压油量低的原因隔离PTU总管上液压管路远端接头松动导致,对该松动接头重新磅力后,检查不漏; 2. 查询B6867飞机PTU总管为2013年4月2日装机,为原始装机件,查询漏油管路没有更换记录,判断同为原始装机件; 3. 松动接头位于起落架舱内,接头处于长时间液压冲击和飞机轮舱收放起落架时高振动环境中,导致此接头螺纹松动; 4. 经查询,此接头渗漏为A320机队首例,判断为突发个例。B6867飞
"
></card-details-item>
<card-details-footer rightLabel="完成时限:" rightValue="2024-01-03"></card-details-footer>
<card-details-item
label="当前进展"
content="三、 当前进展 1. 针对液压部件和液压管漏油的问题,TS已编写《EO-A32-29-2021-008详细检查A32液压部件及管路》,对机队液压部件、管路及管接头进行1000FH/180D的重复性查;(2)A320机队中心已编写《A320系列液压油漏油标准》,供快速处置时参考;在冬季维护时加强对易漏油部件的检查,封圈老化判断方法已有培训材料,帮助一线检查判断;(3)A320机队中心已编写《SOP-A32-00-002 A32飞机漏油故障的标准处置流程》,提高处置效率。
"
></card-details-item>
<card-details-footer leftLabel="基地/部门批准领导:" leftValue="测试" rightLabel="MCD批准领导:" rightValue="测试"></card-details-footer>
<!-- <view class="card-empty">
<global-empty></global-empty> <global-empty></global-empty>
</view> -->
</card-details> </card-details>
<card-details title="领导批示" titleIcon="drive"> <card-details title="领导批示" titleIcon="drive">
<view class="card-empty">
<global-empty></global-empty> <global-empty></global-empty>
</view>
</card-details> </card-details>
</global-page> </global-page>
<!-- 责任单位弹出层 --> <!-- 责任单位弹出层 -->
...@@ -63,6 +82,8 @@ ...@@ -63,6 +82,8 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import CardDetails from './components/card-details.vue' import CardDetails from './components/card-details.vue'
import CardDetailsItem from './components/card-details-item.vue'
import CardDetailsFooter from './components/card-details-footer.vue'
import CompanyPopup from './components/company-popup.vue' import CompanyPopup from './components/company-popup.vue'
//责任公司弹框 //责任公司弹框
......
<template>
<global-page title="添加领导批示" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<up-form-item label="领导批示意见" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
<up-form-item label="批示要点" :borderBottom="true" labelPosition="top">
<up-textarea
placeholder="一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
</view>
</up-form>
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped>
.form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
}
</style>
<template>
<global-page
title="添加分解计划"
navLeftType="text"
:showNavRight="true"
navRightType="button"
navRightText="保存"
showFooterBtn
footerBtnText="添加分解计划"
@handleFooterClick="handleFooterClick"
>
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<up-form-item label="分解计划1" :borderBottom="true" labelPosition="top">
<view class="delete" @tap="handleDelete"><global-icon icon="delete-01" color="#F53F3F"></global-icon></view>
<up-textarea
placeholder="一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="完成时限" :borderBottom="true">
<global-picker pickAlign="right" clearable mode="date" :emptyValue="-1" placeholder="请选择日期"></global-picker>
</up-form-item>
</view>
<view class="form">
<up-form-item label="分解计划2" :borderBottom="true" labelPosition="top">
<view class="delete" @tap="handleDelete"><global-icon icon="delete-01" color="#F53F3F"></global-icon></view>
<up-textarea
placeholder="一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="完成时限" :borderBottom="true">
<global-picker pickAlign="right" clearable mode="date" :emptyValue="-1" placeholder="请选择日期"></global-picker>
</up-form-item>
</view>
</up-form>
<up-modal
:width="250"
content="确认删除吗?删除后不可恢复!"
:show="show"
showCancelButton
closeOnClickOverlay
@confirm="confirm"
@cancel="show = false"
@close="show = false"
></up-modal>
</global-page>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
const handleDelete = () => {
show.value = true
}
const confirm = () => {}
const handleFooterClick = () => {
console.log('点击了添加分解计划')
}
</script>
<style lang="scss" scoped>
.form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
:deep(.u-form-item) {
position: relative;
.delete {
position: absolute;
right: 0;
top: 24rpx;
}
}
}
</style>
<template>
<global-page title="后续措施反馈" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<up-form-item label="反馈内容" :borderBottom="true" labelPosition="top">
<up-textarea
placeholder="一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="验证材料" labelPosition="top" :borderBottom="true">
<view style="margin-top: 24rpx">
<global-upload url="/resource/uploadFile"></global-upload>
</view>
</up-form-item>
<up-form-item label="应用分类" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
</view>
</up-form>
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped>
.form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
}
</style>
<template>
<global-page title="跟踪反馈" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<up-form-item label="跟踪反馈" :borderBottom="true" labelPosition="top">
<up-textarea
placeholder="一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
</view>
</up-form>
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped>
.form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
}
</style>
<template>
<global-page title="工作验证" navLeftType="text" :showNavRight="true" navRightType="button" navRightText="保存">
<up-form labelPosition="left" labelWidth="auto" ref="formRef">
<view class="form">
<up-form-item label="跟踪要点" :borderBottom="true" labelPosition="top">
<up-textarea
placeholder="一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容"
:height="40"
border="none"
></up-textarea>
</up-form-item>
<up-form-item label="事件类型" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
<up-form-item label="重复/同类事件" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
<up-form-item label="验证附件" labelPosition="top" :borderBottom="true">
<view style="margin-top: 24rpx">
<global-upload url="/resource/uploadFile"></global-upload>
</view>
</up-form-item>
<up-form-item label="工作验证状态" :borderBottom="true">
<global-picker pickAlign="right" clearable></global-picker>
</up-form-item>
</view>
</up-form>
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped>
.form {
background: #fff;
margin-bottom: 24rpx;
padding: 0 32rpx;
}
</style>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<view class="plan"> <view class="plan">
<view class="plan-title"> <view class="plan-title">
<view class="left">分解计划</view> <view class="left">分解计划</view>
<view class="right"> <view class="right" @tap="goTo">
<view class="circle"><up-icon name="plus" color="#fff" size="8"></up-icon></view> <view class="circle"><up-icon name="plus" color="#fff" size="8"></up-icon></view>
<view class="text">添加</view> <view class="text">添加</view>
</view> </view>
...@@ -89,6 +89,9 @@ ...@@ -89,6 +89,9 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
const goTo = () => {
uni.navigateTo({ url: 'edit-decompose' })
}
const value = ref(true) const value = ref(true)
const change = (e) => { const change = (e) => {
console.log(e) console.log(e)
......
...@@ -55,6 +55,12 @@ ...@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6de;</span>
<div class="name">delete-01</div>
<div class="code-name">&amp;#xe6de;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6dc;</span> <span class="icon iconfont">&#xe6dc;</span>
<div class="name">navbarright</div> <div class="name">navbarright</div>
<div class="code-name">&amp;#xe6dc;</div> <div class="code-name">&amp;#xe6dc;</div>
...@@ -132,9 +138,9 @@ ...@@ -132,9 +138,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1716888584997') format('woff2'), src: url('iconfont.woff2?t=1716962655386') format('woff2'),
url('iconfont.woff?t=1716888584997') format('woff'), url('iconfont.woff?t=1716962655386') format('woff'),
url('iconfont.ttf?t=1716888584997') format('truetype'); url('iconfont.ttf?t=1716962655386') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
...@@ -161,6 +167,15 @@ ...@@ -161,6 +167,15 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-delete-01"></span>
<div class="name">
delete-01
</div>
<div class="code-name">.icon-delete-01
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-navbarright"></span> <span class="icon iconfont icon-navbarright"></span>
<div class="name"> <div class="name">
navbarright navbarright
...@@ -279,6 +294,14 @@ ...@@ -279,6 +294,14 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-delete-01"></use>
</svg>
<div class="name">delete-01</div>
<div class="code-name">#icon-delete-01</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-navbarright"></use> <use xlink:href="#icon-navbarright"></use>
</svg> </svg>
<div class="name">navbarright</div> <div class="name">navbarright</div>
......
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4550048 */ font-family: "iconfont"; /* Project id 4550048 */
src: url('iconfont.woff2?t=1716888584997') format('woff2'), src: url('iconfont.woff2?t=1716962655386') format('woff2'),
url('iconfont.woff?t=1716888584997') format('woff'), url('iconfont.woff?t=1716962655386') format('woff'),
url('iconfont.ttf?t=1716888584997') format('truetype'); url('iconfont.ttf?t=1716962655386') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-delete-01:before {
content: "\e6de";
}
.icon-navbarright:before { .icon-navbarright:before {
content: "\e6dc"; content: "\e6dc";
} }
......
window._iconfont_svg_string_4550048='<svg><symbol id="icon-navbarright" viewBox="0 0 1024 1024"><path d="M896 748.8H128V832h768v-83.2z m0-281.6H467.2v83.2H896V467.2zM128 192h768v83.2H128V192z m172.8 448c12.8 6.4 32 0 32-19.2V409.6c0-19.2-19.2-25.6-32-19.2L140.8 499.2c-12.8 6.4-12.8 25.6 0 38.4L300.8 640z" ></path></symbol><symbol id="icon-drive" viewBox="0 0 1024 1024"><path d="M236.8 172.8v684.8h556.8v-448H620.8c-38.4 0-64-25.6-64-64V172.8h-320z m403.2 57.6V320h89.6L640 230.4zM147.2 147.2c0-38.4 25.6-64 64-64h403.2l262.4 262.4v531.2c0 38.4-25.6 64-64 64H211.2c-38.4 0-64-25.6-64-64V147.2z" ></path></symbol><symbol id="icon-safe" viewBox="0 0 1024 1024"><path d="M512 76.8l19.2 12.8c70.4 38.4 153.6 64 217.6 83.2 32 6.4 57.6 12.8 76.8 19.2 12.8 0 19.2 0 25.6 6.4h44.8v371.2l-44.8-6.4h44.8V576c0 6.4-6.4 19.2-12.8 32-6.4 25.6-25.6 64-51.2 108.8-51.2 83.2-147.2 172.8-307.2 224H512l-12.8-6.4c-160-44.8-256-140.8-307.2-224-25.6-32-38.4-70.4-51.2-102.4-6.4-12.8-6.4-25.6-6.4-32v-12.8l44.8-6.4-51.2 6.4V198.4l38.4-6.4h6.4c6.4 0 12.8 0 25.6-6.4 19.2 0 44.8-6.4 76.8-19.2 64-12.8 147.2-38.4 217.6-83.2l19.2-6.4z m-300.8 192v288c0 6.4 6.4 12.8 6.4 25.6 6.4 25.6 19.2 51.2 44.8 89.6 44.8 64 115.2 140.8 249.6 179.2 128-38.4 204.8-115.2 249.6-179.2 19.2-32 32-64 44.8-89.6 6.4-12.8 6.4-19.2 6.4-25.6V268.8c-19.2-6.4-51.2-6.4-83.2-19.2-64-12.8-140.8-38.4-217.6-76.8-76.8 44.8-153.6 64-217.6 83.2-32 6.4-57.6 12.8-83.2 12.8z m518.4 147.2l-243.2 243.2-160-153.6L384 448l96 96 185.6-185.6 64 57.6z" ></path></symbol><symbol id="icon-subscribed" viewBox="0 0 1024 1024"><path d="M234.688 170.688v654.208L512 676.992l277.312 147.904V170.688H234.688z m-85.376-21.312a64 64 0 0 1 64-64h597.376a64 64 0 0 1 64 64v739.52c0 35.456-37.76 58.112-69.056 41.408L512 773.76l-293.632 156.608a46.912 46.912 0 0 1-69.056-41.408V149.376zM471.36 468.48l165.952-165.952 60.352 60.352-226.304 226.304-135.68-135.744 60.288-60.352L471.36 468.48z" fill="#4E5969" ></path></symbol><symbol id="icon-mind-mapping" viewBox="0 0 1024 1024"><path d="M106.688 213.312a85.312 85.312 0 1 1 128 73.92v182.08h106.624v85.376H234.688V768h106.624v85.312h-192V287.232a85.312 85.312 0 0 1-42.624-73.92zM917.312 256H426.688V170.688h490.624V256z m0 298.688H426.688V469.312h490.624v85.376z m0 298.624H426.688V768h490.624v85.312z" fill="#4E5969" ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M149.312 128a64 64 0 0 0-64 64v640a64 64 0 0 0 64 64h725.376a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64H149.312z m21.376 682.688V213.312h682.624v597.376H170.688z m88.32-483.072L512 502.784l253.056-175.168 48.576 70.144-265.216 183.552a64 64 0 0 1-72.832 0L210.368 397.76l48.64-70.144z" fill="#4E5969" ></path></symbol><symbol id="icon-idcard" viewBox="0 0 1024 1024"><path d="M85.312 213.312C85.312 166.208 123.52 128 170.688 128h682.624c47.168 0 85.376 38.208 85.376 85.312v597.376c0 47.104-38.208 85.312-85.376 85.312H170.688a85.312 85.312 0 0 1-85.376-85.312V213.312z m768 0H170.688v597.376h682.624V213.312z m-426.624 192h-192V320h192v85.312z m0 149.376h-192V469.312h192v85.376zM341.312 704H234.688V618.688h106.624V704z m277.376-106.688C559.808 597.312 512 645.12 512 704H426.688a192 192 0 0 1 114.24-175.616 128 128 0 1 1 155.456 0A192 192 0 0 1 810.688 704h-85.376c0-58.88-47.744-106.688-106.624-106.688zM576 426.688a42.688 42.688 0 1 1 85.312 0 42.688 42.688 0 0 1-85.312 0z" fill="#4E5969" ></path></symbol><symbol id="icon-calendar" viewBox="0 0 1024 1024"><path d="M256 149.312v-42.688h85.312v42.688h341.376v-42.688H768v42.688h85.312a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H170.688a64 64 0 0 1-64-64v-640a64 64 0 0 1 64-64H256z m0 85.312H192v192h640v-192h-64v42.688h-85.312v-42.688H341.312v42.688H256v-42.688zM832 512H192v320h640V512z" fill="#4E5969" ></path></symbol><symbol id="icon-message" viewBox="0 0 1024 1024"><path d="M106.688 512a405.312 405.312 0 1 1 810.624 0v13.44a391.936 391.936 0 0 1-391.872 391.872H106.688V512zM512 192a320 320 0 0 0-320 320v320h333.44A306.56 306.56 0 0 0 832 525.44V512a320 320 0 0 0-320-320z m192 192v85.312H320V384h384z m-192 277.312H320V576h192v85.312z" fill="#4E5969" ></path></symbol><symbol id="icon-Vector" viewBox="0 0 1228 1024"><path d="M285.360264 841.131887c15.870413 7.372063 15.870413 22.013799 23.754425 36.553144 0 22.013799-15.768023 43.925207-47.50885 43.925208-23.754425 7.269673-47.611239-14.641736-55.49525-43.925208 0-21.911409 15.870413-43.822818 47.508849-65.734226a263.960804 263.960804 0 0 1 150.615339 0c95.222478 36.553145 182.356164 116.929107 206.110588 168.123988-47.508849-175.49605-253.619438-321.708629-443.859614-241.332667-71.365663 29.283472-103.106489 87.748025-103.106489 153.584641C71.365663 965.637836 134.744926 1024 221.981002 1024c47.508849 0 87.133687-14.641736 110.990501-43.925207 31.740826-51.194881 15.768023-116.929107-47.611239-138.942906z m657.956604 0c-15.870413 7.372063-23.754425 14.641736-23.754424 36.553144 0 22.013799 15.768023 43.925207 47.508849 43.925208 23.754425 7.269673 47.611239-14.641736 55.49525-43.925208 0-21.911409-15.870413-43.822818-47.508849-65.734226a263.960804 263.960804 0 0 0-150.615338 0c-95.222478 36.553145-182.356164 116.929107-213.994601 168.123988 47.508849-175.49605 261.50345-321.708629 451.743626-241.332667 63.481652 22.013799 103.106489 80.478352 95.222478 146.314968-7.986401 73.106289-63.481652 131.673233-150.717729 131.673233-47.508849 0-87.133687-14.641736-110.990501-43.925208-23.754425-43.925207-15.768023-109.659434 47.611239-131.673232zM610.242976 387.750025C784.817518 387.750025 927.446455 307.271673 927.446455 204.881912c0-80.478352-87.236076-146.314969-206.110589-175.496051 142.731327 29.181082 245.735426 109.659434 245.735427 197.40746C967.071293 336.555144 832.428757 409.661434 713.451855 424.30317c-71.365663 7.269673-79.249675 7.269673-103.10649 29.283471-7.884012-22.013799-23.754425-22.013799-87.133686-29.283471C404.234777 409.661434 269.489851 329.183082 269.489851 226.793321c0-87.748025 103.106489-168.226377 245.735426-197.40746C388.466753 58.464554 301.230677 124.40356 301.230677 204.881912c0 102.389761 142.628937 182.868113 309.217078 182.868113z m0 117.031497c31.740826-22.013799 79.249675-29.283472 118.976902-36.655535C903.692031 431.572843 1014.682532 351.29927 1014.682532 241.435056c0-43.822818-15.870413-80.478352-47.611239-109.659434-63.481652-58.566943-158.49935-102.389761-277.476253-117.031496 213.994601 14.641736 372.69873 124.30117 372.698731 255.974402 0 117.031497-118.976902 204.779522-309.217079 248.60234-79.249675 22.013799-118.874513 36.655534-142.731327 73.208679-15.870413-36.553145-55.49525-43.925207-134.744925-73.208679-190.240176-43.822818-309.217078-131.570843-309.217078-248.60234 0-131.673233 158.70413-234.062994 372.69873-255.974402C427.989201 29.385861 332.971503 73.208679 269.489851 131.775622c-31.740826 29.181082-47.508849 73.106289-47.508849 109.659434 0 109.761824 110.990501 190.137786 285.360264 226.690931 31.740826 7.372063 79.249675 14.641736 103.004099 36.655535z m0 175.49605c39.624838-58.566943 118.976902-87.748025 190.240176-109.761824 23.856814-7.269673 31.740826-14.539346 55.49525-14.539346 150.615338-51.194881 245.735426-146.314969 253.721828-255.974402 0-153.584642-198.226577-277.988201-443.962004-299.89961C975.057694 14.744126 1228.677132 175.59844 1228.677132 358.466553c0 124.30117-95.120088 234.062994-277.476252 299.89961-79.249675 21.911409-285.360264 80.375962-340.855515 292.527548-47.508849-204.779522-253.619438-270.616138-332.869113-292.527548C95.120088 585.157484 0 482.767723 0 358.466553 0 175.59844 253.619438 22.013799 562.836516 0.10239 317.10109 14.744126 118.772123 139.045295 118.772123 292.629937c7.986401 109.761824 103.106489 204.779522 245.735426 255.974403 23.856814 7.372063 31.740826 14.641736 55.495251 14.641735 79.249675 29.283472 158.60174 58.464554 190.240176 117.031497z m-110.990501-511.948805C499.354865 109.659434 546.966103 58.464554 618.434157 58.464554 689.59504 58.566943 737.206279 102.492151 737.206279 168.328767c0 58.464554-47.611239 109.659434-118.874512 109.659434-71.365663 0-118.976902-43.822818-118.976902-109.659434z" fill="#DD4012" ></path></symbol></svg>',function(i){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,n,c,a,l,h=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=i._iconfont_svg_string_4550048,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?h(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),o()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(c=o,a=i.document,l=!1,v(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,d())})}function d(){l||(l=!0,c())}function v(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(v,50)}d()}}(window); window._iconfont_svg_string_4550048='<svg><symbol id="icon-delete-01" viewBox="0 0 1024 1024"><path d="M723.2 192V108.8H300.8V192h-192v83.2h76.8v576c0 38.4 25.6 64 64 64h531.2c38.4 0 64-25.6 64-64v-576h76.8V192h-198.4zM268.8 832V275.2h492.8V832H268.8zM384 384v320h83.2V384H384z m172.8 0v320H640V384H556.8z" ></path></symbol><symbol id="icon-navbarright" viewBox="0 0 1024 1024"><path d="M896 748.8H128V832h768v-83.2z m0-281.6H467.2v83.2H896V467.2zM128 192h768v83.2H128V192z m172.8 448c12.8 6.4 32 0 32-19.2V409.6c0-19.2-19.2-25.6-32-19.2L140.8 499.2c-12.8 6.4-12.8 25.6 0 38.4L300.8 640z" ></path></symbol><symbol id="icon-drive" viewBox="0 0 1024 1024"><path d="M236.8 172.8v684.8h556.8v-448H620.8c-38.4 0-64-25.6-64-64V172.8h-320z m403.2 57.6V320h89.6L640 230.4zM147.2 147.2c0-38.4 25.6-64 64-64h403.2l262.4 262.4v531.2c0 38.4-25.6 64-64 64H211.2c-38.4 0-64-25.6-64-64V147.2z" ></path></symbol><symbol id="icon-safe" viewBox="0 0 1024 1024"><path d="M512 76.8l19.2 12.8c70.4 38.4 153.6 64 217.6 83.2 32 6.4 57.6 12.8 76.8 19.2 12.8 0 19.2 0 25.6 6.4h44.8v371.2l-44.8-6.4h44.8V576c0 6.4-6.4 19.2-12.8 32-6.4 25.6-25.6 64-51.2 108.8-51.2 83.2-147.2 172.8-307.2 224H512l-12.8-6.4c-160-44.8-256-140.8-307.2-224-25.6-32-38.4-70.4-51.2-102.4-6.4-12.8-6.4-25.6-6.4-32v-12.8l44.8-6.4-51.2 6.4V198.4l38.4-6.4h6.4c6.4 0 12.8 0 25.6-6.4 19.2 0 44.8-6.4 76.8-19.2 64-12.8 147.2-38.4 217.6-83.2l19.2-6.4z m-300.8 192v288c0 6.4 6.4 12.8 6.4 25.6 6.4 25.6 19.2 51.2 44.8 89.6 44.8 64 115.2 140.8 249.6 179.2 128-38.4 204.8-115.2 249.6-179.2 19.2-32 32-64 44.8-89.6 6.4-12.8 6.4-19.2 6.4-25.6V268.8c-19.2-6.4-51.2-6.4-83.2-19.2-64-12.8-140.8-38.4-217.6-76.8-76.8 44.8-153.6 64-217.6 83.2-32 6.4-57.6 12.8-83.2 12.8z m518.4 147.2l-243.2 243.2-160-153.6L384 448l96 96 185.6-185.6 64 57.6z" ></path></symbol><symbol id="icon-subscribed" viewBox="0 0 1024 1024"><path d="M234.688 170.688v654.208L512 676.992l277.312 147.904V170.688H234.688z m-85.376-21.312a64 64 0 0 1 64-64h597.376a64 64 0 0 1 64 64v739.52c0 35.456-37.76 58.112-69.056 41.408L512 773.76l-293.632 156.608a46.912 46.912 0 0 1-69.056-41.408V149.376zM471.36 468.48l165.952-165.952 60.352 60.352-226.304 226.304-135.68-135.744 60.288-60.352L471.36 468.48z" fill="#4E5969" ></path></symbol><symbol id="icon-mind-mapping" viewBox="0 0 1024 1024"><path d="M106.688 213.312a85.312 85.312 0 1 1 128 73.92v182.08h106.624v85.376H234.688V768h106.624v85.312h-192V287.232a85.312 85.312 0 0 1-42.624-73.92zM917.312 256H426.688V170.688h490.624V256z m0 298.688H426.688V469.312h490.624v85.376z m0 298.624H426.688V768h490.624v85.312z" fill="#4E5969" ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M149.312 128a64 64 0 0 0-64 64v640a64 64 0 0 0 64 64h725.376a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64H149.312z m21.376 682.688V213.312h682.624v597.376H170.688z m88.32-483.072L512 502.784l253.056-175.168 48.576 70.144-265.216 183.552a64 64 0 0 1-72.832 0L210.368 397.76l48.64-70.144z" fill="#4E5969" ></path></symbol><symbol id="icon-idcard" viewBox="0 0 1024 1024"><path d="M85.312 213.312C85.312 166.208 123.52 128 170.688 128h682.624c47.168 0 85.376 38.208 85.376 85.312v597.376c0 47.104-38.208 85.312-85.376 85.312H170.688a85.312 85.312 0 0 1-85.376-85.312V213.312z m768 0H170.688v597.376h682.624V213.312z m-426.624 192h-192V320h192v85.312z m0 149.376h-192V469.312h192v85.376zM341.312 704H234.688V618.688h106.624V704z m277.376-106.688C559.808 597.312 512 645.12 512 704H426.688a192 192 0 0 1 114.24-175.616 128 128 0 1 1 155.456 0A192 192 0 0 1 810.688 704h-85.376c0-58.88-47.744-106.688-106.624-106.688zM576 426.688a42.688 42.688 0 1 1 85.312 0 42.688 42.688 0 0 1-85.312 0z" fill="#4E5969" ></path></symbol><symbol id="icon-calendar" viewBox="0 0 1024 1024"><path d="M256 149.312v-42.688h85.312v42.688h341.376v-42.688H768v42.688h85.312a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H170.688a64 64 0 0 1-64-64v-640a64 64 0 0 1 64-64H256z m0 85.312H192v192h640v-192h-64v42.688h-85.312v-42.688H341.312v42.688H256v-42.688zM832 512H192v320h640V512z" fill="#4E5969" ></path></symbol><symbol id="icon-message" viewBox="0 0 1024 1024"><path d="M106.688 512a405.312 405.312 0 1 1 810.624 0v13.44a391.936 391.936 0 0 1-391.872 391.872H106.688V512zM512 192a320 320 0 0 0-320 320v320h333.44A306.56 306.56 0 0 0 832 525.44V512a320 320 0 0 0-320-320z m192 192v85.312H320V384h384z m-192 277.312H320V576h192v85.312z" fill="#4E5969" ></path></symbol><symbol id="icon-Vector" viewBox="0 0 1228 1024"><path d="M285.360264 841.131887c15.870413 7.372063 15.870413 22.013799 23.754425 36.553144 0 22.013799-15.768023 43.925207-47.50885 43.925208-23.754425 7.269673-47.611239-14.641736-55.49525-43.925208 0-21.911409 15.870413-43.822818 47.508849-65.734226a263.960804 263.960804 0 0 1 150.615339 0c95.222478 36.553145 182.356164 116.929107 206.110588 168.123988-47.508849-175.49605-253.619438-321.708629-443.859614-241.332667-71.365663 29.283472-103.106489 87.748025-103.106489 153.584641C71.365663 965.637836 134.744926 1024 221.981002 1024c47.508849 0 87.133687-14.641736 110.990501-43.925207 31.740826-51.194881 15.768023-116.929107-47.611239-138.942906z m657.956604 0c-15.870413 7.372063-23.754425 14.641736-23.754424 36.553144 0 22.013799 15.768023 43.925207 47.508849 43.925208 23.754425 7.269673 47.611239-14.641736 55.49525-43.925208 0-21.911409-15.870413-43.822818-47.508849-65.734226a263.960804 263.960804 0 0 0-150.615338 0c-95.222478 36.553145-182.356164 116.929107-213.994601 168.123988 47.508849-175.49605 261.50345-321.708629 451.743626-241.332667 63.481652 22.013799 103.106489 80.478352 95.222478 146.314968-7.986401 73.106289-63.481652 131.673233-150.717729 131.673233-47.508849 0-87.133687-14.641736-110.990501-43.925208-23.754425-43.925207-15.768023-109.659434 47.611239-131.673232zM610.242976 387.750025C784.817518 387.750025 927.446455 307.271673 927.446455 204.881912c0-80.478352-87.236076-146.314969-206.110589-175.496051 142.731327 29.181082 245.735426 109.659434 245.735427 197.40746C967.071293 336.555144 832.428757 409.661434 713.451855 424.30317c-71.365663 7.269673-79.249675 7.269673-103.10649 29.283471-7.884012-22.013799-23.754425-22.013799-87.133686-29.283471C404.234777 409.661434 269.489851 329.183082 269.489851 226.793321c0-87.748025 103.106489-168.226377 245.735426-197.40746C388.466753 58.464554 301.230677 124.40356 301.230677 204.881912c0 102.389761 142.628937 182.868113 309.217078 182.868113z m0 117.031497c31.740826-22.013799 79.249675-29.283472 118.976902-36.655535C903.692031 431.572843 1014.682532 351.29927 1014.682532 241.435056c0-43.822818-15.870413-80.478352-47.611239-109.659434-63.481652-58.566943-158.49935-102.389761-277.476253-117.031496 213.994601 14.641736 372.69873 124.30117 372.698731 255.974402 0 117.031497-118.976902 204.779522-309.217079 248.60234-79.249675 22.013799-118.874513 36.655534-142.731327 73.208679-15.870413-36.553145-55.49525-43.925207-134.744925-73.208679-190.240176-43.822818-309.217078-131.570843-309.217078-248.60234 0-131.673233 158.70413-234.062994 372.69873-255.974402C427.989201 29.385861 332.971503 73.208679 269.489851 131.775622c-31.740826 29.181082-47.508849 73.106289-47.508849 109.659434 0 109.761824 110.990501 190.137786 285.360264 226.690931 31.740826 7.372063 79.249675 14.641736 103.004099 36.655535z m0 175.49605c39.624838-58.566943 118.976902-87.748025 190.240176-109.761824 23.856814-7.269673 31.740826-14.539346 55.49525-14.539346 150.615338-51.194881 245.735426-146.314969 253.721828-255.974402 0-153.584642-198.226577-277.988201-443.962004-299.89961C975.057694 14.744126 1228.677132 175.59844 1228.677132 358.466553c0 124.30117-95.120088 234.062994-277.476252 299.89961-79.249675 21.911409-285.360264 80.375962-340.855515 292.527548-47.508849-204.779522-253.619438-270.616138-332.869113-292.527548C95.120088 585.157484 0 482.767723 0 358.466553 0 175.59844 253.619438 22.013799 562.836516 0.10239 317.10109 14.744126 118.772123 139.045295 118.772123 292.629937c7.986401 109.761824 103.106489 204.779522 245.735426 255.974403 23.856814 7.372063 31.740826 14.641736 55.495251 14.641735 79.249675 29.283472 158.60174 58.464554 190.240176 117.031497z m-110.990501-511.948805C499.354865 109.659434 546.966103 58.464554 618.434157 58.464554 689.59504 58.566943 737.206279 102.492151 737.206279 168.328767c0 58.464554-47.611239 109.659434-118.874512 109.659434-71.365663 0-118.976902-43.822818-118.976902-109.659434z" fill="#DD4012" ></path></symbol></svg>',function(i){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,c,n,a,l,h=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=i._iconfont_svg_string_4550048,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?h(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),o()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(n=o,a=i.document,l=!1,d(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,v())})}function v(){l||(l=!0,n())}function d(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(d,50)}v()}}(window);
\ No newline at end of file \ No newline at end of file
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "40524214",
"name": "delete-01",
"font_class": "delete-01",
"unicode": "e6de",
"unicode_decimal": 59102
},
{
"icon_id": "40514045", "icon_id": "40514045",
"name": "navbarright", "name": "navbarright",
"font_class": "navbarright", "font_class": "navbarright",
......
## 0.2.5(2023-01-09)
修复可能出现的可能出现的与swiper联动时报错node不存在的bug
// z-tabs全局配置文件,注意避免更新时此文件被覆盖,若被覆盖,可在此文件中右键->点击本地历史记录,找回覆盖前的配置
export default {
'active-color': '#165DFF',//激活状态tab的颜色
'inactive-color': '#86909C',//未激活状态tab的颜色
'active-style': { color: '#1D2129' },//激活状态tab的样式
'bg-color': '#f7f8fa',//z-tabs背景色
'bar-width': '80rpx',//滑块宽度,单位rpx,支持传100、"100px"或"100rpx"
}
\ No newline at end of file
<!-- z-tabs v0.2.5 by-ZXLee -->
<!-- github地址:https://github.com/SmileZXLee/uni-z-tabs -->
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?name=z-tabs -->
<!-- 反馈QQ群:790460711 -->
<template name="z-tabs">
<view class="z-tabs-conatiner" :style="[{background:bgColor}, tabsStyle]">
<view class="z-tabs-left">
<slot name="left" />
</view>
<view ref="z-tabs-scroll-view-conatiner" class="z-tabs-scroll-view-conatiner">
<scroll-view ref="z-tabs-scroll-view" class="z-tabs-scroll-view" :scroll-x="true" :scroll-left="scrollLeft" :show-scrollbar="false" :scroll-with-animation="isFirstLoaded" @scroll="scroll">
<view class="z-tabs-list-container" :style="[tabsListStyle]">
<view class="z-tabs-list" :style="[tabsListStyle, {marginTop: -finalBottomSpace+'px'}]">
<view :ref="`z-tabs-item-${index}`" :id="`z-tabs-item-${index}`" class="z-tabs-item" :style="[tabStyle]" v-for="(item,index) in list" :key="index" @click="tabsClick(index,item)">
<view class="z-tabs-item-title-container">
<text :class="{'z-tabs-item-title':true,'z-tabs-item-title-disabled':item.disabled}"
:style="[{color:item.disabled?disabledColor:(currentIndex===index?activeColor:inactiveColor)},item.disabled?disabledStyle:(currentIndex===index?activeStyle:inactiveStyle)]">
{{item[nameKey]||item}}
</text>
<text v-if="item.badge&&_formatCount(item.badge.count).length" class="z-tabs-item-badge" :style="[badgeStyle]">{{_formatCount(item.badge.count)}}</text>
</view>
</view>
</view>
<view class="z-tabs-bottom" :style="[{width: tabsContainerWidth+'px', bottom: finalBottomSpace+'px'}]">
<view ref="z-tabs-bottom-dot" class="z-tabs-bottom-dot"
<!-- #ifndef APP-NVUE -->
:style="[{transform:`translateX(${bottomDotX}px)`,transition:dotTransition,background:activeColor},finalDotStyle]"
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
:style="[{background:activeColor},finalDotStyle]"
<!-- #endif -->
/>
</view>
</view>
</scroll-view>
</view>
<view class="z-tabs-right">
<slot name="right" />
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const weexDom = weex.requireModule('dom');
const weexAnimation = weex.requireModule('animation');
// #endif
import zTabsConfig from './config/index'
//获取默认配置信息
function _gc(key, defaultValue) {
let config = null;
if (zTabsConfig && Object.keys(zTabsConfig).length) {
config = zTabsConfig;
} else {
return defaultValue;
}
const value = config[_toKebab(key)];
return value === undefined ? defaultValue : value;
}
//驼峰转短横线
function _toKebab(value) {
return value.replace(/([A-Z])/g, "-$1").toLowerCase();
}
/**
* z-tabs 标签
* @description 一个简单轻量的tabs标签,全平台兼容,支持nvue、vue3
* @tutorial https://ext.dcloud.net.cn/plugin?name=z-tabs
* @property {Array} list 数据源数组,支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
* @property {Number|String} current 当前选中的index,默认为0
* @property {Number|String} scroll-count list数组长度超过scrollCount时滚动显示(不自动铺满全屏),默认为5
* @property {Number|String} tab-width 自定义每个tab的宽度,默认为0,即代表根据内容自动撑开,单位rpx,支持传100、"100px"或"100rpx"
* @property {Number|String} bar-width 滑块宽度,单位rpx,支持传100、"100px"或"100rpx"
* @property {Number|String} bar-height 滑块高度,单位rpx,支持传100、"100px"或"100rpx"
* @property {Object} bar-style 滑块样式,其中的width和height将被bar-width和bar-height覆盖
* @property {Number|String} bottom-space tabs与底部的间距,单位rpx,支持传100、"100px"或"100rpx"
* @property {String} bar-animate-mode 切换tab时滑块动画模式,与swiper联动时有效,点击切换tab时无效,必须调用setDx。默认为line,即切换tab时滑块宽度保持不变,线性运动。可选值为worm,即为类似毛毛虫蠕动效果
* @property {String} name-key list中item的name(标题)的key,默认为name
* @property {String} value-key list中item的value的key,默认为value
* @property {String} active-color 激活状态tab的颜色
* @property {String} inactive-color 未激活状态tab的颜色
* @property {String} disabled-color 禁用状态tab的颜色
* @property {Object} active-style 激活状态tab的样式
* @property {Object} inactive-style 未激活状态tab的样式
* @property {Object} disabled-style 禁用状态tab的样式
* @property {Number|String} badge-max-count 徽标数最大数字限制,超过这个数字将变成badge-max-count+,默认为99
* @property {Object} badge-style 徽标样式,例如可自定义背景色,字体等等
* @property {String} bg-color z-tabs背景色
* @property {Object} tabs-style z-tabs样式
* @property {Boolean} init-trigger-change 初始化时是否自动触发change事件
* @event {Function(index,value)} change tabs改变时触发,index:当前切换到的index;value:当前切换到的value
* @example <z-tabs :list="list"></z-tabs>
*/
export default {
name: 'z-tabs',
data() {
return {
currentIndex: 0,
currentSwiperIndex: 0,
bottomDotX: -1,
bottomDotXForIndex: 0,
showBottomDot: false,
shouldSetDx: true,
barCalcedWidth: 0,
pxBarWidth: 0,
scrollLeft: 0,
tabsSuperWidth: uni.upx2px(750),
tabsWidth: uni.upx2px(750),
tabsHeight: uni.upx2px(80),
tabsLeft: 0,
tabsContainerWidth: 0,
itemNodeInfos: [],
isFirstLoaded: false,
currentScrollLeft: 0,
changeTriggerFailed: false,
currentChanged: false
};
},
props: {
//数据源数组,支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
list: {
type: Array,
default: function() {
return [];
}
},
//当前选中的index
current: {
type: [Number, String],
default: _gc('current',0)
},
//list数组长度超过scrollCount时滚动显示(不自动铺满全屏)
scrollCount: {
type: [Number, String],
default: _gc('scrollCount',5)
},
//z-tabs样式
tabsStyle: {
type: Object,
default: function() {
return _gc('tabsStyle',{})
}
},
//自定义每个tab的宽度,默认为0,即代表根据内容自动撑开,单位rpx,支持传100、"100px"或"100rpx"
tabWidth: {
type: [Number, String],
default: _gc('tabWidth',0)
},
//滑块宽度,单位rpx,支持传100、"100px"或"100rpx"
barWidth: {
type: [Number, String],
default: _gc('barWidth',45)
},
//滑块高度,单位rpx,支持传100、"100px"或"100rpx"
barHeight: {
type: [Number, String],
default: _gc('barHeight',8)
},
//滑块样式,其中的width和height将被barWidth和barHeight覆盖
barStyle: {
type: Object,
default: function() {
return _gc('barStyle',{});
}
},
//tabs与底部的间距,单位rpx,支持传100、"100px"或"100rpx"
bottomSpace: {
type: [Number, String],
default: _gc('bottomSpace',8)
},
//切换tab时滑块动画模式,与swiper联动时有效,点击切换tab时无效,必须调用setDx。默认为line,即切换tab时滑块宽度保持不变,线性运动。可选值为worm,即为类似毛毛虫蠕动效果
barAnimateMode: {
type: String,
default: _gc('barAnimateMode','line')
},
//list中item的name(标题)的key
nameKey: {
type: String,
default: _gc('nameKey','name')
},
//list中item的value的key
valueKey: {
type: String,
default: _gc('valueKey','value')
},
//激活状态tab的颜色
activeColor: {
type: String,
default: _gc('activeColor','#007AFF')
},
//未激活状态tab的颜色
inactiveColor: {
type: String,
default: _gc('inactiveColor','#666666')
},
//禁用状态tab的颜色
disabledColor: {
type: String,
default: _gc('disabledColor','#bbbbbb')
},
//激活状态tab的样式
activeStyle: {
type: Object,
default: function() {
return _gc('activeStyle',{});
}
},
//未激活状态tab的样式
inactiveStyle: {
type: Object,
default: function() {
return _gc('inactiveStyle',{});
}
},
//禁用状态tab的样式
disabledStyle: {
type: Object,
default: function() {
return _gc('disabledStyle',{});
}
},
//z-tabs背景色
bgColor: {
type: String,
default: _gc('bgColor','white')
},
//徽标数最大数字限制,超过这个数字将变成badgeMaxCount+
badgeMaxCount: {
type: [Number, String],
default: _gc('badgeMaxCount',99)
},
//徽标样式,例如可自定义背景色,字体等等
badgeStyle: {
type: Object,
default: function() {
return _gc('badgeStyle',{})
}
},
//初始化时是否自动触发change事件
initTriggerChange: {
type: Boolean,
default: _gc('initTriggerChange',false)
}
},
mounted() {
this.updateSubviewLayout();
},
watch: {
current: {
handler(newVal) {
this.currentChanged && this._lockDx();
this.currentIndex = newVal;
this._preUpdateDotPosition(this.currentIndex);
if (this.initTriggerChange) {
if (newVal < this.list.length) {
this.$emit('change', newVal, this.list[newVal][this.valueKey]);
}else {
this.changeTriggerFailed = true;
}
}
this.currentChanged = true;
},
immediate: true
},
list: {
handler(newVal) {
this._handleListChange(newVal);
},
immediate: false
},
bottomDotX(newVal) {
if(newVal >= 0){
// #ifndef APP-NVUE
this.showBottomDot = true;
// #endif
this.$nextTick(() => {
// #ifdef APP-NVUE
weexAnimation.transition(this.$refs['z-tabs-bottom-dot'], {
styles: {
transform: `translateX(${newVal}px)`
},
duration: this.showAnimate ? 200 : 0,
delay: 0
})
setTimeout(() => {
this.showBottomDot = true;
},10)
// #endif
})
}
},
finalBarWidth: {
handler(newVal) {
this.barCalcedWidth = newVal;
this.pxBarWidth = this.barCalcedWidth;
},
immediate: true
},
currentIndex: {
handler(newVal) {
this.currentSwiperIndex = newVal;
},
immediate: true
}
},
computed: {
shouldScroll(){
return this.list.length > this.scrollCount;
},
finalTabsHeight(){
return this.tabsHeight;
},
tabStyle(){
const stl = this.shouldScroll ? {'flex-shrink': 0} : {'flex': 1};
if(this.finalTabWidth > 0){
stl['width'] = this.finalTabWidth + 'px';
}else{
delete stl.width;
}
return stl;
},
tabsListStyle(){
return this.shouldScroll ? {} : {'flex':1};
},
showAnimate(){
return this.isFirstLoaded && !this.shouldSetDx;
},
dotTransition(){
return this.showAnimate ? 'transform .2s linear':'none';
},
finalDotStyle(){
return {...this.barStyle, width: this.barCalcedWidth + 'px', height: this.finalBarHeight + 'px', opacity: this.showBottomDot ? 1 : 0};
},
finalTabWidth(){
return this._convertTextToPx(this.tabWidth);
},
finalBarWidth(){
return this._convertTextToPx(this.barWidth);
},
finalBarHeight(){
return this._convertTextToPx(this.barHeight);
},
finalBottomSpace(){
return this._convertTextToPx(this.bottomSpace);
}
},
methods: {
//根据swiper的@transition实时更新底部dot位置
setDx(dx) {
if (!this.shouldSetDx) return;
const isLineMode = this.barAnimateMode === 'line';
const isWormMode = this.barAnimateMode === 'worm';
let dxRate = dx / this.tabsSuperWidth;
this.currentSwiperIndex = this.currentIndex + parseInt(dxRate);
const isRight = dxRate > 0;
const barWidth = this.pxBarWidth;
if(this.currentSwiperIndex !== this.currentIndex){
dxRate = dxRate - (this.currentSwiperIndex - this.currentIndex);
const currentNode = this.itemNodeInfos[this.currentSwiperIndex];
if (!!currentNode){
this.bottomDotXForIndex = this._getBottomDotX(currentNode, barWidth);
}
}
const currentIndex = this.currentSwiperIndex;
let nextIndex = currentIndex + (isRight ? 1 : -1);
nextIndex = Math.max(0, nextIndex);
nextIndex = Math.min(nextIndex, this.itemNodeInfos.length - 1);
const currentNodeInfo = this.itemNodeInfos[currentIndex];
const nextNodeInfo = this.itemNodeInfos[nextIndex];
const nextBottomX = nextNodeInfo ? this._getBottomDotX(nextNodeInfo, barWidth) : 0;
if (isLineMode){
this.bottomDotX = this.bottomDotXForIndex + (nextBottomX - this.bottomDotXForIndex) * Math.abs(dxRate);
} else if (isWormMode) {
if ((isRight && currentIndex >= this.itemNodeInfos.length - 1) || (!isRight && currentIndex <= 0)) return;
const spaceOffset = isRight ? nextNodeInfo.right - currentNodeInfo.left : currentNodeInfo.right - nextNodeInfo.left;
let barCalcedWidth = barWidth + spaceOffset * Math.abs(dxRate);
if (isRight) {
if (barCalcedWidth > nextBottomX - this.bottomDotX + barWidth) {
const barMinusWidth = barWidth + spaceOffset * (1 - dxRate);
this.bottomDotX = this.bottomDotXForIndex + (barCalcedWidth - barMinusWidth) / 2;
barCalcedWidth = barMinusWidth;
}
}else if (!isRight) {
if (barCalcedWidth > this.bottomDotXForIndex + barWidth - nextBottomX){
const barMinusWidth = barWidth + spaceOffset * (1 + dxRate);
barCalcedWidth = barMinusWidth;
this.bottomDotX = nextBottomX;
} else{
this.bottomDotX = this.bottomDotXForIndex - (barCalcedWidth - barWidth);
}
}
barCalcedWidth = Math.max(barCalcedWidth, barWidth);
this.barCalcedWidth = barCalcedWidth;
}
},
//在swiper的@animationfinish中通知z-tabs结束多setDx的锁定,若在父组件中调用了setDx,则必须调用unlockDx
unlockDx() {
this.$nextTick(() => {
this.shouldSetDx = true;
})
},
//更新z-tabs内部布局
updateSubviewLayout(tryCount = 0) {
this.$nextTick(() => {
let delayTime = 10;
// #ifdef APP-NVUE || MP-BAIDU
delayTime = 50;
// #endif
setTimeout(() => {
this._getNodeClientRect('.z-tabs-scroll-view-conatiner').then(res=>{
if (res){
if (!res[0].width && tryCount < 10) {
setTimeout(() => {
tryCount ++;
this.updateSubviewLayout(tryCount);
}, 50);
return;
}
this.tabsWidth = res[0].width;
this.tabsHeight = res[0].height;
this.tabsLeft = res[0].left;
this._handleListChange(this.list);
}
})
this._getNodeClientRect('.z-tabs-conatiner').then(res=>{
if(res && res[0].width){
this.tabsSuperWidth = res[0].width;
}
})
},delayTime)
})
},
//点击了tabs
tabsClick(index,item) {
if (item.disabled) return;
if (this.currentIndex != index) {
this.shouldSetDx = false;
this.$emit('change', index, item[this.valueKey]);
this.currentIndex = index;
this._preUpdateDotPosition(index);
} else {
this.$emit('secondClick',index, item[this.valueKey]);
}
},
//scroll-view滚动
scroll(e){
this.currentScrollLeft = e.detail.scrollLeft;
},
//锁定dx,用于避免在swiper被动触发滚动时候执行setDx中的代码
_lockDx() {
this.shouldSetDx = false;
},
//更新底部dot位置之前的预处理
_preUpdateDotPosition(index) {
// #ifndef APP-NVUE
this.$nextTick(() => {
uni.createSelectorQuery().in(this).select(".z-tabs-scroll-view").fields({
scrollOffset: true
}, data => {
if (data) {
this.currentScrollLeft = data.scrollLeft;
this._updateDotPosition(index);
} else {
this._updateDotPosition(index);
}
}).exec();
})
// #endif
// #ifdef APP-NVUE
this._updateDotPosition(index);
// #endif
},
//更新底部dot位置
_updateDotPosition(index){
if(index >= this.itemNodeInfos.length) return;
this.$nextTick(async ()=>{
let node = this.itemNodeInfos[index];
let offset = 0;
let tabsContainerWidth = this.tabsContainerWidth;
if (JSON.stringify(this.activeStyle) !== '{}') {
const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${index}`,true);
if (nodeRes) {
node = nodeRes[0];
offset = this.currentScrollLeft;
this.tabsHeight = Math.max(node.height + uni.upx2px(28), this.tabsHeight);
tabsContainerWidth = 0;
for(let i = 0;i < this.itemNodeInfos.length;i++){
let oldNode = this.itemNodeInfos[i];
tabsContainerWidth += i === index ? node.width : oldNode.width;
}
}
}
this.bottomDotX = this._getBottomDotX(node, this.finalBarWidth, offset);
this.bottomDotXForIndex = this.bottomDotX;
if (this.tabsWidth) {
setTimeout(()=>{
let scrollLeft = this.bottomDotX - this.tabsWidth / 2 + this.finalBarWidth / 2;
scrollLeft = Math.max(0,scrollLeft);
if (tabsContainerWidth) {
scrollLeft = Math.min(scrollLeft,tabsContainerWidth - this.tabsWidth + 10);
}
if (this.shouldScroll && tabsContainerWidth > this.tabsWidth) {
this.scrollLeft = scrollLeft;
}
this.$nextTick(()=>{
this.isFirstLoaded = true;
})
},200)
}
})
},
// 处理list改变
_handleListChange(newVal) {
this.$nextTick(async ()=>{
if(newVal.length){
let itemNodeInfos = [];
let tabsContainerWidth = 0;
let delayTime = 0;
// #ifdef MP-BAIDU
delayTime = 100;
// #endif
setTimeout(async()=>{
for(let i = 0;i < newVal.length;i++){
const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${i}`,true);
if(nodeRes){
const node = nodeRes[0];
node.left += this.currentScrollLeft;
itemNodeInfos.push(node);
tabsContainerWidth += node.width;
}
if (i === this.currentIndex){
this.itemNodeInfos = itemNodeInfos;
this.tabsContainerWidth = tabsContainerWidth;
this._updateDotPosition(this.currentIndex);
}
}
this.itemNodeInfos = itemNodeInfos;
this.tabsContainerWidth = tabsContainerWidth;
this._updateDotPosition(this.currentIndex);
},delayTime)
}
})
if (this.initTriggerChange && this.changeTriggerFailed && newVal.length) {
if (this.current < newVal.length) {
this.$emit('change', this.current, newVal[this.current][this.valueKey]);
}
}
},
//根据node获取bottomX
_getBottomDotX(node, barWidth = this.finalBarWidth, offset = 0){
return node.left + node.width / 2 - barWidth / 2 + offset - this.tabsLeft;
},
//获取节点信息
_getNodeClientRect(select, withRefArr = false) {
// #ifdef APP-NVUE
select = select.replace('.', '').replace('#', '');
const ref = withRefArr ? this.$refs[select][0] : this.$refs[select];
return new Promise((resolve, reject) => {
if (ref) {
weexDom.getComponentRect(ref, option => {
if (option && option.result) {
resolve([option.size]);
} else resolve(false);
})
} else resolve(false);
});
return;
// #endif
const res = uni.createSelectorQuery().in(this);
res.select(select).boundingClientRect();
return new Promise((resolve, reject) => {
res.exec(data => {
resolve((data && data != '' && data != undefined && data.length) ? data : false);
});
});
},
//格式化badge中的count
_formatCount(count) {
if (!count) return '';
if (count > this.badgeMaxCount) {
return this.badgeMaxCount + '+';
}
return count.toString();
},
//将文本的px或者rpx转为px的值
_convertTextToPx(text) {
const dataType = Object.prototype.toString.call(text);
if (dataType === '[object Number]') {
return uni.upx2px(text);
}
let isRpx = false;
if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) {
text = text.replace('rpx', '').replace('upx', '');
isRpx = true;
} else if (text.indexOf('px') !== -1) {
text = text.replace('px', '');
} else {
text = uni.upx2px(text);
}
if (!isNaN(text)) {
if (isRpx) return Number(uni.upx2px(text));
return Number(text);
}
return 0;
}
}
}
</script>
<style scoped>
.z-tabs-conatiner{
/* #ifndef APP-NVUE */
overflow: hidden;
display: flex;
width: 100%;
/* #endif */
/* #ifdef APP-NVUE */
width: 750rpx;
/* #endif */
flex-direction: row;
height: 80rpx;
}
.z-tabs-scroll-view-conatiner{
flex: 1;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
height: 100%;
width: 100%;
/* #endif */
flex-direction: row;
}
/* #ifndef APP-NVUE */
.z-tabs-scroll-view ::-webkit-scrollbar {
display: none;
-webkit-appearance: none;
width: 0 !important;
height: 0 !important;
background: transparent;
}
/* #endif */
.z-tabs-scroll-view{
flex-direction: row;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
width: 100%;
height: 100%;
/* #endif */
flex: 1;
}
.z-tabs-list-container{
position: relative;
/* #ifndef APP-NVUE */
height: 100%;
/* #endif */
}
.z-tabs-list,.z-tabs-list-container{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.z-tabs-item{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px 20rpx;
}
.z-tabs-item-title-container{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.z-tabs-item-title{
font-size: 30rpx;
}
.z-tabs-item-title-disabled{
/* #ifndef APP-NVUE */
cursor: not-allowed;
/* #endif */
}
.z-tabs-item-badge{
margin-left: 8rpx;
background-color: #ec5b56;
color: white;
font-size: 22rpx;
border-radius: 100px;
padding: 0rpx 10rpx;
}
.z-tabs-bottom{
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.z-tabs-bottom-dot{
border-radius: 100px;
}
.z-tabs-left,.z-tabs-right{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
</style>
{
"id": "z-tabs",
"name": "z-tabs",
"displayName": "【z-tabs】一个简单轻量的tabs组件",
"version": "0.2.5",
"description": "全平台兼容,支持nvue、vue3",
"keywords": [
"tabs"
],
"repository": "https://github.com/SmileZXLee/uni-z-tabs",
"engines": {
"HBuilderX": "^3.0.7"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "393727164"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@zxlee/z-tabs",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "y",
"快手": "y",
"飞书": "y",
"京东": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
# z-tabs
[![version](https://img.shields.io/badge/version-0.2.5-blue)](https://github.com/SmileZXLee/uni-z-tabs)
[![license](https://img.shields.io/github/license/SmileZXLee/uni-z-tabs)](https://en.wikipedia.org/wiki/MIT_License)
***
### 反馈qq群(点击加群):[790460711](https://jq.qq.com/?_wv=1027&k=vU2fKZZH)
***
## z-tabs文档
### 安装
#### 方式1(推荐):通过uni_modules安装,在插件市场中点击右上角【使用HbuilderX导入插件】即可。
***
#### 方式2:通过npm安装
```bash
//若项目之前未使用npm管理依赖(项目根目录下无package.json文件),先在项目根目录执行命令初始化npm工程
npm init -y
//安装
npm install @zxlee/z-tabs --save
//更新
npm update @zxlee/z-tabs
```
然后在`pages.json`中配置`easycom`(注意:下方配置只有在使用npm安装时才需要配置!!!!!)
```json
"easycom": {
"^z-tabs": "@zxlee/z-tabs/components/z-tabs/z-tabs.vue"
}
```
### 基本使用
```html
<template>
<z-tabs :list="list"></z-tabs>
</template>
<script>
export default {
data() {
return {
list: []
}
},
onLoad() {
const list = [];
for(let i = 0;i < 10;i++) {
// list内item支持字符串或对象,下方这个是字符串
list.push('tab标题');
// 如果要展示徽标数,则list中item的数据结构应为:
list.push({
name: 'tab标题',
badge: {
// 设置徽标数为6
count: 6
},
// 可以禁用某个item
disabled: true
});
}
this.list = list;
}
}
</script>
```
### props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| :------------------ | :----------------------------------------------------------- | :------------- | :------ | :----- |
| list | 数据源数组,支持形如`['tab1','tab2']`的格式或`[{name:'tab1',value:1}]`的格式 | Array | [] | - |
| current | 当前选中的index | Number\|String | 0 | - |
| scroll-count | list数组长度超过scrollCount时滚动显示(不自动铺满全屏) | Number\|String | 5 | - |
| tab-width | 自定义每个tab的宽度,默认为0,即代表根据内容自动撑开,单位rpx,支持传100、"100px"或"100rpx" | Number\|String | 0 | 0 |
| bar-width | 滑块宽度,单位rpx,支持传100、"100px"或"100rpx" | Number\|String | 45rpx | - |
| bar-height | 滑块高度,单位rpx,支持传100、"100px"或"100rpx" | Number\|String | 8rpx | - |
| bar-style | 滑块样式,其中的`width``height`将被`bar-width``bar-height`覆盖 | Object | {} | - |
| bottom-space | tabs与底部的间距,单位rpx,支持传100、"100px"或"100rpx" | Number\|String | 8rpx | - |
| bar-animate-mode | 【v0.1.5起支持】切换tab时滑块动画模式,与`swiper`联动时有效,点击切换tab时无效,必须调用`setDx`。默认为`line`,即切换tab时滑块宽度保持不变,线性运动。可选值为`worm`,即为类似毛毛虫蠕动效果 | String | line | worm |
| name-key | list中item的name(标题)的key | String | name | - |
| value-key | list中item的value的key | String | value | - |
| active-color | 激活状态tab的颜色 | String | #007AFF | - |
| inactive-color | 未激活状态tab的颜色 | String | #666666 | - |
| disabled-color | 禁用状态tab的颜色 | String | #bbbbbb | - |
| active-style | 激活状态tab的样式 | Object | {} | - |
| inactive-style | 未激活状态tab的样式 | Object | {} | - |
| disabled-style | 禁用状态tab的样式 | Object | {} | - |
| badge-max-count | 徽标数最大数字限制,超过这个数字将变成`badge-max-count`+ | Number\|String | 99 | - |
| badge-style | 徽标样式,例如可自定义背景色,字体等等 | Object | {} | - |
| bg-color | z-tabs背景色 | String | white | - |
| tabs-style | z-tabs样式 | Object | {} | - |
| init-trigger-change | 初始化时是否自动触发change事件 | Boolean | true | false |
### events
| 事件名 | 说明 | 回调参数 |
| ------------ | -------------------- | ------------------------------------------------------------ |
| @change | tabs改变(点击)时触发 | `参数1`:index(当前切换到的index);<br/>`参数2`:value(当前切换到的value) |
| @secondClick | tabs二次点击时触发 | `参数1`:index(当前切换到的index);<br/>`参数2`:value(当前切换到的value) |
### methods
| 方法名 | 说明 | 参数 |
| ------------------- | ------------------------------------------------------------ | -------------------------------------- |
| setDx | 根据swiper的`@transition`实时更新底部dot位置 | swiper的`@transition`中的`e.detail.dx` |
| unlockDx | 在swiper的`@animationfinish`中通知`z-tabs`结束多`setDx`的锁定,若在父组件中调用了`setDx`,则必须调用`unlockDx` | - |
| updateSubviewLayout | 在nvue+安卓中,若在cell中使用`z-tabs`,且页面加载时cell在屏幕之外,因cell的复用机制,可能导致`z-tabs`内部的布局失效:例如底部bar无法显示,此时可在list滚动到一定区域内(例如快显示`z-tabs`)的时候调用此方法以更新其内部布局。其他情况无需调用! | - |
### slots
| 名称 | 说明 |
| :---- | ------------ |
| left | tabs左侧插槽 |
| right | tabs右侧插槽 |
### 支持全局配置
*`/z-tabs/components/z-tabs/config/index.js`文件中进行配置
```js
export default {
'active-color': 'red'
}
```
### 【v0.1.4起支持】底部dot与swiper联动演示
```html
<template>
<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
<swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
xxx
</swiper-item>
</swiper>
<template>
<script>
export default {
data() {
return {
tabList: ['测试1','测试2','测试3','测试4'],
current: 0, // tabs组件的current值,表示当前活动的tab选项
};
},
methods: {
//tabs通知swiper切换
tabsChange(index) {
this.current = index;
},
//swiper滑动中
swiperTransition(e) {
this.$refs.tabs.setDx(e.detail.dx);
},
//swiper滑动结束
swiperAnimationfinish(e) {
this.current = e.detail.current;
this.$refs.tabs.unlockDx();
}
}
}
</script>
```
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment