Question

我正在使用Vuejs - Vuikit组件并进行以下设置：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:orientation="vertical">

    <HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
        android:paddingLeft="100dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:backgroundTint="@android:color/holo_blue_light"
            android:text="Credit Cards"
            android:textColor="@android:color/black"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Card 1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Card 2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Card 3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Card 4" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Card 5" />
    </LinearLayout>
</HorizontalScrollView>

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layoutDirection="rtl"
        android:paddingRight="100dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:backgroundTint="@android:color/holo_blue_light"
                android:text="Debit Cards"
                android:textColor="@android:color/black" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 3" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 4" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 5" />
        </LinearLayout>
    </HorizontalScrollView>

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:paddingLeft="100dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:backgroundTint="@android:color/holo_blue_light"
                android:text="Gift Cards"
                android:textColor="@android:color/black" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 3" />
        </LinearLayout>
    </HorizontalScrollView>

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layoutDirection="rtl"
        android:paddingRight="100dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:backgroundTint="@android:color/holo_blue_light"
                android:text="Coupons"
                android:textColor="@android:color/black" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 3" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 4" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Card 5" />
        </LinearLayout>
    </HorizontalScrollView>

</LinearLayout>

我的问题是，关闭模式不会触发<template> <div class="uk-scope"> <vk-modal :show="isShow" v-if="config"> <vk-modal-close @click="alert('hello!')" large></vk-modal-close> <vk-notification :messages.sync="messages"></vk-notification> <app-breadcrumb :current-view="currentView" />  <component v-bind:is="currentView"/> </vk-modal> </div> </template>函数。

父组件确实会发出一个事件，但我更愿意直接从关闭按钮触发一些东西。

我曾尝试使用@click，但这没有帮助！

Answer 1

嘿我之前没有使用过vuikit，但是从他们的文件中他们表明这是如何关闭模态。我也会删除那个v-if =＆＃34; config＆＃34;因为这可能会使Vue感到困惑

<template>
    <div class="uk-scope">
        <vk-modal :show.sync="isShow">
          <vk-modal-close @click="isShow = false" large></vk-modal-close>
          <vk-notification :messages.sync="messages"></vk-notification>
            <app-breadcrumb :current-view="currentView" />
            <!-- render the currently active component/page here -->
            <component v-bind:is="currentView"/>
        </vk-modal>
    </div>
</template>

Answer 2

您是否尝试过使用@click.native="someFunction"，但没有()。

Vuejs组件单击事件不起作用

2 个答案: