Maison > Article > interface Web > Développement de composants Vue : méthode d'implémentation du composant de sélection de balises
Développement de composants Vue : méthode d'implémentation du composant de sélecteur de balises
Introduction :
Le sélecteur de balises est l'un des composants courants dans le développement Web. Il peut être utilisé pour sélectionner une ou plusieurs balises spécifiques afin de fournir aux utilisateurs un fonctionnement pratique. Cet article expliquera comment implémenter un composant de sélection d'étiquettes simple dans le développement de composants Vue et fournira des exemples de code spécifiques.
1. Analyse des exigences :
Nous devons implémenter un composant de sélection de balises. Les exigences spécifiques sont les suivantes :
3. Conception et mise en œuvre des composants :
<template> <div class="tag-selector"> <div class="selected-tags"> <!-- 已选择的标签展示 --> <el-tag v-for="tag in selectedTags" :key="tag" closable @close="removeTag(tag)">{{ tag }}</el-tag> </div> <el-input v-model="inputValue" placeholder="请输入标签" @focus="showDropdown" @input="handleInput"></el-input> <!-- 标签列表下拉框 --> <el-dropdown :show="dropdownVisible"> <el-dropdown-menu> <el-dropdown-item v-for="tag in filteredTags" :key="tag" @click="selectTag(tag)">{{ tag }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template>
<script> export default { data() { return { tags: ['HTML', 'CSS', 'JavaScript', 'Vue.js', 'React', 'Angular'], inputValue: '', dropdownVisible: false } }, computed: { selectedTags() { // 根据输入框的值筛选已选择的标签 return this.tags.filter(tag => tag.includes(this.inputValue)) }, filteredTags() { // 根据输入框的值筛选可选择的标签 return this.tags.filter(tag => tag.includes(this.inputValue)) } }, methods: { showDropdown() { this.dropdownVisible = true }, handleInput(value) { this.inputValue = value }, selectTag(tag) { this.inputValue = '' this.dropdownVisible = false // 将选择的标签添加到已选择的标签列表中 this.selectedTags.push(tag) }, removeTag(tag) { // 删除已选择的标签 const index = this.selectedTags.indexOf(tag) if (index > -1) { this.selectedTags.splice(index, 1) } } } } </script>
<template> <div> <label>标签选择:</label> <tag-selector></tag-selector> </div> </template> <script> import TagSelector from './TagSelector.vue' export default { components: { TagSelector } } </script>
6. Références :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!