├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── hint.png
    │   ├── logo.png
    │   ├── text.png
    │   ├── todo.png
    │   ├── heading1.png
    │   ├── heading2.png
    │   ├── heading3.png
    │   ├── BulletedList.png
    │   └── github.svg
    ├── main.js
    ├── App.vue
    ├── router
    │   └── index.js
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── components
    │   ├── AddBlockBtn.vue
    │   ├── basicBlockComponents
    │   │   ├── Heading3.vue
    │   │   ├── Heading1.vue
    │   │   ├── Heading2.vue
    │   │   ├── Hint.vue
    │   │   ├── TextBlock.vue
    │   │   ├── BulletedList.vue
    │   │   └── TodoBlock.vue
    │   └── AddBlockContent.vue
    └── vuex
    │   └── store.js
├── babel.config.js
├── .gitignore
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/hint.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/src/assets/hint.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/src/assets/text.png


--------------------------------------------------------------------------------
/src/assets/todo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/src/assets/todo.png


--------------------------------------------------------------------------------
/src/assets/heading1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/src/assets/heading1.png


--------------------------------------------------------------------------------
/src/assets/heading2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/src/assets/heading2.png


--------------------------------------------------------------------------------
/src/assets/heading3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/src/assets/heading3.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/BulletedList.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CedarXi/All-in-one/HEAD/src/assets/BulletedList.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | # local env files
 5 | .env.local
 6 | .env.*.local
 7 | 
 8 | # Log files
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | 
13 | # Editor directories and files
14 | .idea
15 | .vscode
16 | *.suo
17 | *.ntvs*
18 | *.njsproj
19 | *.sln
20 | *.sw?
21 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './vuex/store' // 引入store
 5 | 
 6 | import ElementUI from 'element-ui';
 7 | import 'element-ui/lib/theme-chalk/index.css';
 8 | 
 9 | Vue.use(ElementUI);
10 | 
11 | Vue.config.productionTip = false
12 | 
13 | new Vue({
14 |   router, store,
15 |   render: h => h(App)
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div id="app">
 3 | 		<router-view />
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style lang="less">
 8 | #app {
 9 | 	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
10 | 		"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
11 | 	-webkit-font-smoothing: antialiased;
12 | 	-moz-osx-font-smoothing: grayscale;
13 | 	text-align: left;
14 | 	color: #303133;
15 | 	font-size: 16px;
16 | 
17 | }
18 | 
19 | html,body{
20 | 	padding: 0;
21 | 	margin: 0;
22 | }
23 | 
24 | </style>
25 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 |   const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home
12 |   },
13 |   {
14 |     path: '/about',
15 |     name: 'About',
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20 |   }
21 | ]
22 | 
23 | const router = new VueRouter({
24 |   mode: 'history',
25 |   base: process.env.BASE_URL,
26 |   routes
27 | })
28 | 
29 | export default router
30 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link rel="stylesheet" href="//at.alicdn.com/t/font_1752291_7r302vqgs2a.css">
 9 |     <title>All-in-one</title>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "block-editor",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "core-js": "^3.6.4",
11 |     "element-ui": "^2.13.0",
12 |     "vue": "^2.6.11",
13 |     "vue-router": "^3.1.6",
14 |     "vuedraggable": "^2.23.2",
15 |     "vuex": "^3.1.3"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.3.0",
19 |     "@vue/cli-plugin-router": "~4.3.0",
20 |     "@vue/cli-service": "~4.3.0",
21 |     "less": "^3.0.4",
22 |     "less-loader": "^5.0.0",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "browserslist": [
26 |     "> 1%",
27 |     "last 2 versions",
28 |     "not dead"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="about">
 3 | 		<el-button @click="test123()">aaa</el-button>
 4 | 		<el-select v-model="value" placeholder="请选择" >
 5 | 			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
 6 | 		</el-select>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 | 	name: "about",
13 | 	data() {
14 | 		return {
15 | 			options: [
16 | 				{
17 | 					value: "选项1",
18 | 					label: "黄金糕"
19 | 				},
20 | 				{
21 | 					value: "选项2",
22 | 					label: "双皮奶"
23 | 				},
24 | 				{
25 | 					value: "选项3",
26 | 					label: "蚵仔煎"
27 | 				},
28 | 				{
29 | 					value: "选项4",
30 | 					label: "龙须面"
31 | 				},
32 | 				{
33 | 					value: "选项5",
34 | 					label: "北京烤鸭"
35 | 				}
36 | 			],
37 | 			value: ""
38 | 		};
39 | 	},
40 | 	methods: {
41 | 		test123: function() {
42 | 			// this.$refs.messageDrop.dropdown.visible = true
43 | 			console.log("111");
44 | 		}
45 | 	},
46 | 	mounted() {
47 | 		// this.$refs.messageDrop.show();
48 | 	}
49 | };
50 | </script>


--------------------------------------------------------------------------------
/src/components/AddBlockBtn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="addBlock">
 3 | 		<a class="add-block-btn" @click="openMenuShow($event)">
 4 | 			<i class="iconfont iconplus"></i>
 5 | 		</a>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <style lang="less">
10 | .addBlock {
11 | 	.add-block-btn {
12 | 		padding: 2px 6px 4px 6px;
13 | 		border-radius: 2px;
14 | 		.iconplus {
15 | 			font-size: 12px;
16 | 			color: #999999;
17 | 		}
18 | 		cursor: pointer;
19 | 	}
20 | 	.add-block-btn:hover {
21 | 		background: #eeeeee;
22 | 	}
23 | }
24 | </style>
25 | 
26 | 
27 | <script>
28 | // @ is an alias to /src
29 | 
30 | export default {
31 | 	name: "AddBlock",
32 | 	props: ["BlocksIndex"],
33 | 	data() {
34 | 		return {};
35 | 	},
36 | 	methods: {
37 | 		openMenuShow(e) {
38 | 			let a = { x: e.clientX, y: e.clientY };
39 | 			// console.log(e)
40 | 			let b = true;
41 | 			// console.log(e);
42 | 			// console.log("111");
43 | 
44 | 			this.$store.commit("mutationAddMenuContentLayerXY", a);
45 | 			this.$store.commit("mutationCurrentBlockIndex", this.BlocksIndex);
46 | 			setTimeout(() => {
47 | 				this.$store.commit("mutationIsShowAddMenu", b);
48 | 			}, 50);
49 | 		}
50 | 	}
51 | };
52 | </script>
53 | 
54 | 
55 | 


--------------------------------------------------------------------------------
/src/assets/github.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1586942749889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5592" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><defs><style type="text/css"></style></defs><path d="M0 520.886c0-69.368 13.51-135.697 40.498-199.02 26.987-63.323 63.322-117.826 109.006-163.51 45.65-45.65 100.154-81.985 163.51-109.006A502.289 502.289 0 0 1 512 8.92c69.335 0 135.663 13.477 198.986 40.497 63.356 26.988 117.86 63.323 163.51 109.007 45.684 45.65 82.02 100.154 109.006 163.51A502.289 502.289 0 0 1 1024 520.852c0 111.318-32.504 211.472-97.511 300.494-64.975 88.989-148.48 150.825-250.484 185.476-5.351 0-9.348-0.99-11.99-2.973-2.676-1.982-4.196-3.997-4.526-6.012a59.458 59.458 0 0 1-0.495-8.984 7.663 7.663 0 0 1-0.991-3.006v-128.99c0-40.63-14.336-75.314-43.008-103.986 76.667-13.345 134.011-41.819 171.999-85.487 37.987-43.669 57.013-96.52 57.013-158.522 0-58.005-18.663-108.346-56.022-150.99 13.345-42.678 11-87.668-6.97-135.003-18.697-1.322-39.011 1.85-61.01 9.513-22 7.663-38.318 14.831-49.02 21.47-10.637 6.673-20.316 13.016-28.97 19.027-38.68-10.669-81.854-16.02-129.486-16.02-47.7 0-90.509 5.351-128.529 16.02-7.333-5.35-15.855-11.164-25.5-17.507-9.68-6.342-26.493-14.005-50.507-22.99-23.982-9.018-45.65-12.85-65.008-11.495-18.663 47.996-20.645 93.646-5.979 136.984-36.665 42.678-54.998 92.986-54.998 150.99 0 62.002 18.663 114.689 55.99 157.994 37.326 43.339 94.67 72.01 171.998 86.016a142.303 142.303 0 0 0-39.969 70.029c-56.683 13.972-96.355 3.963-119.015-30.06-42.017-61.308-79.674-83.307-113.003-65.965-4.69 4.657-3.997 9.48 1.982 14.501 6.012 4.988 14.996 11.66 27.02 19.985 11.99 8.357 20.976 17.507 26.987 27.515 0.661 1.322 2.51 6.177 5.517 14.502a831.917 831.917 0 0 0 8.985 23.981c2.973 7.663 8.654 16.186 17.011 25.5 8.324 9.349 18.003 17.178 29.003 23.52 11 6.309 26.161 11 45.485 14.006 19.324 2.972 41.323 3.138 65.998 0.495v100.484c0 0.991-0.165 2.643-0.495 5.021-0.33 2.312-0.991 3.964-1.982 4.955-0.991 1.024-2.345 2.015-4.03 3.039a12.52 12.52 0 0 1-6.474 1.486c-2.676 0-6.012-0.33-10.009-0.99-101.343-35.345-183.825-97.182-247.51-185.51C31.842 731.037 0 631.577 0 520.92z" p-id="5593" fill="#303133"></path></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # DEMO
 2 | [all-in-one-kappa.vercel.app/](https://all-in-one-kappa.vercel.app/)
 3 | 
 4 | # 界面
 5 | ![image](https://user-images.githubusercontent.com/16424854/126763700-721ecb56-4dbc-4581-b7ff-ddab7790576e.png)
 6 | 
 7 | 
 8 | 
 9 | # All-in-one是什么
10 | All-in-one 是一个开源的模块化内容构建编辑器，它不同于传统的文本编辑器，所有的内容都是以模块的概念来打造。灵感来自Notion
11 | 
12 | ## 灵活的插拔
13 | 所有的模块都以VUE组件的形式编写，可以灵活插拔。你可以用All-in-one编辑器构建一个模块化的内容平台，可以在一个页面里插入任何其他模块，就像Notion一样
14 | 
15 | ### 纯净的输出
16 | 所有组件保存的数据，都以Json的形式存储在Vuex里供不同组件调用
17 | 
18 | 
19 | #### 🐞 由于不是用WYSIWYG的编辑器进行二次开发，目前在文本编辑方面有一些不能解决的Bug
20 | 
21 | * 当输入行大于等于2行时，键盘的上下按键没有办法处理光标在同组件的文本内容里上下移动
22 | * 内容无法跨模块复制
23 | * 其他一些小的问题
24 | 
25 | #### 👏 已实现的模块
26 | - [x] 纯文本
27 | - [x] 待办清单
28 | - [x] 标题1
29 | - [x] 标题2
30 | - [x] 标题3
31 | - [x] 符号列表
32 | - [x] 提示栏
33 | - [x] 组件的拖拽移动
34 | 
35 | 
36 | #### 🧑‍💻 待开发的模块
37 | - [ ] 事件节点组件
38 | - [ ] 图片上传组件
39 | - [ ] 表格组件
40 | - [ ] 看板组件
41 | 
42 | ***
43 | 
44 | # what is All-in-one 
45 | All-in-one is an open source modular content construction editor. It is different from traditional text editors, and all content is built with the concept of modules. Inspired by Notion
46 | 
47 | ## Flexible plugging
48 | All modules are written in the form of VUE components, which can be flexibly inserted and removed. You can use the All-in-one editor to build a modular content platform, you can insert any other module in a page, just like Notion
49 | 
50 | ### Pure output
51 | The data saved by all components is stored in Vuex in the form of Json for different components to call
52 | 
53 | 
54 | #### 🐞 Since it is not a secondary development with the WYSIWYG editor, there are currently some unsolvable bugs in text editing
55 | 
56 | * When the input line is greater than or equal to 2 lines, the keyboard up and down keys can not handle the cursor to move up and down in the text content of the same component
57 | * Content cannot be copied across modules
58 | * Other minor issues
59 | 
60 | #### 👏 Modules has been developed 
61 | 
62 | - [x] Text
63 | - [x] Todo
64 | - [x] Heading1
65 | - [x] Heading2
66 | - [x] Heading3
67 | - [x] BulletedList
68 | - [x] Hint
69 | - [x] Drag and drop of components
70 | 
71 | #### 🧑‍💻 Modules to be developed
72 | 
73 | - [ ] EventNode component
74 | - [ ] Image upload component
75 | - [ ] Form component
76 | - [ ] Kanban components
77 | 


--------------------------------------------------------------------------------
/src/vuex/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const state = {
 7 |     isShowAddMenu: false,
 8 |     addMenuContentLayerXY: { x: 0, y: 0 },
 9 |     currentBlockIndex: 0,
10 |     currentPageBlocks: [{ "type": "heading1", "data": { "text": "All-in-one 是什么" } }, { "type": "text", "data": { "text": "All-in-one 是一个开源的模块化内容构建编辑器，它不同于传统的文本编辑器，所有的内容都是以模块的概念来打造。灵感来自Notion" } }, { "type": "heading2", "data": { "text": "灵活的插拔" } }, { "type": "text", "data": { "text": "所有的模块都以VUE组件的形式编写，可以灵活插拔。你可以用All-in-one编辑器构建一个模块化的内容平台，可以在一个页面里插入任何其他模块，就像Notion一样" } }, { "type": "heading3", "data": { "text": "纯净的输出" } }, { "type": "text", "data": { "text": "所有组件保存的数据，都以Json的形式存储在Vuex里供不同组件调用" } }, { "type": "text", "data": { "text": "" } }, { "type": "hint", "data": { "text": "🐞由于不是用WYSIWYG的编辑器进行二次开发，目前在文本编辑方面有一些不能解决的Bug" } }, { "type": "text", "data": { "text": "" } }, { "type": "BulletedList", "data": { "text": "当输入行大于等于2行时，键盘的上下按键没有办法处理光标在同组件的文本内容里上下移动" } }, { "type": "BulletedList", "data": { "text": "内容无法跨模块复制" } }, { "type": "BulletedList", "data": { "text": "其他一些小的问题" } }, { "type": "text", "data": { "text": "" } }, { "type": "hint", "data": { "text": "👏 已实现的模块" } }, { "type": "text", "data": { "text": "" } }, { "type": "todo", "data": { "isChecked": true, "text": "纯文本" } }, { "type": "todo", "data": { "isChecked": true, "text": "待办清单" } }, { "type": "todo", "data": { "isChecked": true, "text": "标题1" } }, { "type": "todo", "data": { "isChecked": true, "text": "标题2" } }, { "type": "todo", "data": { "isChecked": true, "text": "标题3" } }, { "type": "todo", "data": { "isChecked": true, "text": "符号列表" } }, { "type": "todo", "data": { "isChecked": true, "text": "提示栏" } }, { "type": "todo", "data": { "isChecked": true, "text": "组件的拖动排序" } }, { "type": "text", "data": { "text": "" } }, { "type": "hint", "data": { "text": "🧑‍💻待开发的功能清单" } }, { "type": "text", "data": { "text": "" } }, { "type": "todo", "data": { "isChecked": false, "text": " 图片上传组件" } }, { "type": "todo", "data": { "isChecked": false, "text": "事件节点组件" } }, { "type": "todo", "data": { "isChecked": false, "text": "表格组件" } }, { "type": "todo", "data": { "isChecked": false, "text": "看板组件" } }, { "type": "text", "data": { "text": "" } }],
11 | }
12 | 
13 | const mutations = {
14 |     mutationIsShowAddMenu(state, isShowAddMenu) {
15 |         state.isShowAddMenu = isShowAddMenu
16 |     },
17 |     mutationCurrentBlockIndex(state, index) {
18 |         state.currentBlockIndex = index
19 |     },
20 |     mutationAddMenuContentLayerXY(state, addMenuContentLayerXY) {
21 |         state.addMenuContentLayerXY = addMenuContentLayerXY
22 |         // state.addMenuContentClientXY = {x:0,y:0}
23 | 
24 |     },
25 |     mutationAddCurrentPageBlocks(state, addBlockInfo) {
26 |         let index = addBlockInfo.index + 1
27 |         state.currentPageBlocks.splice(index, 0, addBlockInfo.blockItem)
28 |         // console.log(state.currentPageBlocks)
29 |     }
30 | }
31 | 
32 | 
33 | const getters = {
34 | 
35 |     getterCurrentPageBlocks(state) {
36 |         return state.currentPageBlocks
37 |     },
38 |     getterAddMenuContentLayerXY(state) {
39 | 
40 |         let a = state.addMenuContentLayerXY
41 |         let clientHeight = window.innerHeight
42 | 
43 |         if (a.y > (clientHeight / 2)) {
44 |             a.y = a.y - 380
45 |         }
46 |         a.y = `${a.y + 20}px`
47 |         a.x = `${a.x + 48}px`
48 | 
49 |         // 当前浏览器的高度
50 |         return a
51 |     }
52 | 
53 | 
54 | }
55 | export default new Vuex.Store({
56 |     state, mutations, getters
57 | })


--------------------------------------------------------------------------------
/src/components/basicBlockComponents/Heading3.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="Heading3">
  3 | 		<el-input
  4 | 			type="textarea"
  5 | 			autosize
  6 | 			v-model="mValue.text"
  7 | 			placeholder="标题3"
  8 | 			@keydown.native="addNewTextBlock($event,BlocksIndex)"
  9 | 			@keyup.native="nextFocus($event,BlocksIndex)"
 10 | 		></el-input>
 11 | 	</div>
 12 | </template>
 13 | 
 14 | <script>
 15 | export default {
 16 | 	name: "Heading3",
 17 | 	props: ["value", "BlocksIndex"],
 18 | 	data() {
 19 | 		return {
 20 | 			mValue: this.value,
 21 | 			cursorStart: 0,
 22 | 			isEmptyDelete:true
 23 | 		};
 24 | 	},
 25 | 	watch: {
 26 | 		mValue(val) {
 27 | 			//本地值改变传给父组件
 28 | 			this.$emit("input", val);
 29 | 		},
 30 | 		value(val) {
 31 | 			this.mValue = val;
 32 | 		}
 33 | 	},
 34 | 	methods: {
 35 | 		addNewTextBlock(event, index) {
 36 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 37 | 			let dom = document.getElementsByTagName("textarea");
 38 | 			let currInput = dom[index];
 39 | 			let startPos = currInput.selectionStart;
 40 | 			this.cursorStart = startPos;
 41 | 
 42 | 			if (event.keyCode == 13) {
 43 | 				event.preventDefault();
 44 | 
 45 | 				// 新建text-item到vuex里
 46 | 				let addBlockInfo = {
 47 | 					index: index,
 48 | 					blockItem: {
 49 | 						type: "text",
 50 | 						data: {
 51 | 							text: ""
 52 | 						}
 53 | 					}
 54 | 				};
 55 | 				// 获取光标位置，处理回车时字符串换行问题
 56 | 
 57 | 				if (startPos != this.mValue.text.length) {
 58 | 					addBlockInfo.blockItem.data.text = this.mValue.text.slice(
 59 | 						startPos,
 60 | 						this.mValue.text.length
 61 | 					);
 62 | 					this.mValue.text = this.mValue.text.slice(0, startPos);
 63 | 				}
 64 | 
 65 | 				// 提交数据到vuex
 66 | 				this.$store.commit(
 67 | 					"mutationAddCurrentPageBlocks",
 68 | 					addBlockInfo
 69 | 				);
 70 | 			}
 71 | 		},
 72 | 		nextFocus(event, index) {
 73 | 			let dom = document.getElementsByTagName("textarea");
 74 | 			let currInput = dom[index];
 75 | 			let nextInput = dom[index + 1];
 76 | 			let lastInput = dom[index - 1];
 77 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 78 | 			if (event.keyCode == 13) {
 79 | 				// console.log(nextInput);
 80 | 				event.preventDefault();
 81 | 				nextInput.focus();
 82 | 			}
 83 | 			if (event.keyCode == 38) {
 84 | 				lastInput.setSelectionRange(this.cursorStart, this.cursorStart);
 85 | 				setTimeout(() => {
 86 | 					lastInput.focus();
 87 | 				}, 100);
 88 | 			}
 89 | 			if (event.keyCode == 40) {
 90 | 				nextInput.setSelectionRange(this.cursorStart, this.cursorStart);
 91 | 				setTimeout(() => {
 92 | 					nextInput.focus();
 93 | 				}, 100);
 94 | 			}
 95 | 			if (event.keyCode == 46 || event.keyCode == 8) {
 96 | 				if (
 97 | 					currInput.value == "" &&
 98 | 					this.currentPageBlocks.length > 1 &&
 99 | 					this.isEmptyDelete == true
100 | 				) {
101 | 					this.currentPageBlocks.splice(index, 1);
102 | 					setTimeout(() => {
103 | 						lastInput.focus();
104 | 					}, 300);
105 | 				}
106 | 			}
107 | 			// 设置当前输入框是否为空，主要控制如果已经输入了内容，再点击删除，会直接删除掉内容
108 | 			// 处理是否为空的时候在删除内容，直接就currInput.value 会伴随着删除按钮的而直接变化掉
109 | 			// 如果已经有内容了，再点击删除按钮会把是否为空删除设置为false，如果直接删除，则是可以的
110 | 			// 逻辑就是要先确定一步是否为空，不能同步进行
111 | 			if (currInput.value == "") {
112 | 				this.isEmptyDelete = true;
113 | 			} else {
114 | 				this.isEmptyDelete = false;
115 | 			}
116 | 		}
117 | 	},
118 | 	computed: {
119 | 		currentPageBlocks() {
120 | 			return this.$store.state.currentPageBlocks;
121 | 		}
122 | 	}
123 | };
124 | </script>
125 | 
126 | <style lang="less">
127 | .Heading3 {
128 | 	display: flex;
129 | 	align-items: center;
130 | 
131 | 	
132 | 	.el-textarea__inner {
133 | 		border: none;
134 | 		outline: none;
135 | 		font-size: 20px;
136 | 		font-weight: 600;
137 | 		width: 100%;
138 | 		resize: none;
139 | 		padding: 5px 0;
140 | 		color: #303133;
141 | 	}
142 | 	textarea::-webkit-input-placeholder {
143 | 		color: #ffffff;
144 | 	}
145 | 	textarea:focus::-webkit-input-placeholder {
146 | 		color: #999999;
147 | 	}
148 | }
149 | </style>


--------------------------------------------------------------------------------
/src/components/basicBlockComponents/Heading1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="Heading1">
  3 | 		<el-input
  4 | 			type="textarea"
  5 | 			autosize
  6 | 			v-model="mValue.text"
  7 | 			placeholder="标题1"
  8 | 			@keydown.native="addNewTextBlock($event,BlocksIndex)"
  9 | 			@keyup.native="nextFocus($event,BlocksIndex)"
 10 | 			
 11 | 		></el-input>
 12 | 	</div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 | 	name: "Heading1",
 18 | 	props: ["value", "BlocksIndex"],
 19 | 	data() {
 20 | 		return {
 21 | 			mValue: this.value,
 22 | 			cursorStart: 0,
 23 | 			isEmptyDelete: true
 24 | 		};
 25 | 	},
 26 | 	watch: {
 27 | 		mValue(val) {
 28 | 			//本地值改变传给父组件
 29 | 			this.$emit("input", val);
 30 | 		},
 31 | 		value(val) {
 32 | 			this.mValue = val;
 33 | 		}
 34 | 	},
 35 | 	methods: {
 36 | 		addNewTextBlock(event, index) {
 37 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 38 | 
 39 | 			let dom = document.getElementsByTagName("textarea");
 40 | 			let currInput = dom[index];
 41 | 			let startPos = currInput.selectionStart;
 42 | 			this.cursorStart = startPos;
 43 | 
 44 | 			if (event.keyCode == 13) {
 45 | 				event.preventDefault();
 46 | 
 47 | 				// 新建text-item到vuex里
 48 | 				let addBlockInfo = {
 49 | 					index: index,
 50 | 					blockItem: {
 51 | 						type: "text",
 52 | 						data: {
 53 | 							text: ""
 54 | 						}
 55 | 					}
 56 | 				};
 57 | 				// 获取光标位置，处理回车时字符串换行问题
 58 | 				let dom = document.getElementsByTagName("textarea");
 59 | 				let currInput = dom[index];
 60 | 				let startPos = currInput.selectionStart;
 61 | 
 62 | 				if (startPos != this.mValue.text.length) {
 63 | 					addBlockInfo.blockItem.data.text = this.mValue.text.slice(
 64 | 						startPos,
 65 | 						this.mValue.text.length
 66 | 					);
 67 | 					this.mValue.text = this.mValue.text.slice(0, startPos);
 68 | 				}
 69 | 
 70 | 				// 提交数据到vuex
 71 | 				this.$store.commit(
 72 | 					"mutationAddCurrentPageBlocks",
 73 | 					addBlockInfo
 74 | 				);
 75 | 			}
 76 | 		},
 77 | 		nextFocus(event, index) {
 78 | 			let dom = document.getElementsByTagName("textarea");
 79 | 			let currInput = dom[index];
 80 | 			let nextInput = dom[index + 1];
 81 | 			let lastInput = dom[index - 1];
 82 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 83 | 			if (event.keyCode == 13) {
 84 | 				// console.log(nextInput);
 85 | 				event.preventDefault();
 86 | 				nextInput.focus();
 87 | 			}
 88 | 			if (event.keyCode == 38) {
 89 | 				lastInput.setSelectionRange(this.cursorStart, this.cursorStart);
 90 | 				setTimeout(() => {
 91 | 					lastInput.focus();
 92 | 				}, 100);
 93 | 			}
 94 | 			if (event.keyCode == 40) {
 95 | 				nextInput.setSelectionRange(this.cursorStart, this.cursorStart);
 96 | 				setTimeout(() => {
 97 | 					nextInput.focus();
 98 | 				}, 100);
 99 | 			}
100 | 			if (event.keyCode == 46 || event.keyCode == 8) {
101 | 				if (
102 | 					currInput.value == "" &&
103 | 					this.currentPageBlocks.length > 1 &&
104 | 					this.isEmptyDelete == true
105 | 				) {
106 | 					this.currentPageBlocks.splice(index, 1);
107 | 					setTimeout(() => {
108 | 						lastInput.focus();
109 | 					}, 300);
110 | 				}
111 | 			}
112 | 			// 设置当前输入框是否为空，主要控制如果已经输入了内容，再点击删除，会直接删除掉内容
113 | 			// 处理是否为空的时候在删除内容，直接就currInput.value 会伴随着删除按钮的而直接变化掉
114 | 			// 如果已经有内容了，再点击删除按钮会把是否为空删除设置为false，如果直接删除，则是可以的
115 | 			// 逻辑就是要先确定一步是否为空，不能同步进行
116 | 			if (currInput.value == "") {
117 | 				this.isEmptyDelete = true;
118 | 			} else {
119 | 				this.isEmptyDelete = false;
120 | 			}
121 | 		}
122 | 	},
123 | 	computed: {
124 | 		currentPageBlocks() {
125 | 			return this.$store.state.currentPageBlocks;
126 | 		}
127 | 	}
128 | };
129 | </script>
130 | 
131 | <style lang="less">
132 | .Heading1 {
133 | 	display: flex;
134 | 	align-items: center;
135 | 
136 | 	.el-textarea__inner {
137 | 		border: none;
138 | 		outline: none;
139 | 		font-size: 30px;
140 | 		font-weight: 600;
141 | 		width: 100%;
142 | 		resize: none;
143 | 		padding: 5px 0;
144 | 		color: #303133;
145 | 	}
146 | 	textarea::-webkit-input-placeholder {
147 | 		color: #ffffff;
148 | 	}
149 | 	textarea:focus::-webkit-input-placeholder {
150 | 		color: #999999;
151 | 	}
152 | }
153 | </style>


--------------------------------------------------------------------------------
/src/components/basicBlockComponents/Heading2.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="Heading2">
  3 | 		<el-input
  4 | 			type="textarea"
  5 | 			autosize
  6 | 			v-model="mValue.text"
  7 | 			placeholder="标题2"
  8 | 			@keydown.native="addNewTextBlock($event,BlocksIndex)"
  9 | 			@keyup.native="nextFocus($event,BlocksIndex)"
 10 | 		></el-input>
 11 | 	</div>
 12 | </template>
 13 | 
 14 | <script>
 15 | export default {
 16 | 	name: "Heading2",
 17 | 	props: ["value", "BlocksIndex"],
 18 | 	data() {
 19 | 		return {
 20 | 			mValue: this.value,
 21 | 			cursorStart: 0,
 22 | 			isEmptyDelete:true
 23 | 		};
 24 | 	},
 25 | 	watch: {
 26 | 		mValue(val) {
 27 | 			//本地值改变传给父组件
 28 | 			this.$emit("input", val);
 29 | 		},
 30 | 		value(val) {
 31 | 			this.mValue = val;
 32 | 		}
 33 | 	},
 34 | 	methods: {
 35 | 		addNewTextBlock(event, index) {
 36 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 37 | 
 38 | 			let dom = document.getElementsByTagName("textarea");
 39 | 			let currInput = dom[index];
 40 | 			let startPos = currInput.selectionStart;
 41 | 			this.cursorStart = startPos;
 42 | 
 43 | 			if (event.keyCode == 13) {
 44 | 				event.preventDefault();
 45 | 
 46 | 				// 新建text-item到vuex里
 47 | 				let addBlockInfo = {
 48 | 					index: index,
 49 | 					blockItem: {
 50 | 						type: "text",
 51 | 						data: {
 52 | 							text: ""
 53 | 						}
 54 | 					}
 55 | 				};
 56 | 				// 获取光标位置，处理回车时字符串换行问题
 57 | 				let dom = document.getElementsByTagName("textarea");
 58 | 				let currInput = dom[index];
 59 | 				let startPos = currInput.selectionStart;
 60 | 
 61 | 				if (startPos != this.mValue.text.length) {
 62 | 					addBlockInfo.blockItem.data.text = this.mValue.text.slice(
 63 | 						startPos,
 64 | 						this.mValue.text.length
 65 | 					);
 66 | 					this.mValue.text = this.mValue.text.slice(0, startPos);
 67 | 				}
 68 | 
 69 | 				// 提交数据到vuex
 70 | 				this.$store.commit(
 71 | 					"mutationAddCurrentPageBlocks",
 72 | 					addBlockInfo
 73 | 				);
 74 | 			}
 75 | 		},
 76 | 		nextFocus(event, index) {
 77 | 			let dom = document.getElementsByTagName("textarea");
 78 | 			let currInput = dom[index];
 79 | 			let nextInput = dom[index + 1];
 80 | 			let lastInput = dom[index - 1];
 81 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 82 | 			if (event.keyCode == 13) {
 83 | 				// console.log(nextInput);
 84 | 				event.preventDefault();
 85 | 				nextInput.focus();
 86 | 			}
 87 | 			if (event.keyCode == 38) {
 88 | 				lastInput.setSelectionRange(this.cursorStart, this.cursorStart);
 89 | 				setTimeout(() => {
 90 | 					lastInput.focus();
 91 | 				}, 100);
 92 | 			}
 93 | 			if (event.keyCode == 40) {
 94 | 				nextInput.setSelectionRange(this.cursorStart, this.cursorStart);
 95 | 				setTimeout(() => {
 96 | 					nextInput.focus();
 97 | 				}, 100);
 98 | 			}
 99 | 			if (event.keyCode == 46 || event.keyCode == 8) {
100 | 				if (
101 | 					currInput.value == "" &&
102 | 					this.currentPageBlocks.length > 1 &&
103 | 					this.isEmptyDelete == true
104 | 				) {
105 | 					this.currentPageBlocks.splice(index, 1);
106 | 					setTimeout(() => {
107 | 						lastInput.focus();
108 | 					}, 300);
109 | 				}
110 | 			}
111 | 			// 设置当前输入框是否为空，主要控制如果已经输入了内容，再点击删除，会直接删除掉内容
112 | 			// 处理是否为空的时候在删除内容，直接就currInput.value 会伴随着删除按钮的而直接变化掉
113 | 			// 如果已经有内容了，再点击删除按钮会把是否为空删除设置为false，如果直接删除，则是可以的
114 | 			// 逻辑就是要先确定一步是否为空，不能同步进行
115 | 			if (currInput.value == "") {
116 | 				this.isEmptyDelete = true;
117 | 			} else {
118 | 				this.isEmptyDelete = false;
119 | 			}
120 | 		}
121 | 	},
122 | 	computed: {
123 | 		currentPageBlocks() {
124 | 			return this.$store.state.currentPageBlocks;
125 | 		}
126 | 	}
127 | };
128 | </script>
129 | 
130 | <style lang="less">
131 | .Heading2 {
132 | 	display: flex;
133 | 	align-items: center;
134 | 
135 | 	
136 | 	.el-textarea__inner {
137 | 		border: none;
138 | 		outline: none;
139 | 		font-size: 24px;
140 | 		font-weight: 600;
141 | 		width: 100%;
142 | 		resize: none;
143 | 		padding: 5px 0;
144 | 		color: #303133;
145 | 	}
146 | 	textarea::-webkit-input-placeholder {
147 | 		color: #ffffff;
148 | 	}
149 | 	textarea:focus::-webkit-input-placeholder {
150 | 		color: #999999;
151 | 	}
152 | }
153 | </style>


--------------------------------------------------------------------------------
/src/components/basicBlockComponents/Hint.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="hint">
  3 | 		<div class="hint-bg">
  4 | 			<el-input
  5 | 				type="textarea"
  6 | 				autosize
  7 | 				v-model="mValue.text"
  8 | 				placeholder="输入需要重要提示的内容"
  9 | 				@keydown.native="addNewTextBlock($event,BlocksIndex)"
 10 | 				@keyup.native="nextFocus($event,BlocksIndex)"
 11 | 			></el-input>
 12 | 		</div>
 13 | 	</div>
 14 | </template>
 15 | 
 16 | <script>
 17 | export default {
 18 | 	name: "hint",
 19 | 	props: ["value", "BlocksIndex"],
 20 | 	data() {
 21 | 		return {
 22 | 			mValue: this.value,
 23 | 			cursorStart: 0,
 24 | 			isEmptyDelete:true
 25 | 		};
 26 | 	},
 27 | 	watch: {
 28 | 		mValue(val) {
 29 | 			//本地值改变传给父组件
 30 | 			this.$emit("input", val);
 31 | 		},
 32 | 		value(val) {
 33 | 			this.mValue = val;
 34 | 		}
 35 | 	},
 36 | 	methods: {
 37 | 		addNewTextBlock(event, index) {
 38 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 39 | 			let dom = document.getElementsByTagName("textarea");
 40 | 			let currInput = dom[index];
 41 | 			let startPos = currInput.selectionStart;
 42 | 			this.cursorStart = startPos;
 43 | 
 44 | 			if (event.keyCode == 13) {
 45 | 				event.preventDefault();
 46 | 
 47 | 				// 新建text-item到vuex里
 48 | 				let addBlockInfo = {
 49 | 					index: index,
 50 | 					blockItem: {
 51 | 						type: "text",
 52 | 						data: {
 53 | 							text: ""
 54 | 						}
 55 | 					}
 56 | 				};
 57 | 				// 获取光标位置，处理回车时字符串换行问题
 58 | 
 59 | 				if (startPos != this.mValue.text.length) {
 60 | 					addBlockInfo.blockItem.data.text = this.mValue.text.slice(
 61 | 						startPos,
 62 | 						this.mValue.text.length
 63 | 					);
 64 | 					this.mValue.text = this.mValue.text.slice(0, startPos);
 65 | 				}
 66 | 
 67 | 				// 提交数据到vuex
 68 | 				this.$store.commit(
 69 | 					"mutationAddCurrentPageBlocks",
 70 | 					addBlockInfo
 71 | 				);
 72 | 			}
 73 | 		},
 74 | 		nextFocus(event, index) {
 75 | 			let dom = document.getElementsByTagName("textarea");
 76 | 			let currInput = dom[index];
 77 | 			let nextInput = dom[index + 1];
 78 | 			let lastInput = dom[index - 1];
 79 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 80 | 			if (event.keyCode == 13) {
 81 | 				// console.log(nextInput);
 82 | 				event.preventDefault();
 83 | 				nextInput.focus();
 84 | 			}
 85 | 			if (event.keyCode == 38) {
 86 | 				lastInput.setSelectionRange(this.cursorStart, this.cursorStart);
 87 | 				setTimeout(() => {
 88 | 					lastInput.focus();
 89 | 				}, 100);
 90 | 			}
 91 | 			if (event.keyCode == 40) {
 92 | 				nextInput.setSelectionRange(this.cursorStart, this.cursorStart);
 93 | 				setTimeout(() => {
 94 | 					nextInput.focus();
 95 | 				}, 100);
 96 | 			}
 97 | 			if (event.keyCode == 46 || event.keyCode == 8) {
 98 | 				if (
 99 | 					currInput.value == "" &&
100 | 					this.currentPageBlocks.length > 1 &&
101 | 					this.isEmptyDelete == true
102 | 				) {
103 | 					this.currentPageBlocks.splice(index, 1);
104 | 					setTimeout(() => {
105 | 						lastInput.focus();
106 | 					}, 300);
107 | 				}
108 | 			}
109 | 			// 设置当前输入框是否为空，主要控制如果已经输入了内容，再点击删除，会直接删除掉内容
110 | 			// 处理是否为空的时候在删除内容，直接就currInput.value 会伴随着删除按钮的而直接变化掉
111 | 			// 如果已经有内容了，再点击删除按钮会把是否为空删除设置为false，如果直接删除，则是可以的
112 | 			// 逻辑就是要先确定一步是否为空，不能同步进行
113 | 			if (currInput.value == "") {
114 | 				this.isEmptyDelete = true;
115 | 			} else {
116 | 				this.isEmptyDelete = false;
117 | 			}
118 | 		}
119 | 	},
120 | 	computed: {
121 | 		currentPageBlocks() {
122 | 			return this.$store.state.currentPageBlocks;
123 | 		}
124 | 	}
125 | };
126 | </script>
127 | 
128 | <style lang="less">
129 | .hint {
130 | 	display: flex;
131 | 	align-items: center;
132 | 	.hint-bg{
133 | 		padding: 20px;
134 | 		background: #F2F6FC;
135 | 		width: 100%;
136 | 		border-radius: 2px;
137 | 		border-left: 3px solid #409EFF;
138 | 	}
139 | 
140 | 	
141 | 	.el-textarea__inner {
142 | 		border: none;
143 | 		outline: none;
144 | 		font-size: 16px;
145 | 		width: 100%;
146 | 		resize: none;
147 | 		padding: 5px 0;
148 | 		color: #303133;
149 | 		background: #F2F6FC;
150 | 	}
151 | 	textarea::-webkit-input-placeholder {
152 | 		color: #F2F6FC;
153 | 	}
154 | 	textarea:focus::-webkit-input-placeholder {
155 | 		color: #999999;
156 | 	}
157 | }
158 | </style>


--------------------------------------------------------------------------------
/src/components/basicBlockComponents/TextBlock.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="textBlock">
  3 | 		<el-input
  4 | 			type="textarea"
  5 | 			autosize
  6 | 			placeholder="输入'/'快速插入内容"
  7 | 			v-model="mValue.text"
  8 | 			@keydown.native="addNewTextBlock($event,BlocksIndex)"
  9 | 			@keyup.native="nextFocus($event,BlocksIndex)"
 10 | 		></el-input>
 11 | 	</div>
 12 | </template>
 13 | 
 14 | <script>
 15 | export default {
 16 | 	name: "textBlock",
 17 | 	props: ["value", "BlocksIndex"],
 18 | 	data() {
 19 | 		return {
 20 | 			mValue: this.value,
 21 | 			cursorStart: 0,
 22 | 			isEmptyDelete: true //当前输入光标的位置
 23 | 		};
 24 | 	},
 25 | 	watch: {
 26 | 		mValue(val) {
 27 | 			//本地值改变传给父组件
 28 | 			this.$emit("input", val);
 29 | 		},
 30 | 		value(val) {
 31 | 			this.mValue = val;
 32 | 		}
 33 | 	},
 34 | 	methods: {
 35 | 		addNewTextBlock(event, index) {
 36 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 37 | 			// 获取光标位置，处理回车时字符串换行问题
 38 | 			let dom = document.getElementsByTagName("textarea");
 39 | 			let currInput = dom[index];
 40 | 			let startPos = currInput.selectionStart;
 41 | 			this.cursorStart = startPos;
 42 | 			if (event.keyCode == 13) {
 43 | 				event.preventDefault();
 44 | 
 45 | 				// 新建text-item到vuex里
 46 | 				let addBlockInfo = {
 47 | 					index: index,
 48 | 					blockItem: {
 49 | 						type: "text",
 50 | 						data: {
 51 | 							text: ""
 52 | 						}
 53 | 					}
 54 | 				};
 55 | 
 56 | 				if (startPos != this.mValue.text.length) {
 57 | 					// 如果光标的位置不在最末尾的时候
 58 | 					// 对光标之后的内容进行截取，并传递给新建的字符串
 59 | 					addBlockInfo.blockItem.data.text = this.mValue.text.slice(
 60 | 						startPos,
 61 | 						this.mValue.text.length
 62 | 					);
 63 | 					this.mValue.text = this.mValue.text.slice(0, startPos);
 64 | 				}
 65 | 
 66 | 				// 提交数据到vuex
 67 | 				this.$store.commit(
 68 | 					"mutationAddCurrentPageBlocks",
 69 | 					addBlockInfo
 70 | 				);
 71 | 			}
 72 | 			// console.log(currInput)
 73 | 			// console.log(dom)
 74 | 			// console.log(currInput)
 75 | 
 76 | 			// 如果内容为空的时候，并且按了 '/ '号按钮，就可以唤醒键盘上的添加内容的弹窗
 77 | 			if (
 78 | 				(event.keyCode == 191 || event.keyCode == 111) &&
 79 | 				currInput.value == ""
 80 | 			) {
 81 | 				currInput.disabled = true;
 82 | 				console.log(this.mValue.text);
 83 | 				let e = currInput.getBoundingClientRect();
 84 | 				let a = { x: e.left - 48, y: e.top + 20 };
 85 | 				let b = true;
 86 | 				this.$store.commit("mutationAddMenuContentLayerXY", a);
 87 | 				this.$store.commit("mutationCurrentBlockIndex", index);
 88 | 				setTimeout(() => {
 89 | 					this.$store.commit("mutationIsShowAddMenu", b);
 90 | 				}, 50);
 91 | 				currInput.disabled = false;
 92 | 			}
 93 | 		},
 94 | 		nextFocus(event, index) {
 95 | 			let dom = document.getElementsByTagName("textarea");
 96 | 			let currInput = dom[index];
 97 | 			let nextInput = dom[index + 1];
 98 | 			let lastInput = dom[index - 1];
 99 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
100 | 			if (event.keyCode == 13) {
101 | 				// console.log(nextInput);
102 | 				event.preventDefault();
103 | 				nextInput.focus();
104 | 			}
105 | 
106 | 			if (event.keyCode == 38) {
107 | 				lastInput.setSelectionRange(this.cursorStart, this.cursorStart);
108 | 				setTimeout(() => {
109 | 					lastInput.focus();
110 | 				}, 100);
111 | 			}
112 | 			if (event.keyCode == 40) {
113 | 				nextInput.setSelectionRange(this.cursorStart, this.cursorStart);
114 | 				setTimeout(() => {
115 | 					nextInput.focus();
116 | 				}, 100);
117 | 			}
118 | 
119 | 			// 设置当前输入框是否为空，主要控制如果已经输入了内容，再点击删除，会直接删除掉内容
120 | 			// 处理是否为空的时候在删除内容，直接就currInput.value 会伴随着删除按钮的而直接变化掉
121 | 			// 如果已经有内容了，再点击删除按钮会把是否为空删除设置为false，如果直接删除，则是可以的
122 | 			// 逻辑就是要先确定一步是否为空，不能同步进行
123 | 
124 | 			// 当内容为空的时候,点击删除的按键
125 | 			if (event.keyCode == 46 || event.keyCode == 8) {
126 | 				if (
127 | 					currInput.value == "" &&
128 | 					this.currentPageBlocks.length > 1 &&
129 | 					this.isEmptyDelete == true
130 | 				) {
131 | 					this.currentPageBlocks.splice(index, 1);
132 | 					setTimeout(() => {
133 | 						lastInput.focus();
134 | 					}, 300);
135 | 				}
136 | 			}
137 | 			if (currInput.value == "") {
138 | 				this.isEmptyDelete = true;
139 | 			} else {
140 | 				this.isEmptyDelete = false;
141 | 			}
142 | 		}
143 | 	},
144 | 	computed: {
145 | 		currentPageBlocks() {
146 | 			return this.$store.state.currentPageBlocks;
147 | 		}
148 | 	}
149 | };
150 | </script>
151 | 
152 | <style lang="less">
153 | .textBlock {
154 | 	.el-textarea__inner {
155 | 		border: none;
156 | 		outline: none;
157 | 		font-size: 16px;
158 | 		width: 100%;
159 | 		resize: none;
160 | 		padding: 5px 0;
161 | 	}
162 | 	textarea::-webkit-input-placeholder {
163 | 		color: #ffffff;
164 | 	}
165 | 	textarea:focus::-webkit-input-placeholder {
166 | 		color: #999999;
167 | 	}
168 | }
169 | </style>


--------------------------------------------------------------------------------
/src/components/basicBlockComponents/BulletedList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="BulletedList">
  3 | 		<span class="left-Symbol">·</span>
  4 | 		<el-input
  5 | 			type="textarea"
  6 | 			autosize
  7 | 			v-model="mValue.text"
  8 | 			placeholder="输入列表内容"
  9 | 			@keydown.native="addNewTextBlock($event,BlocksIndex)"
 10 | 			@keyup.native="nextFocus($event,BlocksIndex)"
 11 | 		></el-input>
 12 | 	</div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 | 	name: "BulletedList",
 18 | 	props: ["value", "BlocksIndex"],
 19 | 	data() {
 20 | 		return {
 21 | 			mValue: this.value,
 22 | 			cursorStart: 0,
 23 | 			isEmptyDelete:true
 24 | 		};
 25 | 	},
 26 | 	watch: {
 27 | 		mValue(val) {
 28 | 			//本地值改变传给父组件
 29 | 			this.$emit("input", val);
 30 | 		},
 31 | 		value(val) {
 32 | 			this.mValue = val;
 33 | 		}
 34 | 	},
 35 | 	methods: {
 36 | 		addNewTextBlock(event, index) {
 37 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 38 | 			// 获取光标位置
 39 | 			let dom = document.getElementsByTagName("textarea");
 40 | 			let currInput = dom[index];
 41 | 			let nextInput = dom[index + 1];
 42 | 			let lastInput = dom[index - 1];
 43 | 			let startPos = currInput.selectionStart;
 44 | 			this.cursorStart = startPos;
 45 | 
 46 | 			if (event.keyCode == 13) {
 47 | 				event.preventDefault();
 48 | 
 49 | 				if (this.mValue.text.length == 0) {
 50 | 					// 当输入的内容为空的时候
 51 | 					// 点击了回车，就会先删掉当前的内容块，然后新建一个text内容块
 52 | 					let addBlockInfo = {
 53 | 						index: index,
 54 | 						blockItem: {
 55 | 							type: "text",
 56 | 							data: {
 57 | 								text: ""
 58 | 							}
 59 | 						}
 60 | 					};
 61 | 					this.$store.commit(
 62 | 						"mutationAddCurrentPageBlocks",
 63 | 						addBlockInfo
 64 | 					);
 65 | 					lastInput.focus();
 66 | 					this.currentPageBlocks.splice(index, 1);
 67 | 				} else {
 68 | 					// 输入的内容不为空的时候
 69 | 					// 新建text-item到vuex里
 70 | 					let addBlockInfo = {
 71 | 						index: index,
 72 | 						blockItem: {
 73 | 							type: "BulletedList",
 74 | 							data: {
 75 | 								text: ""
 76 | 							}
 77 | 						}
 78 | 					};
 79 | 					// 获取光标位置，处理回车时字符串换行问题
 80 | 
 81 | 					if (startPos != this.mValue.text.length) {
 82 | 						addBlockInfo.blockItem.data.text = this.mValue.text.slice(
 83 | 							startPos,
 84 | 							this.mValue.text.length
 85 | 						);
 86 | 						this.mValue.text = this.mValue.text.slice(0, startPos);
 87 | 					}
 88 | 
 89 | 					// 提交数据到vuex
 90 | 					this.$store.commit(
 91 | 						"mutationAddCurrentPageBlocks",
 92 | 						addBlockInfo
 93 | 					);
 94 | 				}
 95 | 			}
 96 | 		},
 97 | 		nextFocus(event, index) {
 98 | 			let dom = document.getElementsByTagName("textarea");
 99 | 			let currInput = dom[index];
100 | 			let nextInput = dom[index + 1];
101 | 			let lastInput = dom[index - 1];
102 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
103 | 			if (event.keyCode == 13) {
104 | 				// console.log(nextInput);
105 | 				event.preventDefault();
106 | 				nextInput.focus();
107 | 			}
108 | 			if (event.keyCode == 38) {
109 | 				lastInput.setSelectionRange(this.cursorStart, this.cursorStart);
110 | 				setTimeout(() => {
111 | 					lastInput.focus();
112 | 				}, 100);
113 | 			}
114 | 			if (event.keyCode == 40) {
115 | 				nextInput.setSelectionRange(this.cursorStart, this.cursorStart);
116 | 				setTimeout(() => {
117 | 					nextInput.focus();
118 | 				}, 100);
119 | 			}
120 | 			if (event.keyCode == 46 || event.keyCode == 8) {
121 | 				if (
122 | 					currInput.value == "" &&
123 | 					this.currentPageBlocks.length > 1 &&
124 | 					this.isEmptyDelete == true
125 | 				) {
126 | 					this.currentPageBlocks.splice(index, 1);
127 | 					setTimeout(() => {
128 | 						lastInput.focus();
129 | 					}, 300);
130 | 				}
131 | 			}
132 | 			// 设置当前输入框是否为空，主要控制如果已经输入了内容，再点击删除，会直接删除掉内容
133 | 			// 处理是否为空的时候在删除内容，直接就currInput.value 会伴随着删除按钮的而直接变化掉
134 | 			// 如果已经有内容了，再点击删除按钮会把是否为空删除设置为false，如果直接删除，则是可以的
135 | 			// 逻辑就是要先确定一步是否为空，不能同步进行
136 | 			if (currInput.value == "") {
137 | 				this.isEmptyDelete = true;
138 | 			} else {
139 | 				this.isEmptyDelete = false;
140 | 			}
141 | 		}
142 | 	},
143 | 	computed: {
144 | 		currentPageBlocks() {
145 | 			return this.$store.state.currentPageBlocks;
146 | 		}
147 | 	}
148 | };
149 | </script>
150 | 
151 | <style lang="less">
152 | .BulletedList {
153 | 	display: flex;
154 | 	align-items: center;
155 | 
156 | 	.left-Symbol{
157 | 		font-size: 50px;
158 | 		height: 25px;
159 | 	}
160 | 
161 | 	.el-textarea__inner {
162 | 		border: none;
163 | 		outline: none;
164 | 		font-size: 16px;
165 | 		width: 100%;
166 | 		resize: none;
167 | 		padding: 5px 0;
168 | 		margin-left: 5px;
169 | 	}
170 | 	textarea::-webkit-input-placeholder {
171 | 		color: #ffffff;
172 | 	}
173 | 	textarea:focus::-webkit-input-placeholder {
174 | 		color: #999999;
175 | 	}
176 | }
177 | </style>


--------------------------------------------------------------------------------
/src/components/basicBlockComponents/TodoBlock.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="TodoBlock">
  3 | 		<el-checkbox v-model="mValue.isChecked"></el-checkbox>
  4 | 		<el-input
  5 | 			type="textarea"
  6 | 			autosize
  7 | 			v-model="mValue.text"
  8 | 			placeholder="输入待办项"
  9 | 			@keydown.native="addNewTextBlock($event,BlocksIndex)"
 10 | 			@keyup.native="nextFocus($event,BlocksIndex)"
 11 | 		></el-input>
 12 | 	</div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 | 	name: "TodoBlock",
 18 | 	props: ["value", "BlocksIndex"],
 19 | 	data() {
 20 | 		return {
 21 | 			mValue: this.value,
 22 | 			cursorStart: 0,
 23 | 			isEmptyDelete: true
 24 | 		};
 25 | 	},
 26 | 	watch: {
 27 | 		mValue(val) {
 28 | 			//本地值改变传给父组件
 29 | 			this.$emit("input", val);
 30 | 		},
 31 | 		value(val) {
 32 | 			this.mValue = val;
 33 | 		}
 34 | 	},
 35 | 	methods: {
 36 | 		addNewTextBlock(event, index) {
 37 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
 38 | 			// 获取光标位置
 39 | 			let dom = document.getElementsByTagName("textarea");
 40 | 			let currInput = dom[index];
 41 | 			let nextInput = dom[index + 1];
 42 | 			let lastInput = dom[index - 1];
 43 | 			let startPos = currInput.selectionStart;
 44 | 			this.cursorStart = startPos;
 45 | 
 46 | 			if (event.keyCode == 13) {
 47 | 				event.preventDefault();
 48 | 
 49 | 				if (this.mValue.text.length == 0) {
 50 | 					// 当输入的内容为空的时候
 51 | 					// 点击了回车，就会先删掉当前的内容块，然后新建一个text内容块
 52 | 					let addBlockInfo = {
 53 | 						index: index,
 54 | 						blockItem: {
 55 | 							type: "text",
 56 | 							data: {
 57 | 								text: ""
 58 | 							}
 59 | 						}
 60 | 					};
 61 | 					this.$store.commit(
 62 | 						"mutationAddCurrentPageBlocks",
 63 | 						addBlockInfo
 64 | 					);
 65 | 					lastInput.focus();
 66 | 					this.currentPageBlocks.splice(index, 1);
 67 | 				} else {
 68 | 					// 输入的内容不为空的时候
 69 | 					// 新建text-item到vuex里
 70 | 					let addBlockInfo = {
 71 | 						index: index,
 72 | 						blockItem: {
 73 | 							type: "todo",
 74 | 							data: {
 75 | 								isChecked: false,
 76 | 								text: ""
 77 | 							}
 78 | 						}
 79 | 					};
 80 | 					// 获取光标位置，处理回车时字符串换行问题
 81 | 
 82 | 					if (startPos != this.mValue.text.length) {
 83 | 						addBlockInfo.blockItem.data.text = this.mValue.text.slice(
 84 | 							startPos,
 85 | 							this.mValue.text.length
 86 | 						);
 87 | 						this.mValue.text = this.mValue.text.slice(0, startPos);
 88 | 					}
 89 | 
 90 | 					// 提交数据到vuex
 91 | 					this.$store.commit(
 92 | 						"mutationAddCurrentPageBlocks",
 93 | 						addBlockInfo
 94 | 					);
 95 | 				}
 96 | 			}
 97 | 		},
 98 | 		nextFocus(event, index) {
 99 | 			let dom = document.getElementsByTagName("textarea");
100 | 			let currInput = dom[index];
101 | 			let nextInput = dom[index + 1];
102 | 			let lastInput = dom[index - 1];
103 | 			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
104 | 			if (event.keyCode == 13) {
105 | 				// console.log(nextInput);
106 | 				event.preventDefault();
107 | 				nextInput.focus();
108 | 			}
109 | 			if (event.keyCode == 38) {
110 | 				lastInput.setSelectionRange(this.cursorStart, this.cursorStart);
111 | 				setTimeout(() => {
112 | 					lastInput.focus();
113 | 				}, 100);
114 | 			}
115 | 			if (event.keyCode == 40) {
116 | 				nextInput.setSelectionRange(this.cursorStart, this.cursorStart);
117 | 				setTimeout(() => {
118 | 					nextInput.focus();
119 | 				}, 100);
120 | 			}
121 | 
122 | 			// 当内容为空的时候直接删除内容
123 | 			if (event.keyCode == 46 || event.keyCode == 8) {
124 | 				if (
125 | 					currInput.value == "" &&
126 | 					this.currentPageBlocks.length > 1 &&
127 | 					this.isEmptyDelete == true
128 | 				) {
129 | 					this.currentPageBlocks.splice(index, 1);
130 | 					setTimeout(() => {
131 | 						lastInput.focus();
132 | 					}, 300);
133 | 				}
134 | 			}
135 | 			// 设置当前输入框是否为空，主要控制如果已经输入了内容，再点击删除，会直接删除掉内容
136 | 			// 处理是否为空的时候在删除内容，直接就currInput.value 会伴随着删除按钮的而直接变化掉
137 | 			// 如果已经有内容了，再点击删除按钮会把是否为空删除设置为false，如果直接删除，则是可以的
138 | 			// 逻辑就是要先确定一步是否为空，不能同步进行
139 | 			if (currInput.value == "") {
140 | 				this.isEmptyDelete = true;
141 | 			} else {
142 | 				this.isEmptyDelete = false;
143 | 			}
144 | 		}
145 | 	},
146 | 	computed: {
147 | 		currentPageBlocks() {
148 | 			return this.$store.state.currentPageBlocks;
149 | 		}
150 | 	}
151 | };
152 | </script>
153 | 
154 | <style lang="less">
155 | .TodoBlock {
156 | 	display: flex;
157 | 	align-items: center;
158 | 
159 | 	.el-checkbox__inner {
160 | 		width: 16px;
161 | 		height: 16px;
162 | 	}
163 | 	.el-checkbox__inner::after {
164 | 		height: 9px;
165 | 		left: 5px;
166 | 	}
167 | 	.el-textarea__inner {
168 | 		border: none;
169 | 		outline: none;
170 | 		font-size: 16px;
171 | 		width: 100%;
172 | 		resize: none;
173 | 		padding: 5px 0;
174 | 		margin-left: 5px;
175 | 	}
176 | 	textarea::-webkit-input-placeholder {
177 | 		color: #ffffff;
178 | 	}
179 | 	textarea:focus::-webkit-input-placeholder {
180 | 		color: #999999;
181 | 	}
182 | }
183 | </style>


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="home" >
  3 | 		<!-- 添加组件的弹窗 -->
  4 | 		<AddBlockContent></AddBlockContent>
  5 | 
  6 | 		<div class="header">
  7 | 			<h1>All-in-one</h1>
  8 | 			<p>模块化内容构建编辑器，基于Vue和element的打造</p>
  9 | 			<p>以Json格式输出，灵感来自Notion</p>
 10 | 			<!-- <el-button href="https://github.com/CedarXi/All-in-one" >GitHub</el-button> -->
 11 | 			<el-link
 12 | 				:underline="false"
 13 | 				href="https://github.com/CedarXi/All-in-one"
 14 | 				class="el-link-btn"
 15 | 				target="_blank"
 16 | 			>
 17 | 				<i>
 18 | 					<img src="../assets/github.svg" width="18px" />
 19 | 				</i>
 20 | 				GitHub
 21 | 			</el-link>
 22 | 		</div>
 23 | 		<div class="readOnly-switch">
 24 | 			<el-switch v-model="readOnly" active-text="只读模式" inactive-text="编辑模式"></el-switch>
 25 | 		</div>
 26 | 		<div class="container-870">
 27 | 			<draggable tag="ul" :list="getCurrentPageBlocks" class="list-group" handle=".handle">
 28 | 				<div
 29 | 					class="line-wrap list-group-item"
 30 | 					v-for="(item,index) in getCurrentPageBlocks"
 31 | 					:key="index"
 32 | 				>
 33 | 					<div class="line-left" v-if="readOnly ==false">
 34 | 						<!-- 弹出添加组件的弹窗+号按钮 -->
 35 | 						<AddBlockBtn :BlocksIndex="index"></AddBlockBtn>
 36 | 						<!-- 拖拽组件 -->
 37 | 						<a class="drag-btn handle">
 38 | 							<i class="iconfont icondrag"></i>
 39 | 						</a>
 40 | 					</div>
 41 | 					<div class="line-right">
 42 | 						<TextBlock v-model="item.data" :BlocksIndex="index" v-if="item.type=='text'"></TextBlock>
 43 | 						<TodoBlock v-model="item.data" :BlocksIndex="index" v-if="item.type=='todo'"></TodoBlock>
 44 | 						<Heading1 v-model="item.data" :BlocksIndex="index" v-if="item.type=='heading1'"></Heading1>
 45 | 						<Heading2 v-model="item.data" :BlocksIndex="index" v-if="item.type=='heading2'"></Heading2>
 46 | 						<Heading3 v-model="item.data" :BlocksIndex="index" v-if="item.type=='heading3'"></Heading3>
 47 | 						<BulletedList v-model="item.data" :BlocksIndex="index" v-if="item.type=='BulletedList'"></BulletedList>
 48 | 						<Hint v-model="item.data" :BlocksIndex="index" v-if="item.type=='hint'"></Hint>
 49 | 					</div>
 50 | 				</div>
 51 | 			</draggable>
 52 | 		</div>
 53 | 	</div>
 54 | </template>
 55 | 
 56 | <style lang="less">
 57 | .home {
 58 | 	.header {
 59 | 		h1 {
 60 | 			font-size: 50px;
 61 | 		}
 62 | 		text-align: center;
 63 | 		height: 300px;
 64 | 		.el-link-btn {
 65 | 			padding: 10px 20px;
 66 | 			border: 1px solid #dddddd;
 67 | 			border-radius: 4px;
 68 | 			font-size: 20px;
 69 | 		}
 70 | 		.el-link-btn:hover {
 71 | 			border-color: #c6e2ff;
 72 | 			background-color: #ecf5ff;
 73 | 			color: #303133;
 74 | 		}
 75 | 	}
 76 | 	.readOnly-switch {
 77 | 		text-align: center;
 78 | 		margin-bottom: 20px;
 79 | 	}
 80 | 	.container-870 {
 81 | 		padding-top: 100px;
 82 | 		max-width: 870px;
 83 | 		margin-left: auto;
 84 | 		margin-right: auto;
 85 | 		padding: 70px 70px 70px 30px;
 86 | 		border: 1px solid #dddddd;
 87 | 		border-radius: 2px;
 88 | 		box-shadow: 0 8px 42px -8px rgba(82, 94, 102, 0.15);
 89 | 		margin-bottom: 100px;
 90 | 		.drag-btn {
 91 | 			padding: 2px 5px;
 92 | 			border-radius: 2px;
 93 | 			color: #999999;
 94 | 			.icondrag {
 95 | 				font-size: 14px;
 96 | 			}
 97 | 		}
 98 | 		.drag-btn:hover {
 99 | 			background: #eeeeee;
100 | 			cursor: pointer;
101 | 		}
102 | 
103 | 		.line-wrap {
104 | 			display: flex;
105 | 			align-items: center;
106 | 			line-height: 20px;
107 | 			.line-left {
108 | 				width: 40px;
109 | 				display: flex;
110 | 				align-items: center;
111 | 				margin-right: 20px;
112 | 				visibility: hidden;
113 | 			}
114 | 			.line-right {
115 | 				width: 100%;
116 | 			}
117 | 		}
118 | 		.line-wrap:hover {
119 | 			.line-left {
120 | 				visibility: visible;
121 | 			}
122 | 		}
123 | 		.line-wrap:focus {
124 | 			visibility: hidden;
125 | 		}
126 | 	}
127 | }
128 | </style>
129 | 
130 | 
131 | <script>
132 | // @ is an alias to /src
133 | // 引入vuedraggable拖拽组件
134 | import draggable from "vuedraggable";
135 | // 编写的模块组件
136 | import AddBlockBtn from "@/components/AddBlockBtn";
137 | import AddBlockContent from "@/components/AddBlockContent";
138 | import TextBlock from "@/components/basicBlockComponents/TextBlock";
139 | import TodoBlock from "@/components/basicBlockComponents/TodoBlock";
140 | import Heading1 from "@/components/basicBlockComponents/Heading1";
141 | import Heading2 from "@/components/basicBlockComponents/Heading2";
142 | import Heading3 from "@/components/basicBlockComponents/Heading3";
143 | import BulletedList from "@/components/basicBlockComponents/BulletedList";
144 | import Hint from "@/components/basicBlockComponents/Hint";
145 | 
146 | export default {
147 | 	name: "Home",
148 | 	components: {
149 | 		draggable,
150 | 		AddBlockBtn,
151 | 		AddBlockContent,
152 | 		TextBlock,
153 | 		TodoBlock,
154 | 		Heading1,
155 | 		Heading2,
156 | 		Heading3,
157 | 		BulletedList,
158 | 		Hint
159 | 	},
160 | 	data() {
161 | 		return {
162 | 			dragging: false,
163 | 			readOnly: false
164 | 		};
165 | 	},
166 | 	computed: {
167 | 		isShowAddMenu() {
168 | 			return this.$store.state.isShowAddMenu;
169 | 		},
170 | 
171 | 		getCurrentPageBlocks() {
172 | 			return this.$store.getters.getterCurrentPageBlocks;
173 | 		},
174 | 		getterAddMenuContentLayerXY() {
175 | 			return this.$store.getters.getterAddMenuContentLayerXY;
176 | 		}
177 | 	},
178 | 	watch: {
179 | 		readOnly(val) {
180 | 			if (val == true) {
181 | 				let textareaDom = document.getElementsByTagName("textarea");
182 | 				for (let index = 0; index < textareaDom.length; index++) {
183 | 					const element = textareaDom[index];
184 | 					element.readOnly = true;
185 | 				}
186 | 			}
187 | 			if (val == false) {
188 | 				let textareaDom = document.getElementsByTagName("textarea");
189 | 				for (let index = 0; index < textareaDom.length; index++) {
190 | 					const element = textareaDom[index];
191 | 					element.readOnly = false;
192 | 				}
193 | 			}
194 | 		}
195 | 	},
196 | 	mounted() {
197 | 		// 处理textarea的只读属性切换
198 | 	}
199 | };
200 | </script>
201 | 
202 | 
203 | 


--------------------------------------------------------------------------------
/src/components/AddBlockContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div
  3 | 		class="addBlock-content"
  4 | 		v-if="isShowAddMenu == true"
  5 | 		style="z-index: 2001;"
  6 | 		@mousewheel.prevent
  7 | 	>
  8 | 		<!-- {{getterAddMenuContentLayerXY}} -->
  9 | 		<div
 10 | 			class="dropdown-menu"
 11 | 			:style="{ top: getterAddMenuContentLayerXY.y, left:getterAddMenuContentLayerXY.x }"
 12 | 			@mousewheel.stop
 13 | 		>
 14 | 			<div v-for="(item,index) in addBlockInfoArray" :key="index">
 15 | 				<span class="block-type-tip" v-if="index == 0">基础模块</span>
 16 | 				<span class="block-type-tip" v-if="index == 7">媒体和数据</span>
 17 | 				<div class="block-item" @click="addBlock(item.type)">
 18 | 					<div class="block-item-img">
 19 | 						<img :src="getImgUrl(item.type)" style="width: 100%;" />
 20 | 					</div>
 21 | 					<div class="block-item-intro">
 22 | 						<h4>{{item.name}}</h4>
 23 | 						<span>{{item.tip}}</span>
 24 | 					</div>
 25 | 				</div>
 26 | 			</div>
 27 | 		</div>
 28 | 	</div>
 29 | </template>
 30 | 
 31 | <style lang="less">
 32 | .addBlock-content {
 33 | 	position: fixed;
 34 | 	top: 0;
 35 | 	right: 0;
 36 | 	bottom: 0;
 37 | 	left: 0;
 38 | 	overflow: auto;
 39 | 	margin: 0;
 40 | 	.dropdown-menu {
 41 | 		background: #ffffff;
 42 | 		position: absolute;
 43 | 		// margin-left: 58px;
 44 | 		z-index: 2002;
 45 | 		width: 320px;
 46 | 		height: 360px;
 47 | 		overflow-y: auto;
 48 | 		border: 1px solid #dcdfe6;
 49 | 		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
 50 | 		border-radius: 4px;
 51 | 
 52 | 		.block-type-tip {
 53 | 			font-size: 12px;
 54 | 			color: #909399;
 55 | 			display: block;
 56 | 			padding: 10px 20px 5px 20px;
 57 | 		}
 58 | 		.block-item {
 59 | 			padding: 5px 20px 7px 20px;
 60 | 			display: flex;
 61 | 			align-items: center;
 62 | 			background: #ffffff;
 63 | 			.block-item-img {
 64 | 				width: 45px;
 65 | 				height: 45px;
 66 | 				background: #ffffff;
 67 | 				img {
 68 | 					border-radius: 4px;
 69 | 					border: 1px solid #dddddd;
 70 | 				}
 71 | 			}
 72 | 			.block-item-intro {
 73 | 				h4 {
 74 | 					margin: 0;
 75 | 					font-size: 14px;
 76 | 				}
 77 | 				span {
 78 | 					font-size: 12px;
 79 | 					color: #909399;
 80 | 				}
 81 | 				margin-left: 10px;
 82 | 			}
 83 | 		}
 84 | 		.block-item:hover {
 85 | 			background: #eeeeee;
 86 | 			cursor: pointer;
 87 | 		}
 88 | 	}
 89 | }
 90 | </style>
 91 | 
 92 | 
 93 | <script>
 94 | // @ is an alias to /src
 95 | 
 96 | export default {
 97 | 	name: "addBlock-content",
 98 | 	data() {
 99 | 		return {
100 | 			isShowMenu: this.isShowAddMenu,
101 | 			addBlockInfoArray: [
102 | 				{
103 | 					name: "纯文本",
104 | 					tip: "用纯文本开始写内容",
105 | 					type: "text"
106 | 				},
107 | 				{
108 | 					name: "待办清单",
109 | 					tip: "用待办清单去追踪任务",
110 | 					type: "todo"
111 | 				},
112 | 				{
113 | 					name: "标题1",
114 | 					tip: "大字号标题",
115 | 					type: "heading1"
116 | 				},
117 | 				{
118 | 					name: "标题2",
119 | 					tip: "中字号标题",
120 | 					type: "heading2"
121 | 				},
122 | 				{
123 | 					name: "标题3",
124 | 					tip: "小字号标题",
125 | 					type: "heading3"
126 | 				},
127 | 				{
128 | 					name: "符号列表",
129 | 					tip: "大字号标题",
130 | 					type: "BulletedList"
131 | 				},
132 | 				{
133 | 					name: "提示栏",
134 | 					tip: "用于提示比较重要的信息",
135 | 					type: "hint"
136 | 				},
137 | 				{
138 | 					name: "图片",
139 | 					tip: "用于提示比较重要的信息",
140 | 					type: "hint"
141 | 				}
142 | 			]
143 | 		};
144 | 	},
145 | 	watch: {
146 | 		isShowAddMenu: function(value) {
147 | 			if (value == true) {
148 | 				document.addEventListener("click", e => {
149 | 					// console.log(event.target.getAttribute("class"))
150 | 					if (
151 | 						event.target.getAttribute("class") !=
152 | 						"iconfont iconplus"
153 | 					) {
154 | 						if (
155 | 							event.target.getAttribute("class") !=
156 | 							"dropdown-menu"
157 | 						) {
158 | 							this.$store.commit("mutationIsShowAddMenu", false);
159 | 						}
160 | 					}
161 | 				});
162 | 			}
163 | 		}
164 | 	},
165 | 	computed: {
166 | 		isShowAddMenu() {
167 | 			return this.$store.state.isShowAddMenu;
168 | 		},
169 | 		currentBlockIndex() {
170 | 			return this.$store.state.currentBlockIndex;
171 | 		},
172 | 		getterAddMenuContentLayerXY() {
173 | 			return this.$store.getters.getterAddMenuContentLayerXY;
174 | 		},
175 | 		currentPageBlocks() {
176 | 			return this.$store.state.currentPageBlocks;
177 | 		}
178 | 	},
179 | 	methods: {
180 | 		addBlock(a) {
181 | 			let addBlockInfo = {
182 | 				index: this.currentBlockIndex,
183 | 				blockItem: {}
184 | 			};
185 | 			if (a == "text") {
186 | 				addBlockInfo.blockItem = {
187 | 					type: "text",
188 | 					data: {
189 | 						text: ""
190 | 					}
191 | 				};
192 | 			}
193 | 			if (a == "todo") {
194 | 				addBlockInfo.blockItem = {
195 | 					type: "todo",
196 | 					data: {
197 | 						isChecked: false,
198 | 						text: ""
199 | 					}
200 | 				};
201 | 			}
202 | 			if (a == "heading1") {
203 | 				addBlockInfo.blockItem = {
204 | 					type: "heading1",
205 | 					data: {
206 | 						text: ""
207 | 					}
208 | 				};
209 | 			}
210 | 			if (a == "heading2") {
211 | 				addBlockInfo.blockItem = {
212 | 					type: "heading2",
213 | 					data: {
214 | 						text: ""
215 | 					}
216 | 				};
217 | 			}
218 | 			if (a == "heading3") {
219 | 				addBlockInfo.blockItem = {
220 | 					type: "heading3",
221 | 					data: {
222 | 						text: ""
223 | 					}
224 | 				};
225 | 			}
226 | 			if (a == "BulletedList") {
227 | 				addBlockInfo.blockItem = {
228 | 					type: "BulletedList",
229 | 					data: {
230 | 						text: ""
231 | 					}
232 | 				};
233 | 			}
234 | 			if (a == "hint") {
235 | 				addBlockInfo.blockItem = {
236 | 					type: "hint",
237 | 					data: {
238 | 						text: ""
239 | 					}
240 | 				};
241 | 			}
242 | 
243 | 			this.$store.commit("mutationAddCurrentPageBlocks", addBlockInfo);
244 | 
245 | 			// 如果是触发添加内容的面板是从text模块显示的模块添加弹窗页面的，并且内容为空
246 | 			if (
247 | 				this.currentPageBlocks[this.currentBlockIndex].type == "text" &&
248 | 				this.currentPageBlocks[this.currentBlockIndex].data.text == ""
249 | 			) {
250 | 				// 处理光标的显示问题，在当前模块显示
251 | 				this.currentPageBlocks.splice(this.currentBlockIndex, 1);
252 | 				setTimeout(() => {
253 | 					let dom = document.getElementsByTagName("textarea");
254 | 					let currInput = dom[this.currentBlockIndex];
255 | 					currInput.focus();
256 | 				}, 300);
257 | 			} else {
258 | 				// 处理光标的显示问题，新建后，光标也到新建栏
259 | 				setTimeout(() => {
260 | 					let dom = document.getElementsByTagName("textarea");
261 | 					let nextInput = dom[this.currentBlockIndex + 1];
262 | 					nextInput.focus();
263 | 				}, 300);
264 | 			}
265 | 		},
266 | 		getImgUrl(type) {
267 | 			return require("@/assets/" + type + ".png");
268 | 		}
269 | 	}
270 | };
271 | </script>
272 | 
273 | 
274 | 


--------------------------------------------------------------------------------