最近看了看vue3知識(shí)撕贞，對(duì)組合api做個(gè)簡(jiǎn)單的使用嘗試舱沧，記錄一下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自動(dòng)生成app版本發(fā)布文件夾及相應(yīng)文件</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">創(chuàng)建app版本更新所需要的文件</h2>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="版本號(hào)" prop="version">
<el-input v-model="form.version" placeholder="如：2.10.1"></el-input>
</el-form-item>
<el-form-item label="發(fā)版日期" prop="versionTime">
<el-date-picker
v-model="form.versionTime"
type="date"
format="YYYY 年 MM 月 DD 日"
value-format="YYYY年MM日DD"
placeholder="選擇發(fā)版日期"
:disabled-date="disabledDate"
></el-date-picker>
</el-form-item>
<el-form-item label="版本更新說(shuō)明" prop="remarks">
<el-input type="textarea" v-model="form.remarks" rows="6" placeholder="當(dāng)前版本要更新的一些說(shuō)明信息,換行填寫(xiě)多條記錄"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" :loading="isLoading">立即創(chuàng)建</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: '請(qǐng)?zhí)顚?xiě)版本號(hào)', 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: '請(qǐng)選擇發(fā)版日期', trigger: 'change' }],
remarks: [{ required: true, message: '請(qǐng)?zhí)顚?xiě)版本更新說(shuō)明', trigger: 'change' }]
}
})
const onSubmit = () => {
if (formRef.value) {
formRef.value.validate((valid) => {
// 如果表單驗(yàn)證通過(guò)，向后臺(tái)發(fā)送創(chuàng)建的請(qǐng)求
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) => {
// 超出當(dāng)前時(shí)間不讓選擇
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
