Cet article présente principalement les informations pertinentes sur les modificateurs de touches Vue. De nouveaux modificateurs de touches et modificateurs système sont ajoutés dans Vue pour gérer des événements similaires. Pour plus de détails, veuillez vous référer aux
Modificateurs de touches
Lors du développement côté PC, nous rencontrons souvent des besoins similaires, comme soumettre un formulaire lorsque l'utilisateur appuie sur la touche Entrée. Lorsqu'aucun modificateur de touche n'est utilisé, nous pouvons écouter les événements du clavier, en fonction du jugement. sur la valeur de keyCodeVue ajoute des modificateurs clés et des modificateurs système pour gérer des événements similaires/** 提交表单 */ <template> <p class="demo"> 电话号码: <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" /> </p> </template> <script> export default { data () { return { phone: '' // 电话号码 } }, methods: { // TODO 提交电话号码 handleSubmit () { alert(this.phone) } } } </script>
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.enter="handleSubmit" />
Alias des boutons courants
onglet Entrée supprimer l'espace esc en haut en bas à gauche droiteVue.config.keyCodes.x = 88
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.right="handleSubmit" /> <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.arrow-right="handleSubmit" />
Touches de modification du système
Parfois, nous devons déclencher des événements avec les touches de modification du système. Ce qu'il convient de noter ici, c'est qu'en appuyant seule sur la touche de modification du système, la touche ne fonctionnera pas. déclencher l'événement correspondant Les touches de modification du système incluent la touche méta ctrl alt shift Pour différents claviers, ces quatre touches de modification système correspondent à des touches différentes. Pour les claviers système mac, la touche méta correspond à la touche de commande. correspondant à la touche ⊞ du clavier système Windows Dans l'exemple suivant, lorsque les touches contrôle et v fonctionnent ensemble, l'événement handleSubmit<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v="handleSubmit"/>
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>
Explication détaillée du didacticiel du composant de sélection de région Vue
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!