修复选择器bug,新增较小、较大窗口设置

This commit is contained in:
lyswhut
2020-03-13 13:38:02 +08:00
parent 527143405f
commit 6d51240a27
10 changed files with 44 additions and 14 deletions
+14 -3
View File
@@ -1,11 +1,17 @@
module.exports = {
windowSizeList: [
{
id: 0,
name: 'smaller',
width: 828,
height: 530,
fontSize: '14px',
},
{
id: 1,
name: 'small',
width: 920,
height: 590,
tabList: '645px',
fontSize: '16px',
},
{
@@ -13,7 +19,6 @@ module.exports = {
name: 'medium',
width: 1012,
height: 650,
tabList: '719px',
fontSize: '16px',
},
{
@@ -21,7 +26,13 @@ module.exports = {
name: 'big',
width: 1104,
height: 708,
tabList: '781px',
fontSize: '17px',
},
{
id: 4,
name: 'larger',
width: 1198,
height: 766,
fontSize: '18px',
},
],
@@ -79,7 +79,7 @@ export default {
}
checked = bool
} else {
checked = this.bool ? this.value : ''
checked = this.bool == null ? '' : this.value
}
this.$emit('input', checked)
this.$emit('change', checked)
+7 -3
View File
@@ -5,7 +5,7 @@
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
use(xlink:href='#icon-down')
div.scroll(:class="$style.list" :style="{ width: windowSizeActive.tabList }" @click.stop ref="dom_list")
div.scroll(:class="$style.list" :style="{ width: listWidth + 'PX' }" @click.stop ref="dom_list")
div(:class="$style.tag" @click="handleClick(null)") {{$t('material.tag_list.default')}}
dl(v-for="type in list")
dt(:class="$style.type") {{type.name}}
@@ -23,12 +23,16 @@ export default {
return []
},
},
listWidth: {
type: Number,
default: 645,
},
value: {
type: Object,
},
},
computed: {
...mapGetters(['setting', 'windowSizeActive']),
...mapGetters(['setting']),
},
data() {
return {
@@ -130,7 +134,7 @@ export default {
.list {
position: absolute;
top: 100%;
width: 646px;
width: 645px;
left: 0;
border-bottom: 2px solid @color-tab-border-bottom;
border-right: 2px solid @color-tab-border-bottom;
+2
View File
@@ -9,9 +9,11 @@
"basic_source": "音乐来源",
"basic_window_size_title": "设置软件窗口尺寸",
"basic_window_size": "窗口尺寸",
"basic_window_size_smaller": "较小",
"basic_window_size_small": "小",
"basic_window_size_medium": "中",
"basic_window_size_big": "大",
"basic_window_size_larger": "较大",
"basic_lang_title": "软件显示的语言",
"basic_lang": "语言",
+2 -1
View File
@@ -14,5 +14,6 @@
"source_tx": "企鵝音樂",
"source_wy": "網易音樂",
"source_mg": "咪咕音樂",
"source_bd": "百度音樂"
"source_bd": "百度音樂",
"source_all": "聚合搜索"
}
+2
View File
@@ -9,9 +9,11 @@
"basic_source": "音樂來源",
"basic_window_size_title": "設置軟件窗口尺寸",
"basic_window_size": "窗口尺寸",
"basic_window_size_smaller": "較小",
"basic_window_size_small": "小",
"basic_window_size_medium": "中",
"basic_window_size_big": "大",
"basic_window_size_larger": "較大",
"basic_lang_title": "軟件顯示的語言",
"basic_lang": "語言",
"play": "播放設置",
+2
View File
@@ -9,9 +9,11 @@
"basic_source": "Music source",
"basic_window_size_title": "Set software window size",
"basic_window_size": "Window size",
"basic_window_size_smaller": "smaller",
"basic_window_size_small": "small",
"basic_window_size_medium": "medium",
"basic_window_size_big": "big",
"basic_window_size_larger": "Larger",
"basic_lang_title": "Software display language",
"basic_lang": "Language",
+3 -3
View File
@@ -25,7 +25,7 @@ div.scroll(:class="$style.setting")
dd(:title="$t('view.setting.basic_window_size_title')")
h3 {{$t('view.setting.basic_window_size')}}
div
material-checkbox(v-for="(item, index) in windowSizeList" :id="`setting_window_size_${item.id}`" name="setting_window_size" @change="handleWindowSizeChange(index)" :class="$style.gapLeft"
material-checkbox(v-for="(item, index) in windowSizeList" :id="`setting_window_size_${item.id}`" name="setting_window_size" @change="handleWindowSizeChange" :class="$style.gapLeft"
need v-model="current_setting.windowSizeId" :value="item.id" :label="$t('view.setting.basic_window_size_' + item.name)" :key="item.id")
dd(:title="$t('view.setting.basic_lang_title')")
@@ -550,8 +550,8 @@ export default {
this.getCacheSize()
})
},
handleWindowSizeChange(index, id) {
let info = id == null ? this.windowSizeList[index] : this.windowSizeList.find(s => s.id == id)
handleWindowSizeChange(index) {
let info = this.windowSizeList[index]
setWindowSize(info.width, info.height)
},
refreshSetting(setting, version) {
+10 -2
View File
@@ -19,8 +19,8 @@
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.songListContainer" v-if="!isVisibleListDetail")
div(:class="$style.header")
material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
material-tag-list(:class="$style.tagList" :list-width="listWidth" ref="tagList" :list="tagList" v-model="tagInfo")
material-tab(:class="$style.tab" :list="sorts" item-key="id" ref="tab" item-name="name" v-model="sortId")
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
div(:class="$style.songListContent")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
@@ -73,6 +73,7 @@ export default {
isShowListAdd: false,
isShowListAddMultiple: false,
importSongListText: '',
listWidth: 645,
// detailLoading: true,
}
},
@@ -149,12 +150,16 @@ export default {
this.sortId = this.sorts[0] && this.sorts[0].id
}
},
'setting.themeId'() {
this.setTagListWidth()
},
},
mounted() {
this.source = this.setting.songList.source
this.isToggleSource = true
this.tagInfo = this.setting.songList.tagInfo
this.sortId = this.setting.songList.sortId
this.setTagListWidth()
},
methods: {
...mapMutations(['setSongList']),
@@ -355,6 +360,9 @@ export default {
filterList(list) {
return this.setting.apiSource == 'temp' ? list.filter(s => s.source == 'kw') : [...list]
},
setTagListWidth() {
this.listWidth = this.$refs.tagList.$el.clientWidth + this.$refs.tab.$el.clientWidth + 2
},
/* addSongListDetail() {
// this.detailLoading = true
// this.getListDetailAll(this.selectListInfo.id).then(() => {