github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

重构CheckBox组件

pull/96/head
lyswhut 2019-08-18 15:18:05 +08:00
parent 6e07719c2c
commit ba8991a034
8 changed files with 138 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
publish/changeLog.md
View File

@ -0,0 +1,3 @@
### 优化
- 重构checkbox组件

4
src/renderer/assets/styles/index.less
View File

@ -12,6 +12,10 @@
.mixin-ellipsis-1;
}
.center {
text-align: center;
}
.break {
word-break: break-all;
}

5
src/renderer/components/core/Icons.vue
View File

File diff suppressed because one or more lines are too long

94
src/renderer/components/material/Checkbox.vue
View File

@ -1,18 +1,26 @@
<template lang="pug">
div(:class="$style.checkbox")
input(:type="need ? 'radio' : 'checkbox'" :id="id" :value="target" :name="name" @change="change" v-model="val")
input(:type="need ? 'radio' : 'checkbox'" :id="id" :value="value" :name="name" @change="change" v-model="bool")
label(:for="id" :class="$style.content")
div
div(v-if="indeterminate")
svg(v-show="indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
use(xlink:href='#icon-check-indeterminate')
svg(v-show="!indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 0 448 512' space='preserve')
use(xlink:href='#icon-check-true')
div(v-else)
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
use(xlink:href='#icon-check')
span
slot
use(xlink:href='#icon-check-true')
span(v-if="label != null") {{label}}
</template>
<script>
export default {
model: {
prop: 'checked',
event: 'input',
},
props: {
target: {},
checked: {},
value: {},
id: {
type: String,
@ -25,41 +33,69 @@ export default {
type: Boolean,
default: false,
},
label: {},
indeterminate: {
type: Boolean,
default: false,
},
},
data() {
return {
val: false,
bool: false,
}
},
watch: {
value(n) {
if (this.target && n !== this.target) {
this.val = this.need
? n === this.target
? this.target
: false
: n === this.target
} else if (n !== this.val) {
this.val = n
}
checked(n) {
this.setValue(n)
},
},
mounted() {
if (this.target) {
this.val = this.need
? this.value === this.target
? this.target
: false
: this.value === this.target
} else {
this.val = this.value
}
this.setValue(this.checked)
},
methods: {
change() {
let val = this.target == null ? this.val : this.val ? this.target : null
this.$emit('input', val)
this.$emit('change', val)
let checked
if (Array.isArray(this.checked)) {
checked = [...this.checked]
const index = checked.indexOf(this.value)
if (index < 0) {
checked.push(this.value)
} else {
checked.splice(index, 1)
}
} else if (typeof this.checked == 'string') {
checked = this.bool ? this.value : ''
} else if (typeof this.checked == 'boolean') {
let bool = this.bool
if (this.indeterminate) {
bool = true
this.$nextTick(() => {
this.bool = true
})
}
checked = bool
}
this.$emit('input', checked)
this.$emit('change', checked)
},
setValue(value) {
let bool
if (Array.isArray(value)) {
bool = value.includes(this.value)
} else {
switch (typeof value) {
case 'string':
bool = value === this.value
break
case 'boolean':
bool = value
break
default:
return
}
}
this.bool = this.need ? bool && this.value : bool
},
},
}

2
src/renderer/utils/music/kw/leaderboard.js
View File

@ -140,7 +140,7 @@ export default {
size: null,
}
}
types.reverse()
// types.reverse()
return {
singer: item.artist,
name: item.name,

9
src/renderer/utils/request.js
View File

@ -4,7 +4,7 @@ import { debugRequest } from './env'
// import fs from 'fs'
const fatchData = (url, method, options, callback) => {
console.log('---start---', url)
// console.log('---start---', url)
return request(url, {
method,
headers: options.headers,
@ -14,11 +14,16 @@ const fatchData = (url, method, options, callback) => {
json: options.format === undefined || options.format === 'json',
}, (err, resp, body) => {
if (err) return callback(err, null)
console.log('---end---', url)
// console.log('---end---', url)
callback(null, resp, body)
})
}
/**
* promise 形式的请求方法
* @param {*} url
* @param {*} options
*/
export const httpFatch = (url, options = { method: 'get' }) => {
let requestObj
let cancelFn

53
src/renderer/views/Search.vue
View File

@ -6,7 +6,9 @@
table
thead
tr
th.nobreak(style="width: 30%;") 歌曲名
th.nobreak.center(style="width: 37px;")
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData" :indeterminate="isIndeterminate")
th.nobreak(style="width: 25%;") 歌曲名
th.nobreak(style="width: 20%;") 歌手
th.nobreak(style="width: 25%;") 专辑
th.nobreak(style="width: 15%;") 操作
@ -15,7 +17,9 @@
table
tbody
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick(index)")
td.break(style="width: 30%;")
td.nobreak.center(style="width: 37px;" @click.stop)
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
td.break(style="width: 25%;")
| {{item.name}}
span.badge.badge-info(v-if="item._types['320k']") 高品质
span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
@ -26,7 +30,8 @@
td(style="width: 10%;") {{item.interval}}
div(:class="$style.pagination")
material-pagination(:count="listInfo.total" :limit="limit" :page="page" @btn-click="handleTogglePage")
div(v-else :class="$style.noItem")
div(v-else :class="$style.noitem")
p 搜我所想~~😉
material-download-modal(:show="showDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="showDownload = false")
</template>
@ -44,6 +49,10 @@ export default {
clickIndex: -1,
showDownload: false,
musicInfo: null,
selectdData: [],
isSelectAll: false,
isIndeterminate: false,
isShowEditBtn: false,
}
},
beforeRouteUpdate(to, from, next) {
@ -71,6 +80,22 @@ export default {
this.handleSearch(this.text, this.page)
}
},
watch: {
selectdData(n) {
const len = n.length
if (len) {
this.isSelectAll = true
this.isIndeterminate = len !== this.list.length
this.isShowEditBtn = true
} else {
this.isSelectAll = false
this.isShowEditBtn = false
}
},
list() {
this.resetSelect()
},
},
computed: {
...mapGetters(['userInfo']),
...mapGetters('search', ['list', 'limit', 'listInfo']),
@ -118,7 +143,6 @@ export default {
break
}
},
openDownloadModal() {},
testPlay(index) {
let targetSong = this.list[index]
this.defaultListAdd(targetSong)
@ -140,6 +164,13 @@ export default {
this.createDownload({ musicInfo: this.musicInfo, type })
this.showDownload = false
},
handleSelectAllData(isSelect) {
this.selectdData = isSelect ? [...this.list] : []
},
resetSelect() {
this.isSelectAll = false
this.selectdData = []
},
},
}
</script>
@ -183,7 +214,17 @@ export default {
// left: 50%;
// transform: translateX(-50%);
}
// .noItem {
.noitem {
position: relative;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
// }
p {
font-size: 24px;
color: #ccc;
}
}
</style>

14
src/renderer/views/Setting.vue
View File

@ -13,18 +13,18 @@ div.scroll(:class="$style.setting")
dd(title='弹出层的动画效果')
h3 弹出层随机动画
div
material-checkbox(id="setting_animate" v-model="current_setting.randomAnimate") 是否启用
material-checkbox(id="setting_animate" v-model="current_setting.randomAnimate" label="是否启用")
dt 播放设置
dd(title="都不选时播放完当前歌曲就停止播放")
h3 歌曲切换方式
div
material-checkbox(:id="`setting_player_togglePlay_${item.value}`" :class="$style.gap" :target="item.value" :key="item.value"
v-model="current_setting.player.togglePlayMethod" v-for="item in togglePlayMethods") {{item.name}}
material-checkbox(:id="`setting_player_togglePlay_${item.value}`" :class="$style.gap" :value="item.value" :key="item.value"
v-model="current_setting.player.togglePlayMethod" v-for="item in togglePlayMethods" :label="item.name")
dd(title='启用时将优先播放320K品质的歌曲')
h3 优先播放高品质音乐
div
material-checkbox(id="setting_player_highQuality" v-model="current_setting.player.highQuality") 是否启用
material-checkbox(id="setting_player_highQuality" v-model="current_setting.player.highQuality" label="是否启用")
dt 下载设置
dd(title='下载歌曲保存的路径')
h3 下载路径
@ -37,13 +37,13 @@ div.scroll(:class="$style.setting")
dd(title='下载歌曲时的命名方式')
h3 文件命名方式
div
material-checkbox(:id="`setting_download_musicName_${item.value}`" :class="$style.gap" name="setting_download_musicName" :target="item.value" :key="item.value" need
v-model="current_setting.download.fileName" v-for="item in musicNames") {{item.name}}
material-checkbox(:id="`setting_download_musicName_${item.value}`" :class="$style.gap" name="setting_download_musicName" :value="item.value" :key="item.value" need
v-model="current_setting.download.fileName" v-for="item in musicNames" :label="item.name")
dt 列表设置
dd(title='播放列表是否显示专辑栏')
h3 专辑栏
div
material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName") 是否显示专辑栏
material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName" label="是否显示专辑栏")
dt 备份与恢复
dd
h3 部分数据