目录
1、封装好的组件使用方式。
<!-- -->
<template>
<div class=''>
<GetBagTabs class="tabs" v-model="activeIndex">
<GetBagTab title="扫码取袋" name="1">
扫码取袋展示内容
</GetBagTab>
<GetBagTab title="支付取袋" name="2">
支付取袋展示内容
</GetBagTab>
</GetBagTabs>
</div>
</template>
<script>
import GetBagTabs from './components/GetBagTabs'
import GetBagTab from './components/GetBagTab'
export default {
name: '',
components: {
GetBagTabs,
GetBagTab
},
directives: {},
filters: {},
mixins: [],
model: {},
props: {},
data () {
return {
activeIndex: 2
}
},
computed: {},
watch: {},
beforeCreate () {},
created () {
},
beforeMount () {},
mounted () {
},
beforeUpdate () {},
updated () {},
activated () {},
deactivated () {},
beforeDestroy () {},
destroyed () {},
// 方法集合
methods: {
}
}
</script>
<style rel='stylesheet/less' lang='less' scoped>
//@import url();
</style>
2、tabs的封装代码。
<!-- 取袋方式的tab组件 -->
<template>
<div ref="tabs" class="way_taps">
<!-- tabs导航区 -->
<div class="tabs_wrap">
<div class="tab" :class="{'active': value === item.name}" v-for="(item, i) of tabList" :key="i" @click="chooseTab(i)">
{{item.title}}
</div>
</div>
<!-- 展示内容的内容区 -->
<div class="content_wrap">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'GetBagTabs',
components: {},
directives: {},
filters: {},
mixins: [],
model: {
prop: 'value',
event: 'click'
},
props: {
// v-model绑定的值,如果有tab中有name对应name,没有则对应index
value: {
type: [String, Number],
default: 0
}
},
data () {
return {
activeIndex: 0,
tabComponentsList: [],
tabList: []
}
},
computed: {},
watch: {
value: {
handler (n, o) {
console.log('valuevalue', n, o)
console.log('tabComponentsList', this.tabComponentsList)
this.updatedTab()
},
immediate: true
}
},
beforeCreate () {},
created () {
},
beforeMount () {},
mounted () {
this.getTabList()
},
beforeUpdate () {},
updated () {},
activated () {},
deactivated () {},
beforeDestroy () {},
destroyed () {},
// 方法集合
methods: {
// 切换tab时的更新限时对应tab内容
updatedTab () {
this.tabComponentsList.forEach((item, index) => {
console.log('item', item)
let matchName = item.name || index
console.log('matchName', matchName)
if (this.value === matchName) {
console.log('=== matchName', matchName)
item.showContent = true
} else {
item.showContent = false
}
})
},
chooseTab (index) {
let tab = this.tabList[index]
let name = tab.name
let title = tab.title
this.activeIndex = index
this.$emit('click', name, title)
},
getTabList () {
this.tabComponentsList = this.$children.filter(item => item.$options.name === 'GetBagTab')
this.tabList = this.tabComponentsList.map((item, index) => {
return {
title: item.title,
name: item.name || index
}
})
// 解决首次加载不更新显示问题
this.updatedTab()
}
}
}
</script>
<style rel='stylesheet/less' lang='less' scoped>
//@import url();
.way_taps {
text-align: center;
.tabs_wrap {
height: 0.7rem;
line-height: 0.7rem;
background-color: #f3f3f3;
border-radius: 40px;
display: inline-flex;
margin-top: 0.2rem;
color: #8c8c8c;
box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.11);
.tab {
padding: 0 0.4rem;
}
.active {
color: #fff;
background-color: #46CB71;
border-radius: 40px;
}
}
.content_wrap {
}
}
</style>
3、单个tab的封装。
<!-- 取袋方式的tab组件 -->
<template>
<div ref="tab" class="tap" v-show="showContent">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'GetBagTab',
components: {},
directives: {},
filters: {},
mixins: [],
model: {},
props: {
// tab的标签栏。
title: {
type: String,
default: ''
}
},
data () {
return {
showContent: false
}
},
computed: {},
watch: {},
beforeCreate () {},
created () {
},
beforeMount () {},
mounted () {
},
beforeUpdate () {},
updated () {},
activated () {},
deactivated () {},
beforeDestroy () {},
destroyed () {},
// 方法集合
methods: {
payGetBag () {},
qrcodeGetBag () {}
}
}
</script>
<style rel='stylesheet/less' lang='less' scoped>
//@import url();
.tap {
}
</style>