Skip to content

M
mocp-uniapp
Commit 8c14f14d by pangchong
Options

feat: 布置工作开发

parent 7ee1e50c
Showing with 428 additions and 297 deletions
src/components/global-page-swiper/global-page-swiper.vue
......@@ -11,7 +11,16 @@
</template>
</global-navbar>
<!-- 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>
</template>
<!-- 滚动内容 -->
......@@ -77,6 +86,11 @@ const ps = defineProps({
type: Number,
default: 0
},
//tab数据搜索字段
tabValueField: {
type: String,
default: 'status'
},
//tab数据name
nameKey: {
type: String,
......@@ -87,11 +101,6 @@ const ps = defineProps({
type: String,
default: 'value'
},
//tab数据搜索字段
tabValueField: {
type: String,
default: 'status'
},
//是否展示自定义导航栏
showNavbar: {
type: Boolean,
......@@ -144,24 +153,20 @@ const getStyle = computed(() => {
}
return style
})
const tabs = ref()
const current = ref(ps.current)
//返回
const goBack = () => {
uni.navigateBack()
}
// tabs通知swiper切换
const tabsChange = (index) => {
current.value = index
const tabsChange = (item) => {
current.value = item.index
}
// swiper滑动中
const swiperTransition = (e) => {
tabs.value.setDx(e.detail.dx)
}
const swiperTransition = (e) => {}
// swiper滑动结束
const swiperAnimationfinish = (e) => {
current.value = e.detail.current
tabs.value.unlockDx()
}
//获取列表刷新对象
const pagingArr = ref([])
......
src/components/global-tabs/global-tabs.vue
......@@ -6,7 +6,7 @@
:inactiveStyle="inactiveStyle"
:lineWidth="lineWidth"
:lineHeight="lineHeight"
:itemStyle="itemStyle"
:itemStyle="getItemStyle"
:current="current"
:keyName="keyName"
@click="handleClick"
......@@ -19,6 +19,8 @@
</template>
<script setup>
import { computed } from 'vue'
const es = defineEmits(['handleClick', 'handleChange'])
const ps = defineProps({
list: {
......@@ -53,11 +55,17 @@ const ps = defineProps({
type: [Number, String],
default: 3
},
width: {
type: [Number, String],
default: 'auto'
},
height: {
type: [Number, String],
default: 88
},
itemStyle: {
type: [String, Object],
default: () => {
return { height: '88rpx' }
}
default: () => {}
},
current: {
type: [Number, String],
......@@ -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) => {
es('handleClick', item, index)
}
......
src/pages.json
......@@ -103,6 +103,41 @@
"style": {
"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": {
......
src/pages/panel/appraisal-record/edit.vue
......@@ -183,6 +183,7 @@ const handleSubmit = async () => {
if (res.code == 200) {
uni.navigateBack()
appraisalRecordStore.getRqmDetails()
uni.$emit('appraisalRecordReload')
uni.$message.showToast(res.message)
} else {
uni.$message.showToast(res.message)
......
src/pages/panel/assign-work/components/card-details-footer.vue 0 → 100644
<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>
src/pages/panel/assign-work/components/card-details-item.vue 0 → 100644
<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>
src/pages/panel/assign-work/components/card-details.vue
......@@ -48,8 +48,5 @@ const ps = defineProps({
}
}
}
&-content {
padding: 16rpx 0;
}
}
</style>
src/pages/panel/assign-work/constants/details.scss
......@@ -64,3 +64,6 @@
justify-content: space-between;
}
}
.card-empty {
padding-top: 16rpx;
}
src/pages/panel/assign-work/details.vue
......@@ -50,10 +50,29 @@
</view>
</view>
<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>
</view> -->
</card-details>
<card-details title="领导批示" titleIcon="drive">
<view class="card-empty">
<global-empty></global-empty>
</view>
</card-details>
</global-page>
<!-- 责任单位弹出层 -->
......@@ -63,6 +82,8 @@
<script setup>
import { ref } from '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'
//责任公司弹框
......
src/pages/panel/assign-work/edit-approval.vue 0 → 100644
<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>
src/pages/panel/assign-work/edit-decompose.vue 0 → 100644
<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>
src/pages/panel/assign-work/edit-followUpFeedback.vue 0 → 100644
<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>
src/pages/panel/assign-work/edit-gzFeedback.vue 0 → 100644
<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>
src/pages/panel/assign-work/edit-validate.vue 0 → 100644
<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>
src/pages/panel/assign-work/edit-work.vue
......@@ -25,7 +25,7 @@
<view class="plan">
<view class="plan-title">
<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="text">添加</view>
</view>
......@@ -89,6 +89,9 @@
<script setup>
import { ref } from 'vue'
const goTo = () => {
uni.navigateTo({ url: 'edit-decompose' })
}
const value = ref(true)
const change = (e) => {
console.log(e)
......
src/static/font/demo_index.html
......@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box">
<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>
<div class="name">navbarright</div>
<div class="code-name">&amp;#xe6dc;</div>
......@@ -132,9 +138,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1716888584997') format('woff2'),
url('iconfont.woff?t=1716888584997') format('woff'),
url('iconfont.ttf?t=1716888584997') format('truetype');
src: url('iconfont.woff2?t=1716962655386') format('woff2'),
url('iconfont.woff?t=1716962655386') format('woff'),
url('iconfont.ttf?t=1716962655386') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -161,6 +167,15 @@
<ul class="icon_lists dib-box">
<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>
<div class="name">
navbarright
......@@ -279,6 +294,14 @@
<li class="dib">
<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>
</svg>
<div class="name">navbarright</div>
......
src/static/font/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 4550048 */
src: url('iconfont.woff2?t=1716888584997') format('woff2'),
url('iconfont.woff?t=1716888584997') format('woff'),
url('iconfont.ttf?t=1716888584997') format('truetype');
src: url('iconfont.woff2?t=1716962655386') format('woff2'),
url('iconfont.woff?t=1716962655386') format('woff'),
url('iconfont.ttf?t=1716962655386') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-delete-01:before {
content: "\e6de";
}
.icon-navbarright:before {
content: "\e6dc";
}
......
src/static/font/iconfont.json
......@@ -6,6 +6,13 @@
"description": "",
"glyphs": [
{
"icon_id": "40524214",
"name": "delete-01",
"font_class": "delete-01",
"unicode": "e6de",
"unicode_decimal": 59102
},
{
"icon_id": "40514045",
"name": "navbarright",
"font_class": "navbarright",
......
src/uni_modules/z-tabs/changelog.md deleted 100644 → 0
## 0.2.5（2023-01-09）
修复可能出现的可能出现的与swiper联动时报错node不存在的bug
src/uni_modules/z-tabs/components/z-tabs/config/index.js deleted 100644 → 0
// 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
src/uni_modules/z-tabs/package.json deleted 100644 → 0
{
"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
src/uni_modules/z-tabs/readme.md deleted 100644 → 0
# 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