组件初步搭建

src/icons/svg/copy.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.4999 2V0.5C2.4999 0.22386 2.72376 0 2.9999 0H8.9999C9.27605 0 9.4999 0.22386 9.4999 0.5V7.5C9.4999 7.77615 9.27605 8 8.9999 8H7.4999V9.49955C7.4999 9.77595 7.27495 10 6.9965 10H1.00333C0.725295 10 0.5 9.7777 0.5 9.49955L0.5013 2.50044C0.50135 2.22406 0.72632 2 1.00471 2H2.4999ZM1.50121 3L1.50009 9H6.4999V3H1.50121ZM3.4999 2H7.4999V7H8.4999V1H3.4999V2ZM2.5 4.5H5.5V5.5H2.5V4.5ZM2.5 6.5H5.5V7.5H2.5V6.5Z" fill="black"/>
+</svg>

src/icons/svg/delete.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 2H10V3H9V9.5C9 9.77615 8.77615 10 8.5 10H1.5C1.22386 10 1 9.77615 1 9.5V3H0V2H2.5V0.5C2.5 0.22386 2.72386 0 3 0H7C7.27615 0 7.5 0.22386 7.5 0.5V2ZM8 3H2V9H8V3ZM5.7071 5.99985L6.591 6.88375L5.8839 7.59085L5 6.70695L4.1161 7.59085L3.40901 6.88375L4.2929 5.99985L3.40901 5.116L4.1161 4.4089L5 5.29275L5.8839 4.4089L6.591 5.116L5.7071 5.99985ZM3.5 1V2H6.5V1H3.5Z" fill="#ED4646"/>
+</svg>

src/router/modules/courseware.js

@@ -0,0 +1,18 @@
+import DEFAULT from '@/layouts/default';
+
+/**
+ * 课件组件
+ */
+const CoursewareModulePage = {
+  path: '/courseware',
+  component: DEFAULT,
+  redirect: '/courseware/create',
+  children: [
+    {
+      path: 'create',
+      component: () => import('@/views/courseware/create/index.vue'),
+    },
+  ],
+};
+
+export default [CoursewareModulePage];

src/router/modules/index.js

@@ -1,3 +1,4 @@
 import { homePage, loginPage, NotFoundPage } from './basic';
+import CoursewareRouters from './courseware';
 
-export const routes = [homePage, loginPage, NotFoundPage];
+export const routes = [homePage, loginPage, NotFoundPage, ...CoursewareRouters];

src/views/courseware/create/components/base/Divider.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="divider">
+    <ModuleBase>
+      <template #title>
+        <span>分割线</span>
+      </template>
+      <template #content>
+        <el-divider />
+      </template>
+    </ModuleBase>
+    <ModuleProperty>
+      <template #property>
+        <el-form :label-position="labelPosition" label-width="80px">
+          <el-form-item label="高度">
+            <el-input />
+          </el-form-item>
+          <el-form-item label="类型">
+            <el-select>
+              <el-option label="实线" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </template>
+    </ModuleProperty>
+  </div>
+</template>
+
+<script>
+import ModuleMixin from '../common/ModuleMixin';
+export default {
+  name: 'Divider',
+  components: {},
+  mixins: [ModuleMixin],
+  data() {
+    return {
+      labelPosition: 'right',
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.divider{
+
+  .content {
+    display: flex;
+    justify-content: flex-start;
+    width: 50%;
+    height: 100px;
+    border: 1px solid red;
+
+    .property {
+      width: 200px;
+    }
+  }
+}
+</style>

src/views/courseware/create/components/common/ModuleBase.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="module">
+    <div class="module-content">
+      <slot name="title"></slot>
+      <div>
+        <span><SvgIcon icon-class="copy" size="14" /></span>
+        <span><SvgIcon icon-class="setup" size="14" /></span>
+        <span><SvgIcon icon-class="delete" size="14" /></span>
+      </div>
+      <div v-if="isShow">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModuleBase',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    isChild: {
+      type: Boolean,
+      default: false,
+    },
+    isChange: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isShow: false,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.module {
+  border: 1px solid #EBEBEB;
+}
+</style>

src/views/courseware/create/components/common/ModuleMixin.js

@@ -0,0 +1,34 @@
+// 组件混入
+import ModuleBase from './ModuleBase.vue';
+import ModuleProperty from './ModuleProperty.vue';
+
+const mixin = {
+  data() {
+    return {};
+  },
+  provide: [],
+  inject: [],
+  props: {
+    questionId: {
+      type: String,
+      default: '',
+    },
+    isChild: {
+      type: Boolean,
+      default: false,
+    },
+    isChange: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    ModuleBase,
+    ModuleProperty,
+  },
+  created() {},
+  watch: {},
+  methods: {},
+};
+
+export default mixin;

src/views/courseware/create/components/common/ModuleProperty.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="module">
+    <div class="property">
+      <slot name="property"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModuleProperty',
+};
+</script>
+
+<style lang="scss" scoped>
+.module {
+  display: flex;
+  justify-content: flex-start;
+  width: 20%;
+  height: 100px;
+  border: 1px solid red;
+
+  .property {
+    width: 200px;
+  }
+}
+</style>

src/views/courseware/create/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <Divider />
+  </div>
+</template>
+<script>
+import ModuleMixin from '../create/components/common/ModuleMixin.js';
+import Divider from '../create/components/base/Divider.vue';
+export default {
+  name: 'Create',
+  components: {
+    Divider,
+  },
+  mixins: [ModuleMixin],
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>

src/views/home/index.vue

@@ -3,6 +3,10 @@
     <div></div>
     <div></div>
     <div></div>
+    <div>
+      <router-link to="/courseware/create">打开新页面</router-link>
+    </div>
+
     <el-table :data="data" height="100%">
       <el-table-column prop="name" label="教材名称" width="180" />
     </el-table>