小编Ana*_*ury的帖子

如何在Ionic中点击模态外部时防止模态消除?

我正在构建一个简单的移动应用程序,在主页和模态页面之间传递数据.虽然它在移动设备上运行良好,但在大屏幕上,模式并不能填满整个屏幕.因此,用户可以在屏幕外单击以关闭模式,该模态不会触发应该在模态解除时触发的任何函数.我的问题是,如何在模态外禁用单击.我不希望模式在外面点击时被忽略,但只有当我的"关闭"按钮被点击时才会被忽略.我的模态设置为:

在主页上:

open(){
    let modal = this.modalCtrl.create(ModalPage,
        {
            firstName: this.user.firstName,
            lastName: this.user.lastName,
            location: this.user.location
        });
    modal.onDidDismiss(data => {
            this.user.firstName = data.firstName;
            this.user.lastName = data.lastName;
            this.user.location = data.location;
    });
    modal.present();
}
Run Code Online (Sandbox Code Playgroud)

在ModalPage上:

closeModal() {
    let data = {
        firstName: this.user.firstName,
        lastName: this.user.lastName,
        location: this.user.location
    }
    this.viewCtrl.dismiss(data);
}
Run Code Online (Sandbox Code Playgroud)

我觉得这应该是非常简单的事情,但我在网上找不到任何资源,而Ionic 2 Doc也不是很清楚.请帮忙.

ionic-framework ionic2 angular

10
推荐指数
2
解决办法
6482
查看次数

Vue.js v-for 循环中的事件处理动态创建按钮

我有一个 v-for 循环,其中为每次迭代创建一个按钮。我正在尝试制作一个切换处理程序,单击按钮将切换按钮的颜色。但是由于按钮是动态创建的,所以它们的所有颜色都在变化......

<div class="pets" v-for="pet in pets" :key="pet.id">
    <button class="favorite" v-on:click="toggle">
        <i v-bind:class="[{ 'red' : favorited }, 'material-icons']">favorite</i>
    </button>           
</div>
Run Code Online (Sandbox Code Playgroud)

pets 数组正在填充一个 http 调用。我的脚本如下所示:

<script>
export default {
    name: 'home',
    data() {
        return {
            pets: [],
            favorited: false
        }
    },
    methods: {
        toggle: function() {
            this.favorited = !this.favorited;
        }
    },
}
Run Code Online (Sandbox Code Playgroud)

Style 标签只是改变颜色

<style scoped>
.red {
    color: red;
}
Run Code Online (Sandbox Code Playgroud)

本质上,我正在尝试创建一个收藏按钮,您可以在其中切换收藏阵列宠物中的对象。我知道为什么我的方法会激活我所有的按钮。由于收藏夹不是按钮独有的并且来自数据。因此,当 favord = true 时,“red”类将绑定到我的所有按钮。我的问题是如何将“红色”类绑定到我单击的按钮上?我对 Vue 比较陌生,这让我发疯了哈哈!有人请告诉我如何解决这个问题。

dynamic button vue.js vue-component vuejs2

5
推荐指数
1
解决办法
1万
查看次数