From e51dd03a14f7e7becbca02418fcdc87d08d69eaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com> Date: Wed, 1 Sep 2021 19:19:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E9=93=BE=E6=8E=A5?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=96=B9=E5=BC=8F=E9=80=89=E6=8B=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 4 +- src/assets/js/utils.js | 81 ++++----- src/assets/style/card.less | 4 + src/assets/style/font/iconfont.ttf | Bin 9356 -> 10240 bytes src/assets/style/iconfont.less | 8 +- .../content/components/link-type-select.vue | 170 ++++++++++++++++++ src/components/content/md-textarea.vue | 76 ++++++-- .../content/mixins/render-mixins.js | 8 + .../content/mixins/select-link-type-mixins.js | 103 +++++++++++ .../header/components/table-select.vue | 13 -- .../header/components/tool-button.vue | 6 +- 11 files changed, 394 insertions(+), 79 deletions(-) create mode 100644 src/components/content/components/link-type-select.vue create mode 100644 src/components/content/mixins/select-link-type-mixins.js diff --git a/src/App.vue b/src/App.vue index bbaa603..e9171ee 100644 --- a/src/App.vue +++ b/src/App.vue @@ -458,12 +458,10 @@ export default { const url = item.csdn ? "https://link.csdn.net/?target=" + item.url : item.url; - // linkEl.id = "md_link_card"; - linkEl.className = "md_link_card"; + // linkEl.className = "md_link_card"; linkEl.setAttribute("target", "_blank"); linkEl.setAttribute("href", url); const title = getLinkTitle(linkEl, item); - linkEl.innerHTML = renderLinkCard(title, item); }); _this.html = vDom.innerHTML; diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js index 88e05c3..74158d3 100644 --- a/src/assets/js/utils.js +++ b/src/assets/js/utils.js @@ -1,6 +1,3 @@ -import marked from "marked"; -// import videojs from "video.js"; -// import "video.js/dist/video-js.min.css"; // 获取选中文本信息 export function getSelectionInfo(selectorId) { @@ -372,9 +369,11 @@ export function getLinkTags(id, html) { virtualDom.querySelectorAll("a:not([download])") ).map((item, index) => { item.id = id + "_" + new Date().getTime() + "_" + index; + const linkType = item.getAttribute("data-type"); return { id: item.id, title: item.innerText, + linkType, url: item.href }; }); @@ -394,30 +393,40 @@ export function removeLinkHeadAndEnd(link) { } export function renderLinkCard(title, item) { - console.log(item.title); - console.log(item.url); - - return ` - ${ - removeLinkHeadAndEnd(item.title) === removeLinkHeadAndEnd(item.url) - ? "" - : ` - ${title || item.title || ""} - ` - } - ${`${item.description || ""}`} - - ${ - item.icon - ? `` - : "" + const linkType = item.linkType; + let content; + switch (linkType) { + case "1": + content = `${item.title}`; + break; + case "2": + content = `${item.url}`; + break; + default: + content = `
+ ${ + removeLinkHeadAndEnd(item.title) === removeLinkHeadAndEnd(item.url) + ? "" + : ` + ${title || item.title || ""} + ` + } + ${`${item.description || ""}`} + + ${ + item.icon + ? `` + : "" + } + + ${item.url} + +
`; + break; } - - ${item.url} - - `; + return content; } export function preventDefault(id) { @@ -429,26 +438,6 @@ export function preventDefault(id) { return; } -// export async function renderVideo(id, html) { -// const virtualDom = document.createElement("div"); -// virtualDom.innerHTML = html; -// document.body.appendChild(virtualDom); -// const videoList = Array.from(virtualDom.getElementsByTagName("video")); - -// const newHtml = await new Promise((resolve, rej) => { -// videoList.forEach(item => { -// console.log(item); -// item.setAttribute("controls", "controls"); -// }); -// setTimeout(() => { -// const newHtml = virtualDom.innerHTML; -// resolve(newHtml); -// document.body.removeChild(virtualDom); -// }, 5000); -// }); -// return newHtml; -// } - // 获取方法参数名 export function getParameterName(fn) { if (typeof fn !== "object" && typeof fn !== "function") return; diff --git a/src/assets/style/card.less b/src/assets/style/card.less index 023b73f..01c5f0e 100644 --- a/src/assets/style/card.less +++ b/src/assets/style/card.less @@ -59,6 +59,10 @@ } } +.md_link_url { + color: var(--md-editor-border-color-active); +} + #md_file_card, .md_file_card { display: block; diff --git a/src/assets/style/font/iconfont.ttf b/src/assets/style/font/iconfont.ttf index 06877324649965a7176444ef88807ae84cf3f416..5d6d60fb7817490c90df06b1f1801f5d88f4c1fe 100644 GIT binary patch delta 2285 zcmaJ>ZERat8Gg_GIM*NdUVq%{kJ`zN9Vd3yI92M{H={|`7SgR$X*Ep)rYfv)mSDR} z>}-qMq_lF7pxR2A%I?rQexQiL52T3>jF9+Hl^+QBv5CPCC=y6Pz=^arZ0e|lP;K*G zU!k>3;~qag?|ILA-tTiRe|qEbD~ZNr>_iQKTn2!-XO@dAf4|I+0&p7u!m-lQ`WJq9 z{p}9`q$ohoo8`sgf-$}CeU#lsm}O+RP6~ZU{~R$;US3`MMxfI|eYbJ_>Qe2Q;)`=v z-T-G{ThvyR%$P-o;~S}0i@9h@(vIHextJi zvqGcO?)+Q0U~?Y$2D=>O{&6?^^eNxuUGNHBfj>Wacg-g38P8r2F7Ov|=>o31jp}h8 zv<&hbk*q6Z(!;o0SG&f*`aK!5lH7oGm>YYAGa8)^ii!vxkwu^d?vmpQ`7&~CRau-p zUA{n`!u25>c!mi~VjdP^2{y>+l5O|gUQFgwC#Seez>8Mek=Vz02**mZV;ZL#-v zF6~^~`ToxCyYJn)YFlRexsRxryiY}y)&Ez8rShM$MtM(zpcB&{8IQt;<0u^aKLel- z5)c9dg5ZTPL?8-D3^xV=40ixDNMS~0P(TGAxS4n?u(wi zo~J#3@*3W6dH*FpA%9zbOBqr&l$+{PwjJ#7A=Gm(m+d{7XKO_ z!J0%cW25jSyoeP{=E6EnCHvEPQ~Ma2FNDo;b39)d3#AIYO_~KWEv2bML#h1uBP3#m zrLaVOgi0u4j%&I>a^q&kOlQ)mLJlP|4Raqs=|_lt+LqTPDupB6a~XXlSpOuD5WUu=*NSyq!Gf8vY86_XUd%SDJwk`-B| zlr)GMQj)~&mfT)Bnj#)ia#58KzaIC+-EQu0#$E$|?cY2&bEl$&M^6R*2j|;oqN-Q* z`aA)`N!07rf~t=r{d;tu>W&JuPxH6`>hVd`CA$=!#&}+#9+haa5_M4_%oEZR_Q{mz zsH#T-8b=hxA8g9L&-2#0YqePk%Ea1r{j7OjUl*I-b?d~syXSWEC!U*J^DnVi#Rgu4 z&TW2|&tn56;Q*Gdkhk-j%*nC_6Ec<>l&T(-)2S$&AR0%c9pq67EKi&W%0R z`*1*u1@(#H*2Uq8iD9xa{ynYNKeF7~4C+ypI~UZ6__oKb#qsLl4eE6GEp8j{n1*lA zFg$Gc+XJ4a`D7p|qStv0q@U{H$bGcf4JPdzXz-i&wiHcM_(S+V(!z(KRU)6TIqhGm z!Jv8{&1H}s(=={dQ(AMj2)C(dtvPOP+h)hKEoVBUDddw~4L1~gPlQgV(-46F5I zFaw{#82T~0nKU+e13NbtF-Rn=ODd6Q1{-|b%xAC!{n#K>k6<@zxp2sCY!%a=D&)t_ zgT%xtrBDKIiiz7gwQm{+l*URs!#nwnTB-T5zZ@v+bKc*eA- ze!{0tEBf$IE~FoyosJrbY+s-CwRpswen7r^ko)oR!)8hz@n>VQyfTC6-%Hn*bShHSFrNhE}ZE3;1P^>H$pRE@w)ZQp9TE9yj4@*mU?sR3b%UkVk z;nG@8rQME!B(F`HFJC(*4%afrByE*+mpBR&(^(qHSH8FIG$E%J_8u2h{8d A8vpt3A#q! zphr0u)p1R;b3Eahz$B(;cIIV4 z*2^NSj}5Q{%d)eq$gZ%P>=Sm6EpJ@ixV!Pi#@5sA&812O0R6aEehtm&7=G!PVTFG? z(l-83iQsiT(EDmfAqxF3_girIe>Q*xc4L}#-~lHlD}n@jut5as!GUekz%HnPTCjo* zi)(}iFn}3M-~u<;u~;1#v5O)AwF=Ma2(N2E88x?+UtD{XGE~4q>otB-N23~N#0kLc zDoQJvR|W3})~te=01K!naad3VwDhLNFFR1`Q&Gmr22_+Gv4jfd4lJXBRRGJXU_HPJ zDp(n?vnp64u%Zg^v`zFk8&JBZf^`F1R>2Oy##I$?(d(kKgwt8htJ))+PG;*|JU(n^EUb!kmIrd`$D(fzD<=x^!Q z4C99TM!oT*@gw6Sj8T1o`Mn&)IduaxcheTBRBqOF5jtef(+8GszI4`*^53q9T=_HU zLsH%{Oz`FJ%tlhe235-ZkNiO#dOPfgFpT5Ce3B@McAL{~bA*WFK+l0F2?mtS`-1-N zKvm&%I6XwMlf|XxJAm1Me%_c6K7+p76_bEaCP{Qr=zF6_DPQ_=&-mS){Mr-l@ZgiSVPNU83CR35l z-R(^-o7v)P@zn+DiQCR=x({Lh%8NA%8d~FeR{o{omZto`f0-jbIu12$~1_NTgkVA?75C~XxGjcL5e^8K< z+JR&5baZr#bWlEc^tGy6KB*k&CeA04xnxF+7v#)z(s({wC>B!5m=c +
+
    +
  • 显示为
    • +
  • + + +
    • +
+
+ + + diff --git a/src/components/content/md-textarea.vue b/src/components/content/md-textarea.vue index 6c7b7cb..409f178 100644 --- a/src/components/content/md-textarea.vue +++ b/src/components/content/md-textarea.vue @@ -10,8 +10,10 @@ @focus="setFocus(true)" @blur="blur" @paste="pasteFile" - @keydown.stop.up="changeActiveUserIndex($event, 'up')" - @keydown.stop.down="changeActiveUserIndex($event, 'down')" + @keydown.stop.left="handlePointMove" + @keydown.stop.right="handlePointMove" + @keydown.stop.up="changeActiveSelectIndex($event, 'up')" + @keydown.stop.down="changeActiveSelectIndex($event, 'down')" @keydown.enter="handleEnter" @keydown.meta.enter.exact="submit" @keydown.ctrl.enter.exact="submit" @@ -42,15 +44,23 @@ :showHelp.sync="showHelp" /> - + - + +