| | |
|---|
| | | <template> |
|---|
| | | <div class="quotes-list pt-5 pb-60 pl-5 pr-5" id="cryptos"> |
|---|
| | | |
|---|
| | | <Head></Head> |
|---|
| | | <Head @search="onSearch"></Head> |
|---|
| | | <list-quatation :listData="qList" :tabActive="2" /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | |
|---|
| | | //#region 行情数据---------------------------------------- |
|---|
| | | let qList = ref([]) |
|---|
| | | let qListCope = ref([]) // 备份数据 |
|---|
| | | let key = ref('') // 搜索关键词 |
|---|
| | | let timeout = ref(null) |
|---|
| | | const coinArr = computed(() => store.getters['home/coinArr']); |
|---|
| | | |
|---|
| | |
|---|
| | | if (!(list instanceof Array)) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | qList.value = list; |
|---|
| | | |
|---|
| | | // 通过关键字进行筛选 |
|---|
| | | if (key.value) { |
|---|
| | | qList.value = list.filter(item => { |
|---|
| | | return item.symbol_data.toLowerCase().includes(key.value.toLowerCase()) || item.name.toLowerCase().includes(key.value.toLowerCase()) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | qList.value = list |
|---|
| | | } |
|---|
| | | qListCope.value = list; // 备份数据 |
|---|
| | | |
|---|
| | | if (timeout.value) { |
|---|
| | | clearTimeout(timeout.value) |
|---|
| | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | //#endregion---------------------------------------------- |
|---|
| | | |
|---|
| | | // 搜索 |
|---|
| | | const onSearch = (val) => { |
|---|
| | | key.value = val |
|---|
| | | |
|---|
| | | if (!val) { |
|---|
| | | qList.value = qListCope.value |
|---|
| | | return |
|---|
| | | } |
|---|
| | | let newList = qListCope.value.filter(item => { |
|---|
| | | return item.symbol_data.toLowerCase().includes(val.toLowerCase()) || item.name.toLowerCase().includes(val.toLowerCase()) |
|---|
| | | }) |
|---|
| | | qList.value = newList |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .quotes-list { |
|---|
