uni-sub-menu.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <view class="uni-sub-menu">
  3. <view class="uni-sub-menu__title" :class="{'is-disabled':disabled}" :style="{paddingLeft:paddingLeft}" @click="select">
  4. <view class="uni-sub-menu__title-sub" :style="{color:disabled?'#999':textColor}">
  5. <slot name="title"></slot>
  6. </view>
  7. <uni-icons class="uni-sub-menu__icon" :class="{transition:isOpen}" type="arrowdown" color="#bbb" size="14"></uni-icons>
  8. </view>
  9. <view class="uni-sub-menu__content" :class="{'uni-sub-menu--close':!isOpen}" :style="{'background-color':backgroundColor}">
  10. <view id="content--hook">
  11. <slot></slot>
  12. </view>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. import rootParent from '../uni-nav-menu/mixins/rootParent.js'
  18. export default {
  19. name: 'uniSubMenu',
  20. mixins: [rootParent],
  21. props: {
  22. // 唯一标识
  23. index: {
  24. type: [String,Object],
  25. default(){
  26. return ''
  27. }
  28. },
  29. // TODO 自定义类名
  30. popperClass: {
  31. type: String,
  32. default: ''
  33. },
  34. // TODO 是否禁用
  35. disabled: {
  36. type: Boolean,
  37. default: false
  38. },
  39. // 展开菜单的背景色
  40. backgroundColor: {
  41. type: String,
  42. default: '#f5f5f5'
  43. },
  44. },
  45. data() {
  46. return {
  47. height: 0,
  48. oldheight: 0,
  49. isOpen: false,
  50. textColor:'#303133'
  51. };
  52. },
  53. computed: {
  54. paddingLeft() {
  55. return 20 + 20 * this.rootMenu.SubMenu.length + 'px'
  56. }
  57. },
  58. created() {
  59. this.init()
  60. },
  61. destroyed() {
  62. // 销毁页面后,将当前页面实例从数据中删除
  63. if (this.$menuParent) {
  64. const menuIndex = this.$menuParent.subChildrens.findIndex(item => item === this)
  65. this.$menuParent.subChildrens.splice(menuIndex, 1)
  66. }
  67. },
  68. methods: {
  69. init() {
  70. // 所有父元素
  71. this.rootMenu = {
  72. NavMenu: [],
  73. SubMenu: []
  74. }
  75. this.childrens = []
  76. this.indexPath = []
  77. // 获取直系的所有父元素实例
  78. this.getParentAll('SubMenu', this)
  79. // 获取最外层父元素实例
  80. this.$menuParent = this.getParent('uniNavMenu', this)
  81. this.textColor = this.$menuParent.textColor
  82. // 直系父元素 SubMenu
  83. this.$subMenu = this.rootMenu.SubMenu
  84. // 将当前插入到menu数组中
  85. if(this.$menuParent){
  86. this.$menuParent.subChildrens.push(this)
  87. }
  88. },
  89. select() {
  90. if(this.disabled) return
  91. // 手动开关 sunMenu
  92. this.$menuParent.selectMenu(this)
  93. },
  94. open() {
  95. this.isOpen = true
  96. },
  97. close() {
  98. this.isOpen = false
  99. }
  100. }
  101. }
  102. </script>
  103. <style lang="scss">
  104. .uni-sub-menu {
  105. position: relative;
  106. /* background-color: #FFFFFF; */
  107. }
  108. .uni-sub-menu__title {
  109. display: flex;
  110. align-items: center;
  111. padding: 0 20px;
  112. padding-right: 10px;
  113. height: 56px;
  114. line-height: 56px;
  115. color: #303133;
  116. cursor: pointer;
  117. /* border-bottom: 1px #f5f5f5 solid; */
  118. }
  119. .uni-sub-menu__title:hover {
  120. color: #42B983;
  121. outline: none;
  122. background-color: #EBEBEB;
  123. }
  124. .uni-sub-menu__title-sub {
  125. display: flex;
  126. align-items: center;
  127. flex: 1;
  128. }
  129. .uni-sub-menu--close {
  130. height: 0;
  131. /* transition: all 0.3s; */
  132. }
  133. .uni-sub-menu__content {
  134. overflow: hidden;
  135. }
  136. .uni-sub-menu__icon {
  137. max-height: auto;
  138. transition: all 0.2s;
  139. }
  140. .transition {
  141. transform: rotate(-180deg);
  142. }
  143. .is-disabled {
  144. /* background-color: #f5f5f5; */
  145. color: red;
  146. }
  147. .uni-sub-menu__title.is-disabled:hover {
  148. background-color: inherit;
  149. color: #999;
  150. cursor: not-allowed;
  151. }
  152. </style>