Offer Сard

Basic usage

<mu-offer-card 
    :shop="shopItem" 
    :like-action="likeAction" 
/>
1
2
3
4
export default {
    data() {
        return {
            shopItem: {
                id: 1,
                link: 'https://epn.bz/en',
                name: 'Shop',
                percent: '0.001%',
                persentPhrase: 'up to',
                logo: 'https://cdn1.epn.bz/public/7be55b97ccd52d3d15e2a0ea0a3c1b9c.png',
                favorite: false,
            },
        };
    },
    methods: {
        likeAction() {
            this.shopItem.favorite = !this.shopItem.favorite;
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Promo event

<mu-offer-card 
    :shop="shopItem" 
    :like-action="likeAction" 
/>
1
2
3
4
export default {
    data() {
        return {
            shopItem: {
                id: 1,
                link: 'https://epn.bz/en',
                name: 'Shop',
                percent: '0.001%',
                persentPhrase: 'up to',
                hotsaleInfo: 'Promo',
                hotsaleColor: '#e5353e',
                logo: 'https://cdn1.epn.bz/public/7be55b97ccd52d3d15e2a0ea0a3c1b9c.png',
                favorite: false,
            },
        };
    },
    methods: {
        likeAction() {
            this.shopItem.favorite = !this.shopItem.favorite;
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Static card - big

<mu-offer-card 
    :shop="shopItem" 
    :like-action="likeAction" 
    size="staticBig"
>
    <template slot="footer">
        <el-button type="primary">Don't click me</el-button>
    </template>
</mu-offer-card>
1
2
3
4
5
6
7
8
9
export default {
    data() {
        return {
            shopItem: {
                id: 1,
                link: 'https://epn.bz/en',
                name: 'Shop',
                percent: '0.001%',
                persentPhrase: 'up to',
                logo: 'https://cdn1.epn.bz/public/7be55b97ccd52d3d15e2a0ea0a3c1b9c.png',
                favorite: false,
            },
        };
    },
    methods: {
        likeAction() {
            this.shopItem.favorite = !this.shopItem.favorite;
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Static card - small

<mu-offer-card 
    :shop="shopItem" 
    :like-action="likeAction"
    size="staticSmall" 
/>
1
2
3
4
5
export default {
    data() {
        return {
            shopItem: {
                id: 1,
                link: 'https://epn.bz/en',
                name: 'Shop',
                percent: '0.001%',
                persentPhrase: 'up to',
                logo: 'https://cdn1.epn.bz/public/7be55b97ccd52d3d15e2a0ea0a3c1b9c.png',
                favorite: false,
            },
        };
    },
    methods: {
        likeAction() {
            this.shopItem.favorite = !this.shopItem.favorite;
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Static card - grid responsive

<mu-offer-card 
    :shop="shopItem" 
    :like-action="likeAction" 
    size="grid" 
/>
1
2
3
4
5
export default {
    data() {
        return {
            shopItem: {
                id: 1,
                link: 'https://epn.bz/en',
                name: 'Shop',
                percent: '50%',
                percentSale: '90%',
                persentPhrase: 'up to',
                logo: 'https://cdn1.epn.bz/public/7be55b97ccd52d3d15e2a0ea0a3c1b9c.png',
                favorite: false,
            },
        };
    },
    methods: {
        likeAction() {
            this.shopItem.favorite = !this.shopItem.favorite;
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Attributes

Attribute Description Type Accepted Values Default
shop Offer object Object {} Require
hrefTarget Targer for href String _blank, _self, _parent, _top _self
size Use if you need static size String staticSmall, staticBig empty string
likeAction Handler for like button Function () => {} true