12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- <template lang="pug">
- transition-group(name="list" tag="ul" class="cart-items")
- cart-item(v-for="item in items" v-bind:key="item" :item="item" :symbol="symbol")
- </template>
- <script>
- import CartItem from '@/components/CartItem'
- import { mapGetters, mapActions } from 'vuex'
- export default {
- props: {
- symbol: {
- type: String,
- default: '$'
- }
- },
- components: {
- 'cart-item': CartItem
- },
- computed: mapGetters({
- items: 'getCartItems'
- }),
- methods: mapActions([
- 'addToCart',
- 'removeFromCart'
- ])
- }
- </script>
- <style lang="sass">
- .cart-items-wrapper
- width: 100%
- height: 100%
- overflow-y: auto
- overflow-x: hidden
- .cart-items
- width: 100%
- height: calc(100% - 30px)
- padding: 0
- margin: 15px 0
- .list-enter-active, .list-leave-active
- transition: all 0.3s
- .list-enter, .list-leave-to
- opacity: 0
- transform: translateX(300px)
- </style>
|