Méthode d'implémentation de la liste déroulante Vue

Cette fois, je vais vous présenter la méthode d'implémentation de la liste déroulante vueet quelles sont les précautions pour implémenter la liste déroulante vue. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Si vous l'aimez, donnez-lui une étoile. Si vous rencontrez des problèmes, veuillez les signaler

Installer

cnpm install vue-droplist --save

Importer dans le composant

import DropList from 'vue-droplist'
// 显示下拉列表
showDropList() {
// 配置信息
const configData = {
position: { // 设置显示位置
top: '', 
right: '',
bottom: '',
left: ''
},
width: '40%', // 设置宽度
list: [ // 设置下拉列表数据和对应的点击事件
{text: '修改资料', action: this.updateUserInfo},
{text: '更换主题', action: this.updateTheme},
{text: '退出账号', action: this.signOut}
...
],
isShow: true //设置显示，默认false
}
DropList(configData) //执行配置信息
},
updateUserInfo() {
//do something
},
updateTheme() {
//do something
},
signOut() {
//do something
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site php chinois !

Lecture recommandée :

Explication détaillée du chargement paresseux de vue-router pour résoudre la lenteur de la première vitesse de chargement

module angulaire2 et module partagé Comment utiliser

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!