recherche

Maison  >  Questions et réponses  >  le corps du texte

Utilisez vue-select ou une autre jolie boîte de sélection avec le vuild ESM de Vue 3

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粉637866931P粉637866931264 Il y a quelques jours480

répondre à tous(2)je répondrai

  • P粉986937457

    P粉9869374572024-03-31 09:43:16

    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.

    répondre
    0
  • P粉158473780

    P粉1584737802024-03-31 00:32:02

    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>

    répondre
    0
  • Annulerrépondre