CartItems.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template lang="pug">
  2. transition-group(name="list" tag="ul" class="cart-items")
  3. cart-item(v-for="item in items" v-bind:key="item" :item="item" :symbol="symbol")
  4. </template>
  5. <script>
  6. import CartItem from '@/components/CartItem'
  7. import { mapGetters, mapActions } from 'vuex'
  8. export default {
  9. props: {
  10. symbol: {
  11. type: String,
  12. default: '$'
  13. }
  14. },
  15. components: {
  16. 'cart-item': CartItem
  17. },
  18. computed: mapGetters({
  19. items: 'getCartItems'
  20. }),
  21. methods: mapActions([
  22. 'addToCart',
  23. 'removeFromCart'
  24. ])
  25. }
  26. </script>
  27. <style lang="sass">
  28. .cart-items-wrapper
  29. width: 100%
  30. height: 100%
  31. overflow-y: auto
  32. overflow-x: hidden
  33. .cart-items
  34. width: 100%
  35. height: calc(100% - 30px)
  36. padding: 0
  37. margin: 15px 0
  38. .list-enter-active, .list-leave-active
  39. transition: all 0.3s
  40. .list-enter, .list-leave-to
  41. opacity: 0
  42. transform: translateX(300px)
  43. </style>