You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.4 KiB
83 lines
1.4 KiB
3 weeks ago
|
<template>
|
||
|
|
<view class="container-nav" :style="`width: ${width}px;height: ${(conheight)}px`">
|
||
|
|
<!-- <view class="uni-badge badge" :style="`background-color: ${badgeColor};`">
|
||
|
|
{{badge}}
|
||
|
|
</view> -->
|
||
|
|
<view class="nav" :style="`border: ${border};width: ${width}px;height: ${height}px;background:${background}`" @click="click">
|
||
|
|
<!-- <image :src="require(src)" /> -->
|
||
|
|
<!-- <text><slot/></text> -->
|
||
|
|
<slot name="image"/>
|
||
|
|
</view>
|
||
|
|
<slot name="text"/>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
width: {
|
||
|
|
default: 100,
|
||
|
|
type: [String, Number]
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
default: 100,
|
||
|
|
type: [String, Number]
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
default: '#FF0',
|
||
|
|
type: [String]
|
||
|
|
},
|
||
|
|
src: {
|
||
|
|
default: '',
|
||
|
|
type: [String]
|
||
|
|
},
|
||
|
|
badge: {
|
||
|
|
default: 0,
|
||
|
|
type: [String, Number]
|
||
|
|
},
|
||
|
|
border: {
|
||
|
|
default: '0px solid #FFF',
|
||
|
|
type: [String]
|
||
|
|
},
|
||
|
|
badgeColor:{
|
||
|
|
default: '#f1f1f1',
|
||
|
|
type: [String]
|
||
|
|
},
|
||
|
|
data: ''
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
conheight (){
|
||
|
|
return Number(this.height) + 14 + 30;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
click() {
|
||
|
|
this.$emit('click', this.data)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.container-nav {
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.badge {
|
||
|
|
position: absolute;
|
||
|
|
top: -7px;
|
||
|
|
right: -17px;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #4cd964;
|
||
|
|
}
|
||
|
|
.nav {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|