mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 08:14:01 +08:00
【add】滚动通知支持传入list obj对象列表,可以指定显示对应keyValue对应的列表,可以自定义key的名字通过:keyName='key'传入,默认是名字为‘key’,可以指定显示的value的名称,通过:valueName='value' 传入,默认值的名称是value
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user