Vuetify Carousel 구성 요소의 오른쪽/왼쪽 화살표를 켜고 끄는 방법
의 가시성을 동적으로 제어하고 싶다.(<)그리고.(>)Vuetify carousel 구성 요소의 화살표.
예를 들어 마지막 항목의 마지막 오른쪽 화살표가 사라지거나 내부 버튼이나 기타 대화 기능을 사용할 수 있습니다.carousel-item버튼을 동적으로 교환하는 콘텐츠입니다.(알고 있습니다)continuous심플한 엔드 케이스를 실현합니다).
의 매뉴얼next-icon그리고.prev-icon소품은bool또는string디폴트로는$next.
Name next-icon Type boolean | string Default $next Description Icon used for the "next" button if show-arrows is true
아이콘 버튼을 다음과 같이 설정하면 아이콘 버튼이 사라집니다.false,그렇지만true다시 나타나진 않아요
문자열 값이 아이콘 이름인 것 같습니다(예:md-arrow-right?) 단, 매뉴얼에는 디폴트가 기재되어 있지 않고, 동작하지 않습니다.'꺼짐'이 소품 설정인 것 같아요false"ON"이 아이콘 이름으로 복원됩니다.
나도 이해가 안 돼$next페이지에는 설명되어 있지 않습니다.그것을 값으로 사용하면 오류가 발생합니다.다른 것들은 모두 거짓으로 평가되는 것 같다.
제 생각엔 이런 것 같아요.
<template>
<v-carousel v-model="stepNo" :show-arrows="show.arrows" :next-icon="show.nextArrow" height="auto" light>
<!-- ... -->
</template>
<script>
export default {
data: () => {
return {
stepNo: 0,
show: {
arrows: true,
nextArrow: "md-arrow-right",
},
}
},
watch: {
stepNo: function(newStep, oldStep) {
// some logic here, for example
this.nextArrow = (newStep === 4) ? "md-arrow-right" : false;
},
},
//...
}
</script>
갱신하다
제 실수 중 하나는md-arrow-right그래야 한다mdi-arrow-right(이것들은i또는 실제로mdi-chevron-righttony19가 지적한 바와 같이.이제 리터럴 아이콘을 OK로 설정할 수 있습니다.
하지만 그것을 로 설정하는 것은$next또는$prev아직 동작하지 않습니다.아무것도 표시되지 않거나 빈 원 또는 실제로는 $기호가 표시됩니다.$next. 이 경우 바인딩을 "해제"하고 리터럴 아이콘으로 설정하면 페이지를 새로고침할 때까지 실패합니다.
<i aria-hidden="true" class="v-icon notranslate material-icons theme--light" style="font-size: 36px;">$next</i>
필요한 것을 제공하지 않으면 문서에 의존하지 않고 원하는 행동을 할 수 있다고 생각합니다.
검사만 하면 됩니다.left그리고.rightcarousel 컴포넌트의 화살표를 클릭하여 셀렉터로 DOM 노드를 가져옵니다.그러면 요소를 사용하여 원하는 작업을 수행할 수 있습니다.
예:
const nextButton = document.querySelector('.v-window__next button');
const prevButton = document.querySelector('.v-window__prev button');
(대신document를 사용할 수 있습니다.$el컴포넌트 내부)
이제 요소로 원하는 모든 것을 할 수 있습니다.
로.show/hide동적:
nextButton.style.display = 'None'; // Hide
nextButton.style.display = 'Block'; // Show
로.navigate:
nextButton.click(); // Go next.
prevButton.click(); // Go prev.
Vue그냥JavaScript결국 마법은 없다;)
참고로 carousel에 제공한 링크의 브라우저 콘솔에서 직접 시도할 수 있습니다.
아이콘 표시는 다음과 같이 설정할 때 복원해야 합니다.$next(아래 데모 코드 스니펫에 기재되어 있습니다).
대해서$next...
프레임워크의 모든 아이콘에 대해 Vuetify는 이름으로 지정된 아이콘을 렌더링하기 위해 사용합니다.아이콘 이름은 아이콘 세트에 매핑됩니다(기본값은 재료 설계 아이콘).매핑된 아이콘 이름은$프레픽스 및 아이콘 렌더링 중 재맵됩니다.
를 들면, 「」는,mdi사전 설정된 맵은 및 에 매핑됩니다.fa(Font Awesome) 프리셋은 및 에 맵됩니다.
(「」(「」) )$prefix사용할 도 있습니다.를 들어, '어리다'를 지정할 수 .mdi-arrow-expand-right$nextv-icon.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
nextIcon: '$next',
prevIcon: '$prev',
nextIconEnabled: true,
prevIconEnabled: true,
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
watch: {
nextIconEnabled(nextIconEnabled) {
if (nextIconEnabled) {
this.nextIcon = this._lastNextIcon
} else {
this._lastNextIcon = this.nextIcon
this.nextIcon = false
}
},
prevIconEnabled(prevIconEnabled) {
if (prevIconEnabled) {
this.prevIcon = this._lastPrevIcon
} else {
this._lastPrevIcon = this.prevIcon
this.prevIcon = false
}
}
}
}).controls {
display: flex;
flex-direction: column;
}<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@2.2.8/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@4.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.2.8/dist/vuetify.min.css">
<div id="app">
<v-app id="inspire">
<div class="controls">
<label>Toggle next-icon
<input type="checkbox" v-model="nextIconEnabled">
</label>
<label>next-icon:
<input v-model="nextIcon" placeholder="icon name"/>
</label>
<label>Toggle prev-icon
<input type="checkbox" v-model="prevIconEnabled">
</label>
<label>prev-icon:
<input v-model="prevIcon" placeholder="icon name"/>
</label>
</div>
<v-carousel
height="400"
hide-delimiter-background
:prev-icon="prevIcon"
:next-icon="nextIcon"
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="display-3">{{ slide }} Slide</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>아이콘 이름의 간단한 오타:
nextArrow: "md-arrow-right",
그래야 한다
nextArrow: "mdi-arrow-right",
https://materialdesignicons.com/을 검색하면 아이콘 이름을 알 수 있기 때문에 이 오류가 계속 발생합니다.mdi-와 prefix를 으로 추가할 때 .md-재료 디자인만 가능합니다.
회전목마 구성 요소를 더 잘 제어할 수 있는 몇 가지 방법이 있습니다.
화살표가 표시되는지 프로그래밍 방식으로 제어하기 위해 변수를 위임할 수 있습니다.
continuous=false합니다.
, 액티브하게 되는 하려면 , 「」를 합니다.v-model
<v-carousel
:show-arrows=arrows
:progress=false
:continuous=false
v-model="item"
hide-delimiter-background
>
<v-carousel-item
v-for="n in 15"
:key="n"
>
<v-card>
{{item}}
<v-btn
text
@click="nextItem"
>
Next Item
</v-btn>
<v-btn
text
@click="showHideArrows"
>
showHideArrows
</v-btn>
</v-card>
</v-carousel-item>
</v-carousel>
nextItem() 항목을 합니다.
showHideArrows()를 바꿉니다.
data: () => ({
arrows: false,
item: 0,
}),
methods: {
nextItem() {
console.log('next');
this.item += 1;
},
showHideArrows() {
this.arrows = !this.arrows;
console.log(this.arrows);
},
},
언급URL : https://stackoverflow.com/questions/59997005/how-to-toggle-vuetify-carousel-component-right-left-arrows-on-and-off
'programing' 카테고리의 다른 글
| 스트림의 개념을 설명할 수 있나요? (0) | 2022.07.30 |
|---|---|
| SIGUSR1 및 SIGUSR2를 트리거하는 방법 (0) | 2022.07.30 |
| 사용하시는 어플리케이션에서 sql과 sql의 계산을 실행하는 경우의 장점과 단점은 무엇입니까? (0) | 2022.07.30 |
| getchar()는 입력 문자열과 동일한 출력을 제공합니다. (0) | 2022.07.30 |
| Log4j 로거 프로그래밍 설정 (0) | 2022.07.30 |