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

2020-03-13 13:38:02 +08:00
parent 527143405f
commit 6d51240a27
10 changed files with 44 additions and 14 deletions
@@ -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)
@@ -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;
@@ -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": "语言",

@@ -14,5 +14,6 @@
  "source_tx": "企鵝音樂",
  "source_wy": "網易音樂",
  "source_mg": "咪咕音樂",
-  "source_bd": "百度音樂"
+  "source_bd": "百度音樂",
+  "source_all": "聚合搜索"
 }
@@ -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": "播放設置",
@@ -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",

@@ -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) {
@@ -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(() => {