最近看了看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
网友评论