Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
52it.club
Awesome-Markdown-Editor
提交
9db2d1e1
Awesome-Markdown-Editor
项目概览
52it.club
/
Awesome-Markdown-Editor
与 Fork 源项目一致
Fork自
gitcode_dev / Awesome-Markdown-Editor
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Awesome-Markdown-Editor
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9db2d1e1
编写于
7月 23, 2021
作者:
璃白.
🌻
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加链接卡片样式
上级
f0652e6a
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
35 addition
and
7 deletion
+35
-7
src/App.vue
src/App.vue
+10
-4
src/assets/js/utils.js
src/assets/js/utils.js
+5
-0
src/assets/style/card.less
src/assets/style/card.less
+9
-1
src/assets/style/global.less
src/assets/style/global.less
+11
-2
未找到文件。
src/App.vue
浏览文件 @
9db2d1e1
...
@@ -86,7 +86,7 @@ import markdownHeader from "./components/header/md-header";
...
@@ -86,7 +86,7 @@ import markdownHeader from "./components/header/md-header";
import
markdownFooter
from
"
./components/footer/md-footer
"
;
import
markdownFooter
from
"
./components/footer/md-footer
"
;
import
markdownEditor
from
"
./components/content/md-textarea
"
;
import
markdownEditor
from
"
./components/content/md-textarea
"
;
import
markdownPreview
from
"
./components/content/md-preview
"
;
import
markdownPreview
from
"
./components/content/md-preview
"
;
import
{
formatText
,
checktUrl
}
from
"
@/assets/js/utils
"
;
import
{
formatText
,
checktUrl
,
getLinkTitle
}
from
"
@/assets/js/utils
"
;
export
default
{
export
default
{
components
:
{
components
:
{
markdownHeader
,
markdownHeader
,
...
@@ -368,10 +368,16 @@ export default {
...
@@ -368,10 +368,16 @@ export default {
const
linkEl
=
vDom
.
querySelector
(
"
#
"
+
item
.
id
);
const
linkEl
=
vDom
.
querySelector
(
"
#
"
+
item
.
id
);
linkEl
.
className
=
"
md_link_card
"
;
linkEl
.
className
=
"
md_link_card
"
;
linkEl
.
setAttribute
(
"
target
"
,
"
_blank
"
);
linkEl
.
setAttribute
(
"
target
"
,
"
_blank
"
);
const
title
=
getLinkTitle
(
linkEl
);
linkEl
.
innerHTML
=
`
linkEl
.
innerHTML
=
`
<span class="md_link_title">
${
item
.
title
}
</span>
<span class="md_link_title">
${
title
||
item
.
title
}
</span>
<span class="md_link_desc">
${
item
.
desc
}
</span>
<span class="md_flex_card">
<span class="md_link_url">
${
item
.
url
}
</span>
<img class="md_link_img" src="
${
item
.
img
}
" />
<span class="flex-1">
<span class="md_link_desc">
${
item
.
desc
}
</span>
<span class="md_link_url">
${
item
.
url
}
</span>
</span>
</span>
`
;
`
;
});
});
// return vDom.innerHTML;
// return vDom.innerHTML;
...
...
src/assets/js/utils.js
浏览文件 @
9db2d1e1
...
@@ -330,3 +330,8 @@ export function getLinkTags(id, html) {
...
@@ -330,3 +330,8 @@ export function getLinkTags(id, html) {
);
);
return
{
vDom
:
virtualDom
,
links
};
return
{
vDom
:
virtualDom
,
links
};
}
}
export
function
getLinkTitle
(
linkEl
)
{
const
title
=
linkEl
.
innerText
;
return
/^http/
.
test
(
title
)
?
""
:
title
;
}
src/assets/style/card.less
浏览文件 @
9db2d1e1
...
@@ -6,12 +6,16 @@
...
@@ -6,12 +6,16 @@
border: 1px solid var(--md-editor-border-color);
border: 1px solid var(--md-editor-border-color);
background: #f5f6f7;
background: #f5f6f7;
transition: border 0.3s;
transition: border 0.3s;
max-width: 800px;
&:hover {
&:hover {
border: 1px solid var(--md-editor-border-color-active);
border: 1px solid var(--md-editor-border-color-active);
}
}
span {
span {
color: var(--md-editor-text-color-active);
color: var(--md-editor-text-color-active);
display: block;
}
.md_link_img {
height: 64px;
margin-right: 16px;
}
}
.md_link_title {
.md_link_title {
font-size: 16px;
font-size: 16px;
...
@@ -36,5 +40,9 @@
...
@@ -36,5 +40,9 @@
.md_link_url {
.md_link_url {
font-size: 12px;
font-size: 12px;
color: var(--md-editor-border-color-active);
color: var(--md-editor-border-color-active);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
}
}
}
src/assets/style/global.less
浏览文件 @
9db2d1e1
@import "./variable.less";
@import "./variable.less";
@import "./iconfont.less";
@import "./iconfont.less";
@import "./markdown.less";
@import "./markdown.less";
@import
'./card.less'
;
@import
"./card.less"
;
* {
* {
padding: 0;
padding: 0;
...
@@ -47,4 +47,13 @@ textarea {
...
@@ -47,4 +47,13 @@ textarea {
// img {
// img {
// display: block;
// display: block;
// margin: 0;
// margin: 0;
// }
// }
\ No newline at end of file
.md_flex_card {
display: flex;
justify-content: space-between;
align-items: center;
.flex-1 {
flex: 1;
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录