常见的代码生成器
vue 引入背景图片:
.bgImg {
background: url("@/assets/bg.jpg") no-repeat;
background-size: 100% 100vh;
}
vue使用图片:
<el-image :src="imgUrl"></el-image>
data() {
return {
imgUrl: require('../assets/kd.jpg')
}
}
vue3引入图片:
const getImageUrl = (name) => {
return new URL(`../assets/${name}`, import.meta.url).href
}
markdown编辑器:
// main.js 引入
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
VMdEditor.use(githubTheme);
VMdPreview.use(githubTheme);
createApp(App).use(VMdEditor).use(VMdPreview)
// 使用编辑器
<v-md-editor v-model="entity.content" height="400px"></v-md-editor>
// 预览
<v-md-preview :text="longComment"></v-md-preview>
图片上传:
<el-form-item label="图片">
<el-upload
class="avatar-uploader"
action="http://localhost:9090/file/upload"
:show-file-list="false"
:on-success="handleImgUploadSuccess"
>
<img v-if="form.img" :src="form.img" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}