学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

93 lines
2.7 KiB

1 year ago
  1. <template>
  2. <view
  3. class="u-row"
  4. ref="u-row"
  5. :style="[rowStyle]"
  6. @tap="clickHandler"
  7. >
  8. <slot />
  9. </view>
  10. </template>
  11. <script>
  12. // #ifdef APP-NVUE
  13. const dom = uni.requireNativePlugin('dom')
  14. // #endif
  15. import props from './props.js';
  16. /**
  17. * Row 栅格系统中的行
  18. * @description 通过基础的 12 分栏迅速简便地创建布局
  19. * @tutorial https://www.uviewui.com/components/layout.html
  20. * @property {String | Number} gutter 栅格间隔左右各为此值的一半单位px (默认 0 )
  21. * @property {String} justify 水平排列方式(微信小程序暂不支持) 可选值为`start`(`flex-start`)`end`(`flex-end`)`center``around`(`space-around`)`between`(`space-between`) (默认 'start' )
  22. * @property {String} align 垂直排列方式 (默认 'center' )
  23. * @property {Object} customStyle 定义需要用到的外部样式
  24. *
  25. * @event {Function} click row被点击
  26. * @example <u-row justify="space-between" customStyle="margin-bottom: 10px"></u-row>
  27. */
  28. export default {
  29. name: "u-row",
  30. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  31. data() {
  32. return {
  33. }
  34. },
  35. computed: {
  36. uJustify() {
  37. if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify
  38. else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify
  39. else return this.justify
  40. },
  41. uAlignItem() {
  42. if (this.align == 'top') return 'flex-start'
  43. if (this.align == 'bottom') return 'flex-end'
  44. else return this.align
  45. },
  46. rowStyle() {
  47. const style = {
  48. alignItems: this.uAlignItem,
  49. justifyContent: this.uJustify
  50. }
  51. // 通过给u-row左右两边的负外边距,消除u-col在有gutter时,第一个和最后一个元素的左内边距和右内边距造成的影响
  52. if(this.gutter) {
  53. style.marginLeft = uni.$u.addUnit(-Number(this.gutter)/2)
  54. style.marginRight = uni.$u.addUnit(-Number(this.gutter)/2)
  55. }
  56. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  57. }
  58. },
  59. methods: {
  60. clickHandler(e) {
  61. this.$emit('click')
  62. },
  63. async getComponentWidth() {
  64. // 延时一定时间,以确保节点渲染完成
  65. await uni.$u.sleep()
  66. return new Promise(resolve => {
  67. // uView封装的获取节点的方法,详见文档
  68. // #ifndef APP-NVUE
  69. this.$uGetRect('.u-row').then(res => {
  70. resolve(res.width)
  71. })
  72. // #endif
  73. // #ifdef APP-NVUE
  74. // nvue的dom模块用于获取节点
  75. dom.getComponentRect(this.$refs['u-row'], (res) => {
  76. resolve(res.size.width)
  77. })
  78. // #endif
  79. })
  80. },
  81. }
  82. }
  83. </script>
  84. <style lang="scss" scoped>
  85. @import "../../libs/css/components.scss";
  86. .u-row {
  87. @include flex;
  88. }
  89. </style>