Javascript 如何打开和关闭Vuetify旋转木马组件右/左箭头

我想动态控制中

（）

箭头的可见性

例如，最后一个项目上的最后一个右箭头消失，或者我可以在

旋转木马项目

内容中使用内部按钮或其他交互功能动态替换按钮。（我知道

continuous

prop可以完成简单的结束案例）

next图标

和

prev图标

道具的文档是

bool

或

字符串

，默认为

$next

我可以通过将图标按钮设置为

false

，使其消失，但

true

不会使其重新出现

我猜字符串值是图标名（比如

mdarrow right

？），但是文档没有说明默认值是什么，这不起作用。我猜“关”是将道具设置为

false

，“开”是将道具恢复为图标名称

我也不明白

$next

是什么意思，本页没有对此进行解释。如果将其用作值，则会出现错误。其他一切似乎都是假的

我猜是这样的：

导出默认值{
数据：（）=>{
返回{
步骤编号：0，
展示：{
箭头：是的，
下一行：“md向右箭头”，
},
}
},
观察：{
步骤号：函数（新步骤、旧步骤）{
//例如，这里有一些逻辑
this.nextArrow=（newStep==4）？“md向右箭头”：false；
},
},
//...
}

---

更新

我的一个错误是

md arrow right

应该是

mdi arrow right

（缺少

i

），或者实际上是

mdi chevron right

，如tony19所述。现在我可以将它设置为文字图标OK

但是将其设置为

$next

或

$prev

仍然不起作用-它要么显示为空，要么显示一个$sign，实际上是单词

$next

。这似乎“破坏”了绑定，并将其设置为文字图标，直到重新加载页面时才会失败

<i aria-hidden="true" class="v-icon notranslate material-icons theme--light" style="font-size: 36px;">$next</i>

$next

我认为，如果文档不能提供您所需的内容，您可以在不依赖文档的情况下实现所需的行为

只需检查旋转木马组件的

左

和

右

箭头，并通过选择器获取DOM节点。 然后，您就可以对这些元素执行您想要的操作了

例如：

const nextButton = document.querySelector('.v-window__next button');

const prevButton = document.querySelector('.v-window__prev button');

（您可以在组件中使用

$el

，而不是

文档

）

现在，您可以对元素执行任何操作

要动态显示/隐藏

，请执行以下操作：

nextButton.style.display = 'None'; // Hide
nextButton.style.display = 'Block'; // Show

要
导航
：

nextButton.click(); // Go next.
prevButton.click(); // Go prev.

Vue
最后只是
JavaScript
，没有魔力；）

顺便说一句，您可以在为转盘提供的浏览器控制台上直接尝试此操作。
将图标设置为
$next
（如下面的演示代码片段所示）时，应恢复图标的可见性

关于
$next
。。。
对于框架中的所有图标，Vuetify使用渲染名称指定的图标。图标名称映射到iconset（默认为）。映射的图标名称由
$
前缀标识，并在图标呈现期间标识

例如，
mdi
预设地图和；以及
fa
（Font-Awesome）预设地图和

文字图标名称（不带
$
前缀）也可以显式使用。例如，您可以在
v-icon
中指定
mdi箭头向右展开
，而不是
$next


newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
下一个主题：“$next”，
prevIcon:“$prev”，
nexticonebled：正确，
prevIconEnabled:对，
颜色：[
“靛蓝”，
“警告”，
“粉色变深-2”，
“红色-1”，
“深紫色口音-4”，
],
幻灯片：[
“第一”，
"第二",，
"三",，
"四",，
"五",，
],
}
},
观察：{
nextIconEnabled（nextIconEnabled）{
如果（nexticonebled）{
this.nextIcon=this.\u lastNextIcon
}否则{
this.\u lastNextIcon=this.nextIcon
this.nextIcon=false
}
},
prevIconEnabled（prevIconEnabled）{
如果（上一个已启用）{
this.prevIcon=this.\u lastPrevIcon
}否则{
this.\u lastPrevIcon=this.prevIcon
this.prevIcon=false
}
}
}
})
.controls{
显示器：flex；
弯曲方向：立柱；
}

切换下一个图标
下一个图标：
切换上一个图标
上一个图标：
{{幻灯片}}幻灯片
图标名称中的简单输入错误：

nextArrow: "md-arrow-right",

应该是

nextArrow: "mdi-arrow-right",

我一直犯这个错误，因为我通过搜索图标名称没有
mdi-
前缀的位置来获取图标名称，并且在手动添加
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>

我已经有一段时间没有使用vuetify了，但是在查看文档时，您是否尝试过将道具
continuous
设置为
false
？@Liang ShihLin是的，这确实提供了在最后关闭下一个的示例，但我需要对它们进行更多的控制，比如当交互式旋转木马项目包含按钮时。也许这是个坏例子！你只想下一步和公关
    <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>

   data: () => ({
      arrows: false,
      item: 0,
    }),

  methods: {
    nextItem() {
      console.log('next');
      this.item += 1;
    },
    showHideArrows() {
      this.arrows = !this.arrows;
      console.log(this.arrows);
    },
  },