z-paging-cell.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!-- z-paging -->
  2. <!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
  3. <!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
  4. <!-- 反馈QQ群:790460711 -->
  5. <!-- z-paging-cell,用于在nvue中使用cell包裹,vue中使用view包裹 -->
  6. <template>
  7. <!-- #ifdef APP-NVUE -->
  8. <cell :style="[cellStyle]" @touchstart="onTouchstart">
  9. <slot />
  10. </cell>
  11. <!-- #endif -->
  12. <!-- #ifndef APP-NVUE -->
  13. <view :style="[cellStyle]" @touchstart="onTouchstart">
  14. <slot />
  15. </view>
  16. <!-- #endif -->
  17. </template>
  18. <script>
  19. /**
  20. * z-paging-cell 组件
  21. * @description 用于兼容 nvue 和 vue 中的 cell 渲染。因为在 nvue 中 z-paging 内置的是 list,因此列表 item 必须使用 cell 包住;在 vue 中不能使用 cell,否则会报组件找不到的错误。此子组件为了兼容这两种情况,内部作了条件编译处理。
  22. * @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-cell配置
  23. * @notice 以下为 z-paging-cell 的配置项
  24. * @property {Object} cellStyle cell 样式,默认为 {}
  25. * @example <z-paging-cell :cellStyle="{ backgroundColor: '#f0f0f0' }"></z-paging-cell>
  26. */
  27. export default {
  28. name: "z-paging-cell",
  29. props: {
  30. //cellStyle
  31. cellStyle: {
  32. type: Object,
  33. default: function() {
  34. return {}
  35. }
  36. }
  37. },
  38. methods: {
  39. onTouchstart(e) {
  40. this.$emit('touchstart', e);
  41. }
  42. }
  43. }
  44. </script>