<template> <view class="check-list-pages"> <view> <view class="selList" v-for="(item, index) in list" :key="index" > <view class="radios" @click="chooseItem(item)"> <radio v-if="types=='radio'" :checked="item.checked" :value="item.id" /> <checkbox v-if="types=='checkbox'" :checked="item.checked" :value="item.id" /> <text>{{item[titleKeys]}}</text> </view> <view class="details" @click="rightClick(item)"> <slot name="right"></slot> <u-icon v-if="showArrow&&types!='views'" name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888"></u-icon> </view> </view> </view> <!-- 选择按钮 --> <view v-if="types=='checkbox'" @click="kpOk" class="kp-ok"> 确认选择 </view> </view> </template> <script> export default{ name: 'UniCheckList', props: { listData: { type: Array, default: function(){ return [] } }, // 类型 radio 或 checkbox 或 views 指 只是展示列表 types:{ type: String, default: 'radio' }, // 标题显示的字段 titleKeys:{ type: String, default: 'name' }, // 是否显示右边箭头 showArrow:{ type: Boolean, default: true } }, data() { return { list: this.listData, value: [] } }, watch: { listData(newValue, oldValue) { this.list = newValue } }, mounted() { this.hasCheck() }, methods: { hasCheck(){ this.list.map(item => { let a = this.value.indexOf(item.id) item.checked = a >= 0 }) this.list.splice() }, // 选中 chooseItem(item) { // 单选 if(this.types == 'radio'){ this.value[0] = item.id this.$emit('ok',this.value) }else{ // 取消选中 if(item.checked){ let index = this.value.indexOf(item.id) this.value.splice(index,1) }else{ this.value.push(item.id) } } this.hasCheck() }, rightClick(item){ this.$emit('rightClick',item) }, kpOk(){ this.$emit('ok',this.value) } }, } </script> <style lang="less"> .check-list-pages{ height: 100%; display: flex; flex-direction: column; > view{ &:first-child{ flex-grow: 1; } } } .selList{ width: 100%; border-bottom: 1px solid #eee; display: flex; align-items: center; .radios{ display: flex; align-items: center; flex-grow: 1; width: 50%; padding: 26upx 20upx; &:active{ background-color: #F8F8F8; } text{ word-break: break-all; } } .details{ color: #007AFF; padding-right: 20upx; display: flex; align-items: center; &:active{ color: #D9363E; } } } .kp-ok{ text-align: center; padding: 26upx; background: #55aaff; color: #fff; font-size: 18px; } </style>