简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Utilisez vue-select ou une autre jolie boîte de sélection avec le vuild ESM de Vue 3
P粉637866931
P粉637866931 2024-03-30 13:40:38
0
2
358

J'ai la configuration simple suivante et une application JavaScript côté client utilisant Vue 3 :

HTML (avec case de sélection) : 

<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>

Je souhaite utiliser une "jolie" boîte de sélection (comme vue-select ou select2) avec des fonctionnalités modernes comme la recherche - mais je ne sais pas comment inclure les composants pertinents. Je vois beaucoup d'avertissements concernant le mélange de jQuery et Vue.js, j'évite donc simplement d'utiliser select2 comme plugin jquery et de le rendre de cette façon.

Comment transformer la zone de sélection en un « meilleur » élément de sélection plus moderne ?

P粉637866931
P粉637866931

répondre à tous(2)
P粉986937457
P粉9869374572024-03-31 09:43:16 2 plancher

Si vous ne souhaitez pas utiliser de plugin et préférez le construire vous-même (ce que j'aime faire).

Pour ce faire, vous pouvez créer un div contenant du texte de type d'entrée, que vous pouvez utiliser pour rechercher des options dans le div. Ces options sont stockées dans un div caché sous forme de balises d'ancrage. Ensuite, attachez un écouteur d'événement à l'élément de balise d'ancrage et à la fonction qu'il doit appeler.

Jetez un œil à ceci, vous pouvez bien sûr le modifier et le faire fonctionner comme vous le souhaitez.

Comme +0
Ajouter une réponse
P粉158473780
P粉1584737802024-03-31 00:32:02 1 plancher

Il ne s'agit pas d'une version esm utilisant vue 3, mais utilisant toujours des versions UMD qui sont directement prises en charge dans le navigateur (la raison est que la bibliothèque vue-select ne fournit pas de version de version esm, mais elle prend toujours en charge les versions UMD).

Incluez essentiellement les dépendances de cette façon : 

<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" />

Puis importez vue comme ceci : 

const { createApp } = Vue;

Puis importez le composant vue-select de cette façon : 

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

Extrait de code de travail : 

<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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！