82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<block v-for="(item,index) in list" :key="index">
|
||
|
|
<view @tap="chooseEv(item.url,index)" class="disjbac fon28" :class="[ifLastLine ? 'bbot' : 'borbot',ifIcon ? 'pad-sx25' : 'pad-sx25']" :style="{borderBottomColor: ifLine ? linec : '#FFFFFF'}">
|
||
|
|
<view class="disac flexs pad-y40">
|
||
|
|
<image class="mar-y20 flexs" v-if="item.iconsrc && ifIcon" :src="item.iconsrc" mode="aspectFill" lazy-load :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"></image>
|
||
|
|
<view :style="{color:titlec,fontSize: fonts+'rpx'}" class="clips1">{{item.title}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="disac">
|
||
|
|
<view v-if="item.content" class="clips1" :style="{color:item.contentColor}">{{item.content}}</view>
|
||
|
|
<i v-if="item.ifNext" class="icon icon-next" style="color: #999999;font-size: 28rpx;margin-left: 10rpx;"></i>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'column-function',
|
||
|
|
props:{
|
||
|
|
list:{
|
||
|
|
type:Array,
|
||
|
|
default:()=>{
|
||
|
|
return [
|
||
|
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
|
||
|
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
|
||
|
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 标题颜色
|
||
|
|
titlec:{
|
||
|
|
type:String,
|
||
|
|
default:'#000000'
|
||
|
|
},
|
||
|
|
// 是否显示左侧图标
|
||
|
|
ifIcon:{
|
||
|
|
type:Boolean,
|
||
|
|
default:false
|
||
|
|
},
|
||
|
|
// 是否显示下划线
|
||
|
|
ifLine:{
|
||
|
|
type:Boolean,
|
||
|
|
default:true
|
||
|
|
},
|
||
|
|
// 下划线颜色
|
||
|
|
linec:{
|
||
|
|
type:String,
|
||
|
|
default:"#EEEEEE"
|
||
|
|
},
|
||
|
|
// 是否显示最后一条下划线
|
||
|
|
ifLastLine:{
|
||
|
|
type:Boolean,
|
||
|
|
default:true
|
||
|
|
},
|
||
|
|
fonts:{
|
||
|
|
type:String,
|
||
|
|
default:'28rpx'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
// 列表选择事件
|
||
|
|
chooseEv(url,index) {
|
||
|
|
// if(url) {
|
||
|
|
// uni.navigateTo({url})
|
||
|
|
// }
|
||
|
|
// 抛出事件
|
||
|
|
this.$emit('chooseEv',{url,index})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|