DropdownMenu.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <div :class="{active:isActive}" class="share-dropdown-menu">
  3. <div class="share-dropdown-menu-wrapper">
  4. <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
  5. <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
  6. <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
  7. <span v-else>{{ item.title }}</span>
  8. </div>
  9. </div>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. props: {
  15. items: {
  16. type: Array,
  17. default: function() {
  18. return []
  19. }
  20. },
  21. title: {
  22. type: String,
  23. default: 'vue'
  24. }
  25. },
  26. data() {
  27. return {
  28. isActive: false
  29. }
  30. },
  31. methods: {
  32. clickTitle() {
  33. this.isActive = !this.isActive
  34. }
  35. }
  36. }
  37. </script>
  38. <style lang="scss" >
  39. $n: 9; //和items.length 相同
  40. $t: .1s;
  41. .share-dropdown-menu {
  42. width: 250px;
  43. position: relative;
  44. z-index: 1;
  45. height: auto!important;
  46. &-title {
  47. width: 100%;
  48. display: block;
  49. cursor: pointer;
  50. background: black;
  51. color: white;
  52. height: 60px;
  53. line-height: 60px;
  54. font-size: 20px;
  55. text-align: center;
  56. z-index: 2;
  57. transform: translate3d(0,0,0);
  58. }
  59. &-wrapper {
  60. position: relative;
  61. }
  62. &-item {
  63. text-align: center;
  64. position: absolute;
  65. width: 100%;
  66. background: #e0e0e0;
  67. color: #000;
  68. line-height: 60px;
  69. height: 60px;
  70. cursor: pointer;
  71. font-size: 18px;
  72. overflow: hidden;
  73. opacity: 1;
  74. transition: transform 0.28s ease;
  75. &:hover {
  76. background: black;
  77. color: white;
  78. }
  79. @for $i from 1 through $n {
  80. &:nth-of-type(#{$i}) {
  81. z-index: -1;
  82. transition-delay: $i*$t;
  83. transform: translate3d(0, -60px, 0);
  84. }
  85. }
  86. }
  87. &.active {
  88. .share-dropdown-menu-wrapper {
  89. z-index: 1;
  90. }
  91. .share-dropdown-menu-item {
  92. @for $i from 1 through $n {
  93. &:nth-of-type(#{$i}) {
  94. transition-delay: ($n - $i)*$t;
  95. transform: translate3d(0, ($i - 1)*60px, 0);
  96. }
  97. }
  98. }
  99. }
  100. }
  101. </style>