评论页面cub-ui（源码和图）

官方: https://didi.github.io/cube-ui/#/zh-CN/docs/form

源码：

<template>
  <div>
    <!-- model 就是整个表单需要的数据源，schema 就是生成表单所定义的模式，immediate-validate 如果为 true 则初始时立即做校验，options 则是配置选项。submit 校验成功后提交事件，validate 每次有数据校验更新的事件，reset 则是重置事件。 -->
    <cube-form
      :model="model"
      :schema="schema"
      :immediate-validate="false"
      :options="options"
      @validate="validateHandler"
      @submit="submitHandler"
      @reset="resetHandler"
    ></cube-form>
    <!-- <div class="star-wrapper">
      <span>机舱环境</span>
      <cube-rate v-model="value">
        <cube-rate-item v-for="n in max" :key="n" :value="value1" :index="n">
          <div class="rate-item"></div>
        </cube-rate-item>
      </cube-rate>
    </div>
    <div class="star-wrapper">
      <span>服务态度</span>
      <cube-rate v-model="value2"></cube-rate>
    </div>
    <div class="info">
      <div style=" margin:30px 5px 20px; border:1px solid #999;">
        <cube-textarea indicator="indicator" placeholder="请输入您的意见或建议"></cube-textarea>
        div
        <cube-upload
          ref="upload"
          :action="action"
          :simultaneous-uploads="1"
          :process-file="processFile"
          @file-submitted="fileSubmitted"
        />
      </div>
      <cube-radio-group v-model="selected" :options="options"/>
      <cube-input v-model="text" placeholder="请输入您的手机号"></cube-input>
      <br>
      <cube-button type="submit" @click="submitBtn">提 交</cube-button>
    </div>-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      value1: '',
      value2: '',
      selected: '',
    //   options: ['匿名评价'],
      action: {
        // target: '//jsonplaceholder.typicode.com/photos/',
        prop: 'base64Value'
      },
      validity: {},
      valid: undefined,
      model: {
        checkboxValue: false,
        checkboxGroupValue: [],
        inputValue: '',
        radioValue: '',
        rateValue: 0,
        selectValue: 2018,
        switchValue: true,
        textareaValue: '',
        uploadValue: []
      },
      schema: {
        groups: [
          {
            legend: '',
            fields: [
              {
                type: 'rate',
                modelKey: 'rateValue',
                label: '机舱环境',
                rules: {
                  required: true
                }
              },
              {
                type: 'rate',
                modelKey: 'rateValue2',
                label: '服务态度',
                rules: {
                  required: true
                }
              }
            ]
          },
          {
            legend: '',
            fields: [
                {
                type: 'textarea',
                modelKey: 'textareaValue',
                label: '意见或建议',
                rules: {
                  required: true
                },
                // debounce validate
                // if set to true, the default debounce time will be 200(ms)
                debounce: 100
              },
              {
                type: 'upload',
                modelKey: 'uploadValue',
                label: '上传图片',
                events: {
                  'file-removed': (...args) => {
                    console.log('file removed', args)
                  }
                },
                rules: {
                  required: true,
                  uploaded: (val, config) => {
                    return Promise.all(
                      val.map((file, i) => {
                        return new Promise((resolve, reject) => {
                          if (file.uploadedUrl) {
                            return resolve()
                          }
                          // fake request
                          setTimeout(() => {
                            if (i % 2) {
                              reject(new Error())
                            } else {
                              file.uploadedUrl = 'uploaded/url'
                              resolve()
                            }
                          }, 1000)
                        })
                      })
                    ).then(() => {
                      return true
                    })
                  }
                },
                messages: {
                  uploaded: '上传失败'
                }
              },
              {
                type: 'checkbox',
                modelKey: 'checkboxValue',
                props: {
                  option: {
                    label: '匿名',
                    value: true
                  }
                },
                rules: {
                  required: false
                },
                messages: {
                  required: 'Please check this field'
                }
              },
              {
                type: 'input',
                modelKey: 'inputValue',
                label: '手机号',
                props: {
                  placeholder: '请输入您的联系方式'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              }

            ]
          },
          {
            fields: [
              {
                type: 'submit',
                label: 'Submit'
              },
              {
                type: 'reset',
                label: 'Reset'
              }
            ]
          }
        ]
      },
      options: {
        scrollToInvalidField: true,
        layout: 'standard' // classic fresh
      }
    }
  },
  methods: {
    submitHandler(e) {
      this.$router.push('/main')
      e.preventDefault()
      console.log('submit', e)
    },
    validateHandler(result) {
      this.validity = result.validity
      this.valid = result.valid
      console.log(
        'validity',
        result.validity,
        result.valid,
        result.dirty,
        result.firstInvalidFieldIndex
      )
    },
    resetHandler(e) {
      console.log('reset', e)
    }
  }
}
</script>

<style lang="stylus" scoped>
.star-wrapper {
  margin-top: 10px;
  margin-left: 20px;
  padding: 2px 0;
  text-align: left;
  line-height: 40px;

  .rate-item {
    width: 50%;
    height: 50%;
    background-size: 50%;
    background-color: grey;

    .cube-rate-item.active, .rate-item {
      background-color: orange;
    }
  }
}

.info {
  margin: 0 20px;
}
</style>