常见的代码片段

常见的代码生成器

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;
}