总结

  1. 终止循环的条件判断,单独写
  2. 表单赋值可以用es6的解构赋值
  3. 当条件为真假时,可用赋值的形式
  4. 定义全局变量,便于后期维护
  5. 写代码之前,需要考虑是否拆分组件(原因:计算属性默认只有getter,没有setter,所以计算属性不支持数据的修改,只能对data中的数据进行引用计算。)

修改之前
image.png
修改之后
image.png
修改之前
image.png
修改之后
image.png

修改之前
image.png
修改之后
image.png
没拆分组件之前
image.png
拆分组件之后
image.png
image.png
image.png
image.png

  1. <template>
  2. <view class="pi-pd-lr-32 pi-bg-white pi-pd-top-30 pi-pd-bottom-32 pi-mg-top-2">
  3. <view class="pi-flex pi-justify-between">
  4. <view class="pi-fz-28 pi-fw-400">{{ item.title }}</view>
  5. <pi-radio-group
  6. v-model="status"
  7. shape="round"
  8. style="width: auto;"
  9. size="32"
  10. icon-size="22"
  11. @change="handleSelectStatus(status, item.key)"
  12. >
  13. <pi-radio active-color="#FF8A24" active-mode="fill" :name="0"></pi-radio>
  14. <pi-radio active-color="#FF8A24" active-mode="fill" :name="1">
  15. </pi-radio>
  16. </pi-radio-group>
  17. </view>
  18. <view v-if="status === 1 && !item.isSingle">
  19. <pi-input
  20. v-model="content"
  21. placeholder="请补充您的确诊疾病名称"
  22. placeholder-style="font-size:28rpx;color:#cccccc"
  23. maxlength="200"
  24. type="textarea"
  25. class="textarea pi-pd-lr-24 pi-pd-top-32 pi-mg-top-38"
  26. style="background: #f4f4f4;"
  27. :custom-style="{ height: '180rpx' }"
  28. />
  29. <view class="pi-flex pi-flex-wrap">
  30. <view
  31. v-for="(text, tipsIndex) in item.tips"
  32. :key="tipsIndex"
  33. class="tips pi-mg-top-32 pi-flex pi-justify-center pi-align-center pi-fz-24 pi-gray pi-mg-right-16"
  34. @click="handleAppendTips(text, item.key)"
  35. >
  36. {{ text }}
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. const TAG_NAME = 'PatientHistoryInfo'
  44. export default {
  45. name: TAG_NAME,
  46. components: {},
  47. filters: {},
  48. props: {
  49. item: {
  50. type: Object,
  51. default: () => {}
  52. }
  53. },
  54. data() {
  55. return {
  56. content: '', // 文本域输入的内容
  57. status: 0 // 选择的状态
  58. }
  59. },
  60. computed: {},
  61. watch: {
  62. content: {
  63. handler: function(content) {
  64. this.$emit('add', content, this.item.key, this.status, this.item.isSingle)
  65. },
  66. deep: true
  67. },
  68. status: {
  69. handler: function(status) {
  70. this.$emit('add', this.content, this.item.key, status, this.item.isSingle)
  71. },
  72. deep: true
  73. },
  74. item: {
  75. handler: function(item) {
  76. if (item.isSingle) {
  77. // 单选操作
  78. this.status = item.status
  79. } else if (item.content && !item.isSingle) {
  80. // 内容不为空,赋值
  81. this.status = 1
  82. this.content = item.content
  83. }
  84. },
  85. deep: true
  86. }
  87. },
  88. methods: {
  89. // 追加提示
  90. handleAppendTips(text, key) {
  91. this.content += (this.content && ',') + text
  92. },
  93. // 选择状态
  94. handleSelectStatus(status, key) {
  95. this.status = status
  96. if (this.status === 0) this.content = ''
  97. }
  98. }
  99. }
  100. </script>