vue3-compositionapi使用尝试

作者: 漫漫江雪 | 来源:发表于2021-09-02 15:54 被阅读0次

vue3-compositionapi使用尝试
尝试使用
尝试使用router
尝试使用Markdowns
首次尝试使用
尝试使用Markdown
docker 启动失败问题
Ubuntu 14->16提示no new release fo
滴答清单使用尝试
尝试使用简书

最近看了看vue3知识，对组合api做个简单的使用尝试，记录一下

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自动生成app版本发布文件夹及相应文件</title>
    <link rel="stylesheet" href="js/element-plus/index.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body,
      #app {
        height: 100%;
      }
      body {
        background: url(images/bg.webp) no-repeat;
        background-size: cover;
        overflow: hidden;
      }
      [v-cloak] {
        display: none;
      }
      .form-box {
        width: 600px;
        left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        border: 1px solid rgb(73, 90, 141);
        border-radius: 8px;
        padding: 10px 20px 0px 10px;
        background-color: rgba(235, 226, 211, 0.8);
      }
      .form-box .tit {
        font-size: 16px;
        text-align: center;
        line-height: 30px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="form-box">
        <h2 class="tit">创建app版本更新所需要的文件</h2>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="版本号" prop="version">
            <el-input v-model="form.version" placeholder="如：2.10.1"></el-input>
          </el-form-item>
          <el-form-item label="发版日期" prop="versionTime">
            <el-date-picker
              v-model="form.versionTime"
              type="date"
              format="YYYY 年 MM 月 DD 日"
              value-format="YYYY年MM日DD"
              placeholder="选择发版日期"
              :disabled-date="disabledDate"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="版本更新说明" prop="remarks">
            <el-input type="textarea" v-model="form.remarks" rows="6" placeholder="当前版本要更新的一些说明信息,换行填写多条记录"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :loading="isLoading">立即创建</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/element-plus/index.full.js"></script>
    <script src="js/element-plus/locale/zh-cn.js"></script>
    <script>
      const app = Vue.createApp({
        setup() {
          const { reactive, toRefs, ref } = Vue
          const { ElMessage } = ElementPlus
          const formRef = ref(null)
          const data = reactive({
            isLoading: false,
            form: {
              version: '',
              versionTime: '',
              remarks: ''
            },
            rules: {
              version: [
                { required: true, message: '请填写版本号', trigger: 'change' },
                {
                  validator: (rule, value, callback) => {
                    const reg = /^(\d+\.)+\d$/
                    if (reg.test(value)) {
                      callback()
                    } else {
                      callback(new Error('您的输入与版本格式不符, 正确格式：2.10.0'))
                    }
                  },
                  trigger: 'change'
                }
              ],
              versionTime: [{ required: true, message: '请选择发版日期', trigger: 'change' }],
              remarks: [{ required: true, message: '请填写版本更新说明', trigger: 'change' }]
            }
          })
          const onSubmit = () => {
            if (formRef.value) {
              formRef.value.validate((valid) => {
                // 如果表单验证通过，向后台发送创建的请求
                if (valid) {
                  const postData = { ...data.form }
                  data.isLoading = true
                  axios
                    .post('/create', { ...data.form })
                    .then((res) => {
                      data.isLoading = false
                      if (res.data.code === 200) {
                        formRef.value.resetFields() // 重置表单
                        ElMessage.success(res.data.msg)
                      } else {
                        ElMessage.error(res.data.msg)
                      }
                    })
                    .catch(() => {
                      data.isLoading = false
                    })
                }
              })
            }
          }
          const resetForm = () => {
            formRef.value.resetFields()
          }
          const disabledDate = (time) => {
            // 超出当前时间不让选择
            return time.getTime() > Date.now()
          }
          return { ...toRefs(data), formRef, onSubmit, resetForm, disabledDate }
        }
      })
      app.use(ElementPlus, { size: 'small', locale: ElementPlus.lang.zhCn })
      app.mount('#app')
    </script>
  </body>
</html>

create.gif