简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
使用 vue-select 或另一個不錯的選擇框以及 Vue 3 的 ESM vuild
P粉637866931
P粉637866931 2024-03-30 13:40:38
0
2
361

我有以下簡單的設置，以及使用 Vue 3 的客戶端 JavaScript 應用程式：

HTML（有選擇框）：

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id="vuetest">
      <select id="assignment-select" v-model="ft_assignment">
        <optgroup v-for="optgroup in ft_assignments" :label="optgroup.text">
          <option
            v-for="option in optgroup.children"
            :value="option.id"
            :disabled="option.disabled"
          >
            {{ option.text }}
          </option>
        </optgroup>
      </select>
    </div>

    <script type="module">
      import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

      const app = createApp({
        data() {
          return {
            ft_assignment: "a",
            ft_assignments: [
              {
                text: "hi",
                children: [
                  { id: "a", text: "a1" },
                  { id: "b", text: "b1" },
                ],
              },
              {
                text: "there",
                children: [
                  { id: "c", text: "c1" },
                  { id: "d", text: "d1" },
                ],
              },
            ],
          };
        },
        watch: {
          ft_assignment(v) {
            console.log(v);
          },
        },
      }).mount("#vuetest");
    </script>
  </body>
</html>

我想使用具有搜尋等現代功能的「漂亮」選擇框（例如 vue-select 或 select2） - 但我不知道如何包含相關元件。我看到許多關於混合 jQuery 和 Vue.js 的警告，因此我避免只將 select2 作為 jquery 插件並以這種方式呈現。

如何將選擇框變成「更好」更現代的選擇元素？

P粉637866931
P粉637866931

全部回覆(2)
P粉986937457
P粉9869374572024-03-31 09:43:16 2樓

如果您不想使用插件而更喜歡自己建立它（我喜歡這樣做）。

為此，您可以建立一個包含輸入類型文字的 div，您可以使用該文字搜尋 div 內的選項。這些選項作為錨標記儲存在隱藏的 div 中。然後，將事件偵聽器附加到錨標記元素及其需要呼叫的函數。

看看這個，您當然可以編輯它並使其按照您需要的方式工作。

點贊 +0
新增回覆
P粉158473780
P粉1584737802024-03-31 00:32:02 1樓

這不是使用vue 3的esm構建，但仍然使用瀏覽器中直接支援的UMD構建（原因是vue-select庫不提供esm構建版本，但它仍然支援UMD構建）。

基本上以這種方式包含依賴項：

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@beta"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css" />

然後這樣導入vue：

const { createApp } = Vue;

然後以這種方式導入 vue-select 元件：

const app = createApp({
  components: {
    vSelect: window["vue-select"],
  },
  ...

工作程式碼片段：

<html>
  <head>
    <title>Test</title>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://unpkg.com/vue-select@beta"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-select@latest/dist/vue-select.css"
    />
  </head>
  <body>
    <div id="vuetest">
      <v-select :options="flattenedFtAssignemnts" label="text"></v-select>
    </div>

    <script type="module">
      const { createApp } = Vue;

      const app = createApp({
        components: {
          vSelect: window["vue-select"],
        },
        data() {
          return {
            ft_assignment: "a",
            ft_assignments: [
              {
                text: "hi",
                children: [
                  { id: "a", text: "a1" },
                  { id: "b", text: "b1" },
                ],
              },
              {
                text: "there",
                children: [
                  { id: "c", text: "c1" },
                  { id: "d", text: "d1" },
                ],
              },
            ],
          };
        },
        computed: {
          flattenedFtAssignemnts() {
            return this.ft_assignments.map(obj => obj.children).flat();
          }
        },
        watch: {
          ft_assignment(v) {
            console.log(v);
          },
        },
      });

      app.mount("#vuetest");
    </script>
  </body>
</html>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！