【add】滚动通知支持传入list obj对象列表,可以指定显示对应keyValue对应的列表,可以自定义key的名字通过:keyName='key'传入,默认是名字为‘key’,可以指定显示的value的名称,通过:valueName='value' 传入,默认值的名称是value

This commit is contained in:
zhengliming
2024-01-21 23:56:54 +08:00
parent 374a74ac90
commit 557dbb313f

View File

@@ -12,7 +12,7 @@
:fontColor="fontColor"
:fontSize="fontSize"
:fontUnit="fontUnit"
:list="list"
:list="valueList"
:show="show"
:playStatus="playStatus"
:leftIcon="leftIcon"
@@ -38,7 +38,7 @@
:fontColor="fontColor"
:fontSize="fontSize"
:fontUnit="fontUnit"
:list="list"
:list="valueList"
:show="show"
:mode="mode"
:playStatus="playStatus"
@@ -76,6 +76,18 @@
return []
}
},
keyName:{
type:String,
default: 'key'
},
valueName:{
type:String,
default: 'value'
},
keyValue:{
type:String,
default: undefined
},
// 是否显示
show: {
type: Boolean,
@@ -167,24 +179,61 @@
computed: {
// 当设置了show为false或者autoHidden为true且list为空时不显示通知
showNotice() {
if (this.show === false || (this.autoHidden && this.list.length === 0)) return false
else return true
return !(this.show === false || (this.autoHidden && this.list.length === 0))
}
},
watch:{
keyValue:{
handler(value) {
this.loadList();
},
deep: true
},
},
data() {
return {
//显示的值
valueList:[],
}
},
mounted() {
this.loadList();
},
methods: {
// 点击了通知栏
click(index) {
this.$emit('click', index)
let value = this.findValue(index);
//如果是对象,返回传入的对象
if (this.isObj(value)){
this.$emit('click', value)
}else {
this.$emit('click', index)
}
},
findValue(findIndex){
let objList = []
for (let index in this.list){
let v = this.list[index];
if (this.isObj(v)){
//判断是否指定key显示如果是则显示指定的列表否则就返回所有列表
if (this.keyValue == undefined || v[this.keyName] == this.keyValue){
objList.push(v);
}
}else{
//兼容旧的,旧的直接返回下表
return findIndex;
}
}
return findIndex >= objList.length ? undefined : objList[findIndex];
},
// 点击了关闭按钮
close() {
this.$emit('close')
},
//判断元素是否是对象
isObj(value){
return typeof(value) === 'object';
},
// 点击了左边图标
clickLeftIcon() {
this.$emit('clickLeft')
@@ -196,6 +245,21 @@
// 一个周期滚动结束
end() {
this.$emit('end')
},
loadList() {
let tmpList = [];
for (let index in this.list) {
let v = this.list[index];
if (this.isObj(v)) {
//判断是否指定key显示如果是则显示指定的列表否则就返回所有列表
if (this.keyValue == undefined || v[this.keyName] == this.keyValue) {
tmpList.push(v[this.valueName]);
}
} else {
tmpList.push(v);
}
}
this.valueList = tmpList;
}
}
}