cl-column.vue 850 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <view
  3. :class="['cl-column', `cl-column--${type}`, `is-justify-${justify}`, `is-align-${align}`]"
  4. :style="{
  5. height: parseRpx(height),
  6. width: parseRpx(width),
  7. padding: parseRpx(padding),
  8. margin: parseRpx(margin),
  9. borderRadius: parseRpx(borderRadius),
  10. border,
  11. backgroundColor
  12. }"
  13. >
  14. <slot></slot>
  15. </view>
  16. </template>
  17. <script>
  18. import { parseRpx } from "../../utils";
  19. export default {
  20. name: "cl-column",
  21. componentName: "ClColumn",
  22. props: {
  23. type: String,
  24. border: String,
  25. backgroundColor: String,
  26. justify: {
  27. type: String,
  28. default: "start"
  29. },
  30. align: {
  31. type: String,
  32. default: "top"
  33. },
  34. height: [String, Number],
  35. width: [String, Number],
  36. padding: [String, Number, Array],
  37. margin: [String, Number, Array],
  38. borderRadius: [String, Number]
  39. },
  40. methods: {
  41. parseRpx
  42. }
  43. };
  44. </script>