From f5539f069b7e485ab160cdce668f232b19533a1c Mon Sep 17 00:00:00 2001
From: lijh <lijh>
Date: Mon, 17 Jan 2022 18:45:19 +0800
Subject: [PATCH] 日志添加组件
---
src/components/mini/box10-add.vue | 263 +++++++++++++++++++++++++++++++++++++++++++
src/components/swichLabel/main1-show.vue | 50 +++++++-
src/components/mini/tagInfo.vue | 43 ++++--
3 files changed, 334 insertions(+), 22 deletions(-)
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
new file mode 100644
index 0000000..8a33c45
--- /dev/null
+++ b/src/components/mini/box10-add.vue
@@ -0,0 +1,263 @@
+<template>
+ <div class="myFrom">
+ <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
+ <a-form-model-item label="标题">
+ <a-input v-model="form.title" placeholder="限 50字内" />
+ </a-form-model-item>
+
+ <a-form-model-item label="模式切换">
+ <a-switch v-model="form.online" />
+ <span class="myTip">
+ 本地编辑/由系统生成文件
+ </span>
+ </a-form-model-item>
+
+
+ <a-form-model-item label="日志文件" v-show="!form.online">
+ <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+ :default-file-list="form.blogFileList">
+ <a-button>
+ <a-icon type="upload" /> 限 md/html 文件
+ </a-button>
+ </a-upload>
+ </a-form-model-item>
+
+ <a-form-model-item label="日志内容" v-show="form.online">
+ <a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
+ </a-form-model-item>
+
+ <a-form-model-item label="分类">
+ <a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
+ :getPopupContainer="getCalendarContainer()">
+ <a-select-option value="shanghai">
+ Zone one
+ </a-select-option>
+ <a-select-option value="beijing">
+ Zone two
+ </a-select-option>
+ <a-select-option value="beijing2">
+ Zone two
+ </a-select-option>
+ </a-select>
+ </a-form-model-item>
+
+ <a-form-model-item label="偏好">
+ <a-switch v-model="form.preference" />
+ </a-form-model-item>
+
+ <div v-show="form.preference" class="myBorder" style="padding:10px;">
+ <a-form-model-item label="草稿模式">
+ <a-switch v-model="form.tempSave" />
+ <span v-show="form.tempSave" class="myTip">
+ 临时存储,将不会发布该篇日志
+ </span>
+ </a-form-model-item>
+
+ <a-form-model-item label=" 文件类型">
+ <a-radio-group v-model="form.blogType">
+ <a-radio value="Markdown">
+ Markdown
+ </a-radio>
+ <a-radio value="Html">
+ Html
+ </a-radio>
+ </a-radio-group>
+ </a-form-model-item>
+
+
+ <a-form-model-item label="标签">
+ <template v-for="(tag, index) in tags">
+ <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
+ <a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
+ {{ `${tag.slice(0, 20)}...` }}
+ </a-tag>
+ </a-tooltip>
+ <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
+ {{ tag }}
+ </a-tag>
+ </template>
+ <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
+ :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
+ @keyup.enter="handleInputConfirm" />
+ <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
+ <a-icon type="plus" /> New Tag
+ </a-tag>
+ </a-form-model-item>
+
+
+ <a-form-model-item label="封面">
+ <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
+ :default-file-list="form.coverFileList" class="upload-list-inline">
+ <a-button>
+ <a-icon type="upload" /> jpg/png/jpeg..
+ </a-button>
+ </a-upload>
+ </a-form-model-item>
+
+ <a-form-model-item label="定时">
+ <a-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间"
+ style="width: 100%;" :disabledDate="disabledDate"
+ :getCalendarContainer="getCalendarContainer()" />
+ </a-form-model-item>
+
+
+
+ <div v-bind:class="{'myBorder':form.lock}">
+
+ <a-form-model-item label="加锁">
+ <a-switch v-model="form.lock" />
+ <span v-show="!form.lock" class="myTip">
+ 默认为公开
+ </span>
+ </a-form-model-item>
+
+ <div v-show="form.lock ">
+ <a-form-model-item label="阅读权限">
+ <a-radio-group v-model="form.auth">
+ <a-radio value="private">
+ 私人
+ </a-radio>
+ <a-radio value="password">
+ 密码授权
+ </a-radio>
+ </a-radio-group>
+ </a-form-model-item>
+
+ <a-form-model-item label="授权密码" v-show="form.auth=='password'">
+ <a-input v-model="form.password" type="password" placeholder="Password">
+ <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
+ </a-input>
+ </a-form-model-item>
+ </div>
+
+ </div>
+
+ </div>
+
+ </a-form-model>
+ </div>
+</template>
+
+<script>
+ import moment from "moment";
+ export default {
+ data() {
+ return {
+ blogFileList: [],
+ coverFileList: [
+ // {
+ // uid: '-1',
+ // name: 'xxx.png',
+ // status: 'done',
+ // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ // }
+ ],
+ tags: [],
+ inputVisible: false,
+ inputValue: '',
+ labelCol: {
+ span: 5
+ },
+ wrapperCol: {
+ span: 19
+ },
+ form: {
+ preference: true,
+ title: '',
+ content: '',
+ class: [],
+ tempSave: false,
+ blogType: "Markdown",
+ publishDate: "",
+ lock: false,
+ auth: "private",
+ password: "",
+ blogFileList: [],
+ coverFileList: [
+ // {
+ // uid: '-1',
+ // name: 'xxx.png',
+ // status: 'done',
+ // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ // }
+ ],
+ },
+ };
+ },
+ methods: {
+ disabledDate(current) {
+ return current < moment().subtract(1, "day");
+ },
+ getCalendarContainer(trigger) {
+ return trigger => trigger.parentNode;
+ },
+ handleClose(removedTag) {
+ const tags = this.tags.filter(tag => tag !== removedTag);
+ console.log(tags);
+ this.tags = tags;
+ },
+
+ showInput() {
+ this.inputVisible = true;
+ this.$nextTick(function() {
+ this.$refs.input.focus();
+ });
+ },
+
+ handleInputChange(e) {
+ this.inputValue = e.target.value;
+ },
+
+ handleInputConfirm() {
+ const inputValue = this.inputValue;
+ let tags = this.tags;
+ if (inputValue && tags.indexOf(inputValue) === -1) {
+ tags = [...tags, inputValue];
+ }
+ console.log(tags);
+ Object.assign(this, {
+ tags,
+ inputVisible: false,
+ inputValue: '',
+ });
+ },
+ onSubmit() {
+ console.log('submit!', this.form);
+ },
+ },
+ };
+</script>
+
+<style lang="less">
+ .myTip {
+ font-size: 10px;
+ color: #999;
+ }
+
+ .myBorder {
+ border: 1px solid #999;
+ }
+
+ .ant-upload-list-item-info {
+ a {
+ color: #999;
+ }
+ }
+
+ /* tile uploaded pictures */
+ .upload-list-inline>.ant-upload-list-item {
+ float: left;
+ width: 100px;
+ margin-right: 8px;
+ }
+
+ .upload-list-inline>.ant-upload-animate-enter {
+ animation-name: uploadAnimateInlineIn;
+ }
+
+ .upload-list-inline>.ant-upload-animate-leave {
+ animation-name: uploadAnimateInlineOut;
+ }
+</style>
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index ccdb5f2..abb1e7a 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -10,10 +10,20 @@
<a-icon slot="dot" type="form" style="font-size: 18px;" />
<h4>我...</h4>
<p>
- <ul>
- <li> 尘世间一个迷途小码农</li>
- <li> 喜欢钢琴~喜欢吉他 </li>
- </ul>
+ <ul>
+ <li> 尘世间一个迷途小码农</li>
+ <li> 喜欢钢琴~喜欢吉他 </li>
+ <li> 爱音乐,也爱看番 </li>
+ <li> B界的白嫖怪</li>
+ <li> PC单机的<em style="font-size: 10px;">伪</em>硬核玩家 </li>
+ <li>
+
+ <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;" />
+ 我的小老弟&御用暖床怪
+ <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;" />
+ <span style="font-size: 10px;color: #999">(小乖)</span>
+ </li>
+ </ul>
</p>
</a-timeline-item>
@@ -28,13 +38,18 @@
<br>那时,我满脑子都是在想:说吧,说吧,你再不说,以后可能就没机会了
<br>没等我脑子缓过神来,我把目光从直视栏杆的方向就自然扭回到了她的方向,话题一转:你觉得,我是在用什么心情在看你呢
<br>
- <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象,但我又不记得了,
- <br>几分神,我顿了顿,遥遥头:不是,我是说,我对你的...
+ <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象
+ <br>但我的眼里,彼时彼刻已全是她的身影..
+ <br>几分神,我顿了顿,遥遥头:不是,我是说...我对你的...一时语塞
<br>我的双手在胸前不停打转,很想通过肢体的语言给她传递我心里的感受,有那么一会,我实在是不知道怎么说下去了..
<br>
- <br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
- <br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
- <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
+ <br>客车要发动了,我停下双手,想起也是同样的在5年前的一个场景
+ <br>我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步
+ <br>却踏不起我迟疑的步伐..
+ <br>"哎..给我一个拥抱吧"..我试探下张了双臂,她稍微停了下,还是靠了过来..
+ <br>
+ <br>只须臾片刻,便消千万年间
+ <br>离开她的怀抱后,我比了比个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
<br>
<br>end..希望我们的故事还没有终点..
</a-timeline-item>
@@ -42,11 +57,11 @@
<a-timeline-item color="<white></white>">
<a-icon slot="dot" type="align-left" style="font-size: 18px;" />
- <br><em>爱她所爱,思她所思,为她承担伤痛</em>
- <br>度过苦难 无论贫寒,无论卑贱或富贵
- <br>无论身处乱世还是神所不顾 我都愿为她拔剑而战
- <br>为她收起翅膀
- <br>不离不弃,直至永远
+ <br><em>爱她所爱,思她所思,为她承担伤痛</em>
+ <br>度过苦难 无论贫寒,无论卑贱或富贵
+ <br>无论身处乱世还是神所不顾 我都愿为她拔剑而战
+ <br>为她收起翅膀
+ <br>不离不弃,直至永远
</a-timeline-item>
</a-timeline>
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index de9cf69..15a592b 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -12,25 +12,40 @@
:bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
<boxRight></boxRight>
</a-drawer>
+
+ <a-modal v-model="visible" title="日志添加" on-ok="handleOk" >
+ <template slot="footer">
+ <a-button key="back" @click="handleCancel">
+ 暂缓
+ </a-button>
+ <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+ 完事..
+ </a-button>
+ </template>
+ <box10 ref="modal" ></box10>
+ </a-modal>
+
</div>
<div class="blog-main">
-
-
<a-row>
<a-col v-bind="colApiLeft">
<boxLeft></boxLeft>
</a-col>
<a-col v-bind="colApiMain ">
-
+
<a-button @click="showDrawer1">
小抽屉1
</a-button>
<a-button @click="showDrawer2">
小抽屉2
</a-button>
+ <a-button @click="showModal">
+ 日志
+ <a-icon type="plus-circle" style="margin-left: 0px;"/>
+ </a-button>
<router-view class="fade"></router-view>
</a-col>
-
+
<a-col v-bind="colApiRight" ref="myDrawer">
<boxRight></boxRight>
</a-col>
@@ -41,6 +56,7 @@
</template>
<script>
+ import box10 from "../mini/box10-add.vue"
import boxLeft from "../group/boxLeft.vue"
import boxRight from "../group/boxRight.vue"
import articleList from "../group/articleList.vue"
@@ -49,15 +65,30 @@
export default {
components: {
+ box10,
boxLeft,
boxRight,
articleList,
articleListScorll,
-
-
+
+
},
methods: {
-
+ showModal() {
+ this.visible = true;
+ },
+ handleOk(e) {
+ console.log(this.$refs.modal.form);
+
+ this.loading = true;
+ setTimeout(() => {
+ this.visible = false;
+ this.loading = false;
+ }, 3000);
+ },
+ handleCancel(e) {
+ this.visible = false;
+ },
afterVisibleChange(val) {},
showDrawer1() {
this.visible1 = true;
@@ -74,6 +105,8 @@
},
data() {
return {
+ loading: false,
+ visible: false,
visible1: false,
visible2: false,
colApiLeft: {
@@ -145,7 +178,8 @@
background-color: white;
border-radius: 15px;
}
- .holdHeight{
+
+ .holdHeight {
min-height: 780px;
}
--
Gitblit v1.9.1