From 271ca6cb0ee2ff0a789bf74d1821e7891a7043bb Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 30 Aug 2022 21:57:42 +0800
Subject: [PATCH] 自定义表情组件
---
src/components/swichLabel/edit.vue | 527 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 508 insertions(+), 19 deletions(-)
diff --git a/src/components/swichLabel/edit.vue b/src/components/swichLabel/edit.vue
index fa56745..b1068a7 100644
--- a/src/components/swichLabel/edit.vue
+++ b/src/components/swichLabel/edit.vue
@@ -1,31 +1,460 @@
<template>
<div class="blog-main">
- <div class="edit-main">
+ <div class="edit-main fade">
<div class="edit-info">
- <div class="edit-info-head">
- 头
+ <div class="edit-info-body blog-container ">
+ 配置项
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>标题:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-input placeholder="限 50字内" />
+ </div>
+ </div>
+ <div class="edit-article-meta">
+
+ <div class="edit-article-item">
+ <span>分类:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-select v-model="typeId" :allowClear="true" mode="default" placeholder="日志分类"
+ :getPopupContainer="getCalendarContainer()" style="width: 100%;">
+ <a-select-option v-for="(item,index) in this.blogArticleType" :key="index"
+ :value="item.id">
+ {{ item.typeName }}
+ </a-select-option>
+ </a-select>
+ </div>
+
+ </div>
+ <div class="edit-article-meta">
+
+ <div class="edit-article-item">
+ <span>主类型:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
+ style="width: 100%;">
+ <a-select-option value="1">
+ markdown
+ </a-select-option>
+ <a-select-option value="2">
+ html
+ </a-select-option>
+ <a-select-option value="3">
+ 视频
+ </a-select-option>
+ <a-select-option value="4">
+ 音频
+ </a-select-option>
+ <a-select-option value="5">
+ 图组
+ </a-select-option>
+ <a-select-option value="9">
+ taking
+ </a-select-option>
+ </a-select>
+ </div>
+
+ </div>
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>引言:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-textarea placeholder="限 700字内" style="max-height: 100px;" />
+ </div>
+ </div>
+
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>是否置顶:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
+ style="width: 100%;">
+ <a-select-option value="0">
+ 否
+ </a-select-option>
+ <a-select-option value="1">
+ 是
+ </a-select-option>
+ </a-select>
+ </div>
+ </div>
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>公开状态:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
+ style="width: 100%;">
+ <a-select-option value="1">
+ 公开
+ </a-select-option>
+ <a-select-option value="2">
+ 私人
+ </a-select-option>
+ <a-select-option value="3">
+ 密码授权
+ </a-select-option>
+ </a-select>
+ </div>
+ </div>
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>授权密码:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-input placeholder="限 50字内" />
+ </div>
+ </div>
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>编辑状态:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
+ style="width: 100%;">
+ <a-select-option value="1">
+ 草稿
+ </a-select-option>
+ <a-select-option value="2">
+ 发布
+ </a-select-option>
+ </a-select>
+ </div>
+ </div>
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>是否允许评论:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
+ style="width: 100%;">
+ <a-select-option value="0">
+ 否
+ </a-select-option>
+ <a-select-option value="1">
+ 是
+ </a-select-option>
+ </a-select>
+ </div>
+ </div>
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>外链:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-input placeholder="限 50字内" />
+ </div>
+ </div>
+ <div>
+ <a-button type="primary" style="margin-right: 10px;">
+ 仅保存配置(含附件)
+ </a-button>
+ <a-button type="primary">
+ 创建新的日志
+ </a-button>
+ </div>
+ <div>附件</div>
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>封面:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-input placeholder="限 50字内" />
+ </div>
+ </div>
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>图组:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-input placeholder="限 50字内" />
+ </div>
+ </div>
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>视频组:</span>
+ </div>
+ <div class="edit-article-value">
+ <a-input placeholder="限 50字内" />
+ </div>
+ </div>
</div>
- <div class="edit-info-body">
- 信息
+
+ <div class="edit-info-head blog-container ">
+ <p>基本信息</p>
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>上次编辑时间:</span>
+ </div>
+ <div class="edit-article-config">
+ 2022-08-27 12:12:12
+ </div>
+ </div>
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>上次更新时间:</span>
+ </div>
+ <div class="edit-article-config">
+ 2022-08-27 12:12:12
+ </div>
+ </div>
+
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>归档时间:</span>
+ </div>
+ <div class="edit-article-config">
+ 2022-08-27 12:12:12
+ </div>
+ </div>
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>首次发布时间:</span>
+ </div>
+ <div class="edit-article-config">
+ 2022-08-27 12:12:12
+ </div>
+ </div>
+ <div class="edit-article-meta">
+ <div class="edit-article-item">
+ <span>创建时间:</span>
+ </div>
+ <div class="edit-article-config">
+ 2022-08-27 12:12:12
+ </div>
+ </div>
</div>
</div>
- <div class="edit-write">
- <div class="edit-write-input">输入区</div>
- <div class="edit-write-preview">对比区</div>
+ <div class="edit-body">
+ <div class="edit-write">
+ <div class="edit-write-input ">
+ <a-textarea id="myInput" style="height: 100%;" v-model="text" class="defenseExpand"
+ @keydown.9.native.prevent="tabFunc" />
+ </div>
+ <div class="edit-write-preview ">
+ <div v-viewer class="markdown-body defenseExpand"
+ style="height: 100%;border: 1px solid #d9d9d9;">
+ <vue-markdown :source="text"></vue-markdown>
+ </div>
+ </div>
+ </div>
+
+ <div class="edit-tool blog-container">
+
+ <div class="edit-tool-item" style="gap: 0px;">
+ <div style="display: flex;width: 350px;">
+ <div style="display: flex;align-items: center;justify-content: flex-end;margin-right: 5px;">
+ <span>日志选取:</span>
+ </div>
+ <a-select v-model="articleTypeId" mode="default" placeholder=""
+ :getPopupContainer="getCalendarContainer()" style="width: 100%;">
+ <a-select-option value="1">
+ 十里平湖霜满天
+ </a-select-option>
+ <a-select-option value="2">
+ 寸寸青丝愁华年
+ </a-select-option>
+ <a-select-option value="3">
+ 对月形单望相护
+ </a-select-option>
+ <a-select-option value="4">
+ 只羡鸳鸯不羡仙
+ </a-select-option>
+ <a-select-option value="5">
+ 江水春沉沉
+ </a-select-option>
+ <a-select-option value="9">
+ 上有双竹林
+ </a-select-option>
+ </a-select>
+ <a-button style="margin-left: 10px;">
+ <a-icon type="reload"></a-icon>
+ </a-button>
+ </div>
+
+ <div class="edit-tool-item" style="gap: 0px;">
+ <a-button type="primary">
+ 调取当前日志内容
+ </a-button>
+ <span class="myTip">(触发前提示手动保存)</span>
+ </div>
+
+ <div style="display: flex;width: 350px;">
+ <div style="display: flex;align-items: center;justify-content: flex-end;margin-right: 5px">
+ <span>草稿列表:</span>
+ </div>
+ <a-select v-model="articleTypeId" mode="default" placeholder=""
+ :getPopupContainer="getCalendarContainer()" style="width: 100%;">
+ <a-select-option value="1">
+ 十里平湖霜满天
+ </a-select-option>
+ <a-select-option value="2">
+ 寸寸青丝愁华年
+ </a-select-option>
+ <a-select-option value="3">
+ 对月形单望相护
+ </a-select-option>
+ <a-select-option value="4">
+ 只羡鸳鸯不羡仙
+ </a-select-option>
+ <a-select-option value="5">
+ 江水春沉沉
+ </a-select-option>
+ <a-select-option value="9">
+ 上有双竹林
+ </a-select-option>
+ </a-select>
+ <a-button style="margin-left: 10px;">
+ <a-icon type="reload"></a-icon>
+ </a-button>
+ </div>
+
+
+ <div class="edit-tool-item" style="gap: 0px;">
+ <a-button type="primary">
+ 调取草稿到内容
+ </a-button>
+ <span class="myTip">(触发前提示手动保存)</span>
+ </div>
+
+
+ </div>
+ <div class="edit-tool-item">
+ <a-button type="primary">
+ 同步滚动对比
+ </a-button>
+ <a-button type="primary">
+ 插入自定义视频
+ </a-button>
+ <a-button type="primary">
+ 插入自定义音频
+ </a-button>
+ </div>
+ <div class="edit-tool-item">
+ <a-button type="primary">
+ 仅更新文本框内容到数据库
+ </a-button>
+
+ <a-button type="primary">
+ 一键保存所有(含配置,草稿)
+ </a-button>
+
+ <div class="edit-tool-item" style="gap: 0px;">
+ <span class="caogaoTip myTip">auto草稿策略:如果文本框在聚焦状态改变内容后,10秒自动保存一次当前文本框内容,最多同时保存10个</span>
+ <span class="caogaoTip myTip">manual草稿策略:手动保存草稿会另外保存在一个文件夹,最多同时保存10个,手动无cd,按钮防抖1秒</span>
+ <span class="caogaoTip myTip">草稿列表是两者叠加</span>
+ </div>
+
+ </div>
+
+ <div class="edit-tool-item" style="gap: 5px;">
+
+ <a-button type="primary">
+ 手动存稿
+ </a-button>
+ <span> 实时保存草稿状态：5秒前</span>
+
+ <span class="myTip">
+ 自动存稿时间: <span class="myTip">草稿-auto-2022-08-27 12:12:12</span>
+ </span>
+ <span class="myTip">
+ 手动存稿时间: <span class="myTip">草稿-manual-2022-08-27 12:12:15</span>
+ </span>
+ <div class="edit-tool-item" style="gap: 0px;">
+ <span class="caogaoTip myTip">保存文件夹格式</span>
+ <span class="caogaoTip myTip"> caogao/id/auto/xxx.md</span>
+ <span class="caogaoTip myTip">caogao/id/manual/xxx.md</span>
+ </div>
+
+ </div>
+
+
+ </div>
+
+
</div>
+
</div>
</div>
</template>
<script>
+ import {
+ queryBlogArticleType
+ } from '../../api/blogArticleType.js'
+
+ import MyOwO from '../common/MyOwO.vue'
+
+ import VueMarkdown from 'vue-markdown'
+ const exp1 =
+ "###   十里平湖 \r> ##### (卢照邻·唐) \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r\n\n";
+ const exp2 = "###   杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n";
+
+ const exp3 = "\r> 「探清水河」\r引用化作 「上有竹林深 」 "
+
+ export default {
+ components: {
+ VueMarkdown,
+ MyOwO,
+ },
+ beforeMount() {
+ queryBlogArticleType({}).then((res) => {
+ this.blogArticleType = res.data;
+ })
+ },
+ data() {
+ return {
+ text: exp1 + exp2 + exp3,
+ articleTypeId: "",
+ typeId: "",
+ blogArticleType: [],
+ }
+ },
+ methods: {
+ insertInputTxt(id, insertTxt) {
+ var elInput = document.getElementById(id);
+ var startPos = elInput.selectionStart
+ var endPos = elInput.selectionEnd
+ if (startPos === undefined || endPos === undefined) return
+ var txt = elInput.value
+ var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
+ elInput.value = result
+ elInput.focus()
+ elInput.selectionStart = startPos + insertTxt.length
+ elInput.selectionEnd = startPos + insertTxt.length
+ },
+ getCalendarContainer(trigger) {
+ return trigger => trigger.parentNode;
+ },
+ }
+
+ }
</script>
<style lang="less">
+ .defenseExpand {
+ max-height: 820px;
+ overflow: auto;
+ }
+
.edit-main {
min-height: 860px;
- width: 100%;
display: grid;
grid-template-columns: repeat(11, 1fr);
+ grid-gap: 20px;
}
.edit-info {
@@ -33,37 +462,97 @@
grid-column-end: 4;
display: flex;
flex-direction: column;
+ gap: 20px;
}
.edit-info-head,
.edit-info-body {
- width: 100%;
+ width: 80%;
+ margin: 0px auto;
}
+
.edit-info-head {
- height: 200px;
- background-color: #aa55ff;
+ height: 300px;
}
.edit-info-body {
- background-color: #aa007f;
height: 100%;
}
- .edit-write {
+
+ .edit-info-head,
+ .edit-info-body {
+ display: flex;
+ gap: 10px;
+ flex-direction: column;
+ }
+
+ .edit-body {
grid-column-start: 4;
grid-column-end: 12;
- background-color: #ffaaff;
display: flex;
+ gap: 20px;
+ flex-direction: column;
+ }
+
+ .edit-tool {
+ height: 300px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+
+ button {
+ margin-right: 10px;
+ }
+ }
+
+ .edit-tool-item {
+ display: flex;
+ flex-direction: column;
+ padding: 10px 20px;
+ gap: 20px;
+ }
+
+ .edit-write {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
}
.edit-write-input {
- width: 100%;
- background-color: #aa557f;
+ flex: 1;
}
.edit-write-preview {
- width: 100%;
- background-color: #55007f;
+ flex: 1;
+ }
+
+ .edit-article-meta {
+ display: flex;
+ }
+
+ .edit-article-item {
+ width: 140px;
+ display: flex;
+ padding-right: 10px;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
+
+ .edit-article-value {
+ width: 50%;
+ }
+
+ .edit-article-config {
+ width: 50%;
+ text-align: center;
+ }
+
+ .caogaoTip {
+ width: 300px;
+ white-space: initial;
+ border: 1px solid #d9d9d9;
}
</style>
--
Gitblit v1.9.1