quick-menu.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!-- 下拉菜单组件 -->
  2. <template>
  3. <view class="quick-menu">
  4. <view class="menu">
  5. <view class="triangle"></view>
  6. <view class="title">
  7. <view class="lines" v-for="(item,index) in actions" :key="index" @click="handleClick(item, index)" >
  8. <uni-icons :type='item.icon' class="icon" />
  9. {{item.text}}
  10. </view>
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. import uniIcons from './uni-icons/uni-icons.vue'
  17. export default {
  18. components: {
  19. uniIcons
  20. },
  21. name: 'quick-menu',
  22. props: {
  23. actions: {
  24. type: Array,
  25. default() {
  26. return []
  27. }
  28. }
  29. },
  30. methods: {
  31. handleClick(data, index) {
  32. if (typeof data.click === 'function') {
  33. data.click(data, index)
  34. } else {
  35. this.$emit('click', data, index)
  36. }
  37. }
  38. }
  39. }
  40. </script>
  41. <style scoped>
  42. .quick-menu{
  43. width: 110px;
  44. z-index: 999;
  45. background-color:rgba(0,0,0,0.8);
  46. position: fixed;
  47. top: 90upx;
  48. /* #ifndef H5 */
  49. top:16upx;
  50. /* #endif */
  51. right: 0upx;
  52. border-radius: 5px;
  53. animation-name: zoomin;
  54. animation-duration: 0.2s;
  55. -webkit-animation-name: zoomin;
  56. -webkit-animation-duration: 0.2s;
  57. font-size: 14px;
  58. }
  59. .triangle {
  60. width:0;
  61. height:0;
  62. z-index: 999;
  63. position: fixed;
  64. top: 70upx;
  65. /* #ifndef H5 */
  66. top: 0upx;
  67. /* #endif */
  68. right: 15upx;
  69. border-right: 10px solid transparent;
  70. border-left: 10px solid transparent;
  71. border-bottom: 12px solid #393A3E;
  72. }
  73. .lines{
  74. width: calc(100% - 20px);
  75. padding: 0px 10px;
  76. height: 35px;
  77. line-height: 35px;
  78. border-bottom: 1px #fff dashed ;
  79. color: #fff;
  80. text-align: center;
  81. }
  82. .content{
  83. display: flex;
  84. align-items: center;
  85. margin-top: 15upx;
  86. padding-bottom: 15upx;
  87. border-bottom: 1px solid #2E2F33;
  88. }
  89. .lastContent{
  90. display: flex;
  91. align-items: center;
  92. margin-top: 15upx;
  93. padding-bottom: 15upx;
  94. }
  95. .lines .icon {
  96. color:#fff !important
  97. }
  98. .text {
  99. color: #FFFFFF;
  100. margin-top: 4upx;
  101. font-size: 14px;
  102. }
  103. /* 下拉列表组件动画 */
  104. @keyframes zoomin {
  105. from {
  106. transform: scale(0.5,0.5);
  107. opacity: 0;
  108. filter: alpha(opacity=0);
  109. }
  110. to {
  111. transform: scale(1,1);
  112. opacity: 1;
  113. filter: alpha(opacity=100);
  114. }
  115. }
  116. @-webkit-keyframes zoomin {
  117. from {
  118. -webkit-transform: scale(0.5,0.5);
  119. opacity: 0;
  120. filter: alpha(opacity=0);
  121. }
  122. to {
  123. -webkit-transform: scale(1,1);
  124. opacity: 1;
  125. filter: alpha(opacity=100);
  126. }
  127. }
  128. </style>