So erhalten Sie dom-Elemente in ref in [Vue3] am Beispiel der rotierenden Laternen-Methoden next und prev in element-plus

Nehmen Sie als Beispiel für die Analyse die Element-Plus-Rotationslaternen-Methoden „next“ und „prev“.

Funktion: Fügen Sie zwei weitere Schaltflächen hinzu, umKarussell den Wechsel zwischen dem oberen und dem unteren Bild zu realisieren.

 

 

 ⚠️Hinweis:Wenn das Skript in der folgenden Form geschrieben ist (defineComponent), denken Sie daran, das Karussell (den folgenden Code) zurückzugeben. andernfalls wird ein Fehler gemeldet. So schreiben Sie das Komponenten-Ref-Attribut in defineComponent:

<script>
    import { defineComponent, ref } from 'vue';
 
    export default defineComponent({
	    name: '',
	    components: {},
	    setup() {
            let carousel = ref(null); // 获取dom元素
        
            const changeCvImg = (e) => {
		        e == 'prev' ? carousel.value.prev() : carousel.value.next()
	        }
 
		    return {
			    carousel, 
                changeCvImg
		    }
	    }
    })
</script>