1,安利学习vue的实习项目( ̄︶ ̄)↗ ,地址
有些问题还是要查找官方文档。
<template>
<div class="createPost-container">
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
<sticky :z-index="10" :class-name="'sub-navbar '+status">
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
提交
</el-button>
</sticky>
<div class="createPost-main-container">
<el-form-item style="margin-bottom: 40px;" prop="title" label-width="90px" label="标题:">
<el-input v-model="postForm.title" :rows="1" type="textarea" class="article-textarea" autosize placeholder="Please enter the content" />
</el-form-item>
<el-form-item style="margin-bottom: 40px;" prop="time" label-width="90px" label="时长:">
<el-input v-model="postForm.time" :rows="1" type="number" class="article-textarea" autosize placeholder="Please enter the content" />
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import { validNum } from '@/utils/validate'//正则数字校验函数
import { fetchVideoInfo, addVideo, updateVideo} from '@/api/scienceVideo'//交互接口
const defaultForm = {
title: '',
time:''
}
export default {
name: 'ScienceVideoDetail',
components: { UploadImg, Sticky},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
const validateRequire = (rule, value, callback) => {
if (!value) {
callback()
} else {
this.$message({
message: rule.field + '为必传项',
type: 'error'
})
callback(new Error(rule.field + '为必传项'))
}
}
const validateNumber = (rule, value, callback) => {
if (value) {
if (validNum(value)) {
callback()
} else {
this.$message({
message: '内容应为数字',
type: 'error'
})
callback(new Error('内容应为数字'))
}
} else {
callback()
}
}
return {
status:'draft',
postForm: Object.assign({}, defaultForm),
loading: false,
rules: {
title: [{ validator: validateRequire }],
time: [{ validator: validateNumber, trigger: 'blur' }]
},
}
},
computed: {},
created() {
if (this.isEdit) {
const id = this.$route.params && this.$route.params.id
//获取item信息
this.fetchData(id)
} else {
this.postForm = Object.assign({}, defaultForm)
}
},
methods: {
fetchData(id) {
fetchVideoInfo(id).then(response => {
this.postForm = response.data
}).catch(err => {
console.log(err)
})
},
submitForm() {
console.log(this.postForm)
this.$refs.postForm.validate(valid => {
if(this.isEdit){
updateVideo(this.postForm).then(response => {
this.loading = true
this.$notify({
title: '成功',
message: '修改文章成功',
type: 'success',
duration: 2000
})
this.loading = false
this.$router.push({ path: '/videoList' })
}).catch(err => {
console.log(err)
})
}else{
addVideo(this.postForm).then(response => {
this.loading = true
this.$notify({
title: '成功',
message: '发布文章成功',
type: 'success',
duration: 2000
})
this.loading = false
this.$router.push({ path: '/videoList' })
}).catch(err => {
console.log(err)
})
}
})
},
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
</style>