yvan-window/src/component/Container/Desktop/SearchInput/index.vue

<template>
  <!-- 搜索框 -->
  <div
      style="
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        top: 50%;
        width: 638px;
        height:418px;
        border-radius:7px;
      "
      :style="{
        display: searchInputContant.display,
        zIndex: searchInputContant.zIndex,
      }"
      :class="searchInputContant.cls"
      @click.stop="clickSearchInput">
    <div
      class="
        x-window
        syno-finder
        spotlight-main-window
        sds-window-v5
        spotlight-init
      "
    >
      <div class="x-dlg-focus"></div>
      <div class="x-window-tl">
        <div class="x-window-tr">
          <div class="x-window-tc">
            <div class="x-window-header x-panel-icon x-window-draggable">
              <div class="x-window-toolCt">
                <div class="x-tool x-tool-close">&nbsp;</div>
                <div class="x-tool x-tool-restore" style="display: none">
                  &nbsp;
                </div>
                <div class="x-tool x-tool-maximize">&nbsp;</div>
                <div class="x-tool x-tool-minimize">&nbsp;</div>
                <div class="x-tool x-tool-help">&nbsp;</div>
              </div>
              <span class="x-window-header-text">Spotlight</span>
            </div>
          </div>
        </div>
      </div>
      <div class="x-window-bwrap" :class="searchCls">
        <div class="x-window-ml">
          <div class="x-window-mr">
            <div class="x-window-mc">
              <div class="x-window-body" style="width: 638px; height: 48px">
                <div
                  class="x-panel syno-ux-panel x-panel-noborder"
                  style="width: 638px"
                >
                  <div class="x-panel-bwrap">
                    <div
                      class="
                        x-panel-body
                        x-panel-body-noheader
                        x-panel-body-noborder
                        x-box-layout-ct
                      "
                      style="width: 638px; height: 48px"
                    >
                      <div
                        class="x-box-inner"
                        style="width: 638px; height: 48px"
                      >
                        <div
                          class="
                            x-panel
                            search-bar
                            syno-ux-panel
                            x-panel-noborder x-box-item
                            search-now-placeholder
                          "
                          style="
                            position: absolute;
                            z-index: 11000;
                            visibility: visible;
                            left: 0px;
                            top: 0px;
                            width: 638px;
                          "
                        >
                          <div class="x-panel-bwrap">
                            <div
                              class="
                                x-panel-body
                                x-panel-body-noheader
                                x-panel-body-noborder
                                x-box-layout-ct
                              "
                              style="height: 46px; width: 638px"
                            >
                              <div
                                class="x-box-inner"
                                style="width: 638px; height: 46px"
                              >
                                <div
                                  class="magnifier x-box-item"
                                  :class="searchIconCls"
                                  @click.capture="showOrHiddenSelect"
                                  style="
                                    width: 70px;
                                    height: 22px;
                                    left: 0px;
                                    top: 0px;
                                  "
                                ></div>
                                <input
                                  type="text"
                                  size="20"
                                  autocomplete="off"
                                  class="
                                    x-form-text x-form-field
                                    text-field
                                    syno-ux-textfield
                                    x-box-item
                                  "
                                  style="
                                    margin-left: 0px;
                                    height: 46px;
                                    width: 512px;
                                    left: 70px;
                                    top: 0px;
                                  "
                                  v-model="keyword"
                                  @input="searchKeyword"
                                  @focus="searchInputFocus"
                                />
                                <div
                                  class="loading-icon x-box-item"
                                  style="
                                    width: 24px;
                                    height: 46px;
                                    left: 598px;
                                    top: 0px;
                                  "
                                ></div>
                                <div class="x-form-hidden-error-msg"></div>
                                <div
                                  class="dummy-searchfield"
                                  style="
                                    width: 512px;
                                    height: 46px;
                                    left: 70px;
                                    top: 0px;
                                  "
                                  :style="{ display: searchFieldDisplay }"
                                >
                                  <div
                                    class="suggestion"
                                    style="width: 512px; height: 46px"
                                  >
                                    <span class="dummy"></span>立即搜索{{
                                      searchText
                                    }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="x-window-bl x-panel-nofooter">
          <div class="x-window-br"><div class="x-window-bc"></div></div>
        </div>
      </div>
      <div
        class="x-panel x-panel-noborder x-box-item"
        style="width: 638px; left: 0px; top: 48px"
      >
        <div class="x-panel-bwrap" :style="{ display: panelBwrapDisplay }">
          <div
            class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
            style="width: 638px; height: 370px"
          >
            <div
              class="x-panel main-panel syno-ux-panel x-panel-noborder"
              style="width: 638px; height: 370px"
            ></div>
          </div>
        </div>
      </div>
      <div
        class="
          x-panel
          syno-finder-spotlight-menu
          x-panel-noborder
          syno-ux-panel
        "
        style="
          position: absolute;
          z-index: 11000;
          left: 10px;
          top: 45px;
          width: 184px;
        "
        :style="{ display: selectDisplay }"
      >
        <div class="x-panel-bwrap">
          <div
            class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
            style="width: 184px"
          >
            <div style="width: 184px; height: 200px">
              <div
                class="cat-wrapper"
                :class="select.cls"
                v-for="(select, selectIndex) in searchInputDetail.selectList"
                :key="select.id"
                @click="changeSearchMethod(selectIndex, select.cls1)"
              >
                <span class="icon" :class="select.cls1"></span>{{ select.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["searchInputData", "defaultZIndex"],
  mounted() {
    this.$bus.on("openSearchInput", this.openSearchInput);
    this.searchInputContant = this.searchInputData;
  },
  data() {
    return {
      searchInputContant: {
        display: "none",
        zIndex: 9050,
        cls: "deactive-win",
      },
      searchText: "",
      keyword: "",
      searchCls: "",
      searchIconCls: "everything",
      selectDisplay: "none",
      searchFieldDisplay: "block",
      panelBwrapDisplay: "none",
      searchInputDetail: {
        selectList: [
          {
            id: 0,
            cls: "",
            cls1: "document",
            text: "文档",
          },
          {
            id: 1,
            cls: "",
            cls1: "photo",
            text: "照片",
          },
          {
            id: 2,
            cls: "",
            cls1: "audio",
            text: "音乐",
          },
          {
            id: 3,
            cls: "",
            cls1: "video",
            text: "视频",
          },
          {
            id: 4,
            cls: "current",
            cls1: "everything",
            text: "全部",
          },
        ],
      },
    };
  },
  methods: {
    // 显示或隐藏本页面
    openSearchInput(e) {
      if (
        this.searchInputContant.display === "none" ||
        this.searchInputContant.cls === "deactive-win"
      ) {
        this.searchInputContant.display = "block";
        this.searchInputContant.cls = "active-win";
        this.searchInputContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
        if (!e.srcElement.className.includes(" pressed")) {
          e.srcElement.className = e.srcElement.className + " pressed";
        }
        window.addEventListener("click", this.hiddenSearchInput);
      } else {
        this.searchInputContant.display = "none";
        this.searchInputContant.zIndex = this.defaultZIndex - 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        this.searchInputContant.cls = "deactive-win";
        if (
          e.srcElement.className &&
          e.srcElement.className.includes(" pressed")
        ) {
          e.srcElement.className = e.srcElement.className.replace(
            " pressed",
            ""
          );
        }
        window.removeEventListener("click", this.hiddenSearchInput);
      }
    },
    // 隐藏本页面
    hiddenSearchInput(e) {
      let el = document.querySelector(".tray-item.search-button");
      let el1 = document.querySelector(".syno-finder.spotlight-main-window");
      if (e.srcElement === el) {
        window.addEventListener("click", this.hiddenSearchInput);
      } else {
        this.searchInputContant.display = "none";
        window.removeEventListener("click", this.hiddenSearchInput);
        this.panelBwrapDisplay = "none";
        if (el.className && el.className.includes(" pressed")) {
          el.className = el.className.replace(" pressed", "");
        }
        this.searchFieldDisplay = "block";
        this.selectDisplay = "none";
        this.searchCls = "";
        if (el1.className.includes(" merge")) {
          el1.className = el1.className.replace(" merge",'');
        }
        this.keyword = "";
        if (this.searchInputContant.zIndex >= this.defaultZIndex) {
          this.searchInputContant.cls = "deactive-win";
          this.searchInputContant.zIndex = this.defaultZIndex - 10;
          this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
        }
      }
    },
    // 点击本页面
    clickSearchInput(e) {
      if (this.searchInputContant.display === "deactive-win") {
        this.searchInputContant.cls = "active-win";
        this.searchInputContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
    },
    // 显示或隐藏选择框
    showOrHiddenSelect() {
      if (this.selectDisplay === "none") {
        this.selectDisplay = "block";
      } else {
        this.selectDisplay = "none";
      }
    },
    // 切换搜索方式
    changeSearchMethod(selectIndex, cls) {
      this.searchIconCls = cls;
      this.searchInputDetail.selectList.forEach((item) => {
        if (item.cls.includes("current")) {
          item.cls = item.cls.replace("current", "");
        }
      });
      if (
        !this.searchInputDetail.selectList[selectIndex].cls.includes("current")
      ) {
        this.searchInputDetail.selectList[selectIndex].cls =
          this.searchInputDetail.selectList[selectIndex].cls + "current";
      }
      this.selectDisplay = "none";
      if (selectIndex < 4) {
        this.searchText = this.searchInputDetail.selectList[selectIndex].text;
      } else {
        this.searchText = "";
      }
    },
    // 输入搜索
    searchKeyword() {
      let el = document.querySelector(".syno-finder.spotlight-main-window");
      if (!this.keyword.trim()) {
        this.panelBwrapDisplay = "none";
        this.searchFieldDisplay = "block";
        this.searchCls = "";
        if (el.className.includes(" merge")) {
          el.className = el.className.replace(" merge");
        }
      } else {
        this.panelBwrapDisplay = "block";
        this.searchFieldDisplay = "none";
        this.searchCls = "merge";
        if (!el.className.includes(" merge")) {
          el.className = el.className + " merge";
        }
      }
    },
    // 输入框聚焦
    searchInputFocus() {
      this.selectDisplay = "none";
    },
  },
  components: {},
  name: "SearchInput",
};
</script>