tui-label.vue 932 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <view class="tui-label__box" :class="{'tui-label__full':isFull}" :style="{padding:padding,margin:margin}"
  3. @tap.stop="onClick">
  4. <slot></slot>
  5. </view>
  6. </template>
  7. <script>
  8. //该组件主要用于tui-radio,tui-checkbox,tui-switch组件外层,类似label功能
  9. export default {
  10. name: "tui-label",
  11. props: {
  12. padding: {
  13. type: String,
  14. default: '0'
  15. },
  16. margin: {
  17. type: String,
  18. default: '0'
  19. },
  20. isFull: {
  21. type: Boolean,
  22. default: false
  23. }
  24. },
  25. created() {
  26. this.childrens = [];
  27. },
  28. methods: {
  29. onClick() {
  30. if (this.childrens && this.childrens.length > 0) {
  31. for (let child of this.childrens) {
  32. child.labelClick()
  33. }
  34. }
  35. }
  36. }
  37. }
  38. </script>
  39. <style scoped>
  40. .tui-label__box {
  41. /* #ifndef APP-NVUE */
  42. box-sizing: border-box;
  43. /* #endif */
  44. }
  45. .tui-label__full {
  46. flex: 1;
  47. /* #ifndef APP-NVUE */
  48. width: 100%;
  49. /* #endif */
  50. }
  51. </style>