Utilisez vue pour créer une liste déroulante mobile

Cette fois, je vais vous présenter comment utiliser vue pour créer une liste déroulante mobile Quelles sont les précautions à prendre pour utiliser vue pour créer une liste déroulante mobile Voici un cas pratique, jetons un oeil.

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
}

Croyez Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Analyse des actifs et des cas d'utilisation statiques

JS utilise createElement() pour ajouter dynamiquement du HTML

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!