actionSheet.nvue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <view class="u-page">
  3. <u-navbar
  4. title="上拉菜单"
  5. @leftClick="navigateBack"
  6. safeAreaInsetTop
  7. fixed
  8. placeholder
  9. ></u-navbar>
  10. <u-cell-group>
  11. <u-cell
  12. @click="openSheet(index)"
  13. :title="item.title"
  14. v-for="(item, index) in list"
  15. :key="index"
  16. isLink
  17. >
  18. <image
  19. slot="icon"
  20. class="u-cell-icon"
  21. :src="item.iconUrl"
  22. mode="widthFix"
  23. ></image>
  24. </u-cell>
  25. </u-cell-group>
  26. <u-action-sheet
  27. :show="show0"
  28. @close="close"
  29. @select="select"
  30. :actions="actions0"
  31. :closeOnClickOverlay="false"
  32. >
  33. </u-action-sheet>
  34. <u-action-sheet
  35. :show="show1"
  36. @close="show1 = false"
  37. :actions="actions1"
  38. >
  39. </u-action-sheet>
  40. <u-action-sheet
  41. :show="show2"
  42. @close="show2 = false"
  43. :actions="actions2"
  44. cancelText="取消"
  45. >
  46. </u-action-sheet>
  47. <u-action-sheet
  48. :show="show3"
  49. @close="show3 = false"
  50. :actions="actions3"
  51. description="这是一段描述文本,字号偏小,颜色偏淡"
  52. >
  53. </u-action-sheet>
  54. <u-action-sheet
  55. :show="show4"
  56. @close="show4 = false"
  57. title="标题位置"
  58. :round="10"
  59. >
  60. <text style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px;">这是一段通过slot传入的内容,您可以在此自定义操作面板</text>
  61. </u-action-sheet>
  62. <u-action-sheet
  63. :show="show5"
  64. @close="show5 = false"
  65. title="微信开放能力"
  66. :actions="actions5"
  67. @getuserinfo="getuserinfo"
  68. ></u-action-sheet>
  69. </view>
  70. </template>
  71. <script>
  72. export default {
  73. data() {
  74. return {
  75. show0: false,
  76. show1: false,
  77. show2: false,
  78. show3: false,
  79. show4: false,
  80. show5: false,
  81. actions0: [{
  82. name: '选项1',
  83. },
  84. {
  85. name: '选项2',
  86. },
  87. {
  88. name: '选项3',
  89. subname: '描述文本'
  90. },
  91. ],
  92. actions1: [{
  93. name: '选项1',
  94. },
  95. {
  96. loading: true
  97. },
  98. {
  99. name: '选项被禁用',
  100. disabled: true
  101. },
  102. ],
  103. actions2: [{
  104. name: '选项1',
  105. },
  106. {
  107. name: '选项2',
  108. },
  109. {
  110. name: '选项3',
  111. },
  112. ],
  113. actions3: [{
  114. name: '选项1',
  115. },
  116. {
  117. name: '选项2',
  118. },
  119. {
  120. name: '选项3',
  121. },
  122. ],
  123. actions5: [{
  124. name: '获取用户信息',
  125. openType: 'getUserInfo',
  126. color: uni.$u.color['success']
  127. }],
  128. list: [{
  129. title: '普通使用',
  130. iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/custom.png'
  131. },
  132. {
  133. title: '设置状态',
  134. iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/status.png'
  135. },
  136. {
  137. title: '显示取消按钮',
  138. iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/cancel.png'
  139. },
  140. {
  141. title: '描述内容',
  142. iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/desc.png'
  143. },
  144. {
  145. title: '显示标题(显示圆角)',
  146. iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/title.png'
  147. },
  148. {
  149. title: '微信开放能力',
  150. iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/open.png'
  151. }
  152. ]
  153. }
  154. },
  155. onLoad() {
  156. },
  157. methods: {
  158. // 点击cell,判断显示哪个功能
  159. openSheet(index) {
  160. // #ifndef MP
  161. if (index === 5) return uni.$u.toast('请在微信内预览')
  162. // #endif
  163. this[`show${index}`] = true
  164. },
  165. getuserinfo(res) {
  166. uni.$u.toast(`用户名:${res.userInfo.nickName}`)
  167. },
  168. navigateBack() {
  169. uni.navigateBack()
  170. },
  171. close() {
  172. console.log('close');
  173. this['show0'] = false
  174. },
  175. select(e) {
  176. console.log('select', e);
  177. }
  178. }
  179. }
  180. </script>
  181. <style lang="scss">
  182. .u-page {
  183. padding: 0;
  184. }
  185. </style>