拷贝vue项目到本地,运行出错时:
删除node_module文件,执行 npm install
引入simplemde文本域:
执行命令
npm install simplemde --save //markdown编辑器
npm install font-awesome --save //FontAwesome字体图标
npm install showdown --save //转换markdown语法
模块
<template>
<textarea ref="editor"></textarea>
</template>
<script>
import SimpleMDE from "simplemde";
import 'font-awesome/css/font-awesome.min.css'
export default {
name: "Editor",
props: {
value: String
},
mounted() {
this.simplemde = new SimpleMDE({
element: this.$refs.editor,
spellChecker: false
});
this.simplemde.codemirror.on("change", this.handleInput);
this.value && this.simplemde.value(this.value);
},
destroyed() {
this.simplemde = null;
},
methods: {
handleInput() {
this.$emit("input", this.simplemde.value());
}
},
watch: {
value(val) {
val !== this.simplemde.value() && this.simplemde.value(val);
}
}
};
</script>
<style src="simplemde/dist/simplemde.min.css"/>
vue.js部分代码记录:
跳转到其他路由:
// name 路由名称,courseId 参数
this.$router.push({ name, params: { courseId: id } });
获取路由传递的参数:
this.$route.params.courseId;
vue&Element-UI文件上传:
页面部分:
<!-- 上传图片部分 -->
<el-form-item label="分享小图" prop="share_image_title">
<el-input v-model="course.share_image_title" type="text">
<!-- :auto-upload="false",取消自动上传, :on-change="onchange" 调用onchange进行处理 -->
<el-upload
slot="prepend"
:auto-upload="false"
:on-change="onchange"
action
:limit="1"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-input>
</el-form-item>
js部分
FormData
的主要用途有两个
- 1. 将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。
- 2. 异步上传文件
- 3. 创建FormData对象
// 创建FormData对象,将图片与表单其他内容一同上传
this.params = new FormData();
// 设置Content-type的类型为:多部件上传
let config = {
header:{
"Content-type":"multipart/form-data"
}
}
// 获取表单数据 保存到param中
for(let key in this.course){
this.params.append(key,this.course[key])
}
// 请求后台接口 保存信息
axios.post("/courseSalesInfo",this.params,config).then(res=>{
if(res.data.status == 0){
// 保存成功,跳转回首页
this.$router.back();
} else if(res.data.status == 1) {
this.$message.error(res.data.msg);
}
}).catch(error => {
this.$message.error("保存信息失败!");
})
当列表中有多项select时
v-for里面数据层次太多, 选择过数据变了,页面没有重新渲染,需手动强制刷新。
@change="$forceUpdate()" 强制刷新
<el-form label-position="right" label-width="110px" :model="statusForm">
<el-form-item label="状态变更为:">
<el-select @change="$forceUpdate()" v-model="statusForm.status" style="width: 100%">
<el-option
v-for="(item,index) in Object.keys(statusMapping)"
:key="index"
:label="statusMapping[item]"
:value="item"
></el-option>
</el-select>
</el-form-item>
</el-form>