Vue js - Ajouter du texte et une zone déroulante à la zone de contenu HTML modifiable
P粉288069045
2023-07-27 17:02:54
<p>J'utilise Vue.js. J'essaie d'ajouter du texte et une zone déroulante dans un div HTML modifiable. </p><p>Je souhaite ajouter une liste déroulante à l'aide d'un bouton. Cette liste déroulante peut être ajoutée n'importe où dans le texte, tout comme l'endroit où je place mon curseur. </p><p>Maintenant, cela fonctionne presque, mais je ne trouve pas de problème. </p><p>Lorsque j'entre et ajoute plusieurs listes déroulantes, puis que j'appuie sur le bouton "Obtenir le modèle de données", cela indique toujours que l'option de la liste déroulante que j'ai sélectionnée est incorrecte. Je veux dire, il montre toujours la première option. </p><p>À l'aide de ce bouton "Obtenir le modèle de données", j'essaie d'obtenir toutes les options de texte + sélection. </p><p>Voici mon code :</p><p><br /></p>
<pre class="brush:php;toolbar:false;"><template>
<div>
<div class="content-editable" contenteditable="true" @input="onInput" ref="contentEditable"></div>
<bouton @click="addDropdown">Ajouter une liste déroulante</bouton>
<bouton @click="getDataModel">Obtenir le modèle de données</bouton>
<div>{{ dataModel }}</div>
</div>
</modèle>
<script>
exporter par défaut {
données() {
retour {
contenu: '',
listes déroulantes : [],
dropdownOptions : ['Option 1', 'Option 2', 'Option 3'],
modèle de données: '',
} ;
},
méthodes : {
onInput(événement) {
this.content = event.target.innerHTML.replace(/<div><br></div>/g, '');
},
addDropdown() {
liste déroulante const = {
selectedOption : this.dropdownOptions[0],
} ;
this.dropdowns.push(dropdown);
const editableDiv = this.$refs.contentEditable;
const dropdownSelect = document.createElement('select');
dropdownSelect.style.width = '100px';
this.dropdownOptions.forEach((option) => {
const dropdownOption = document.createElement('option');
dropdownOption.value = option ;
dropdownOption.text = option ;
dropdownSelect.appendChild(dropdownOption);
});
editableDiv.appendChild(dropdownSelect);
},
getDataModel() {
const editableDiv = this.$refs.contentEditable;
const clonedDiv = editableDiv.cloneNode(true);
const selectElements = clonedDiv.querySelectorAll('select');
this.dropdowns.forEach((liste déroulante, index) => {
const selectedOption = dropdown.selectedOption;
const selectedOptionText = Array.from(selectElements[index].options).find((option) => option.value === selectedOption)?.text;
const selectedOptionTextNode = document.createTextNode(` ${selectedOptionText}`);
selectElements[index].replaceWith(selectedOptionTextNode);
});
this.dataModel = clonedDiv.textContent ;
},
},
} ;
</script>
<portée du style>
.content-editable {
bordure : 1px solide #ccc ;
remplissage : 10 px ;
hauteur minimale : 100 px ;
marge inférieure : 10 px ;
}
</style></pre>
<p><br /></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vue.js est basé sur les données et adopte la pensée MVVM. Si vous souhaitez créer plusieurs balises "input", il est plus logique d'utiliser v-for au lieu de créer dynamiquement le DOM.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <style scoped> .content-editable { border: 1px solid #ccc; padding: 10px; min-height: 100px; margin-bottom: 10px; } </style> </head> <body> <div id="app"> <template> <div> <button @click="addDropdown">creatSelect</button> <div v-for="(dropdown, index) in dropdowns" :key="index"> <select v-model="dropdown.selectedValue"> <option v-for="option in dropdown.options" :value="option.value" :key="option.value">{{ option.label }}</option> </select> </div> </div> <button @click="getAllSelectedValues">getValue：</button> <div>valueList：{{ allSelectedValues }}</div> </template> </div> </body> </html> <script> var app = new Vue({ el: '#app', data: { dropdowns: [], dropdownOptions: [ { value: 'option1', label: 'option1' }, { value: 'option2', label: 'option2' }, { value: 'option3', label: 'option3' }, { value: 'option4', label: 'option4' }, ], allSelectedValues: [], }, methods: { addDropdown() { this.dropdowns.push({ selectedValue: null, options: this.dropdownOptions, }); }, getAllSelectedValues() { this.allSelectedValues = this.dropdowns.map((dropdown) => dropdown.selectedValue); }, }, }) </script>J'espère que cela vous aidera !