总结

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