Vue配置marked鏈接添加target="_blank"的方法
更新時間：2019年07月19日 11:26:47 作者：試毅_思偉
這篇文章主要介紹了Vue配置marked鏈接添加target="_blank"的方法，文中給大家提到了vue實現(xiàn)類似target="_blank"打開新窗口的代碼,感興趣的朋友參考下吧
1."引入marked
package.json
"dependencies": {
"marked": "^0.3.9"
}
import marked from "marked";
1.修改生成的HTML的方法
const renderer = new marked.Renderer();
//https://github.com/markedjs/marked/issues/655#issuecomment-383226346
const linkRenderer = renderer.link;
renderer.link = (href, title, text) => {
const html = linkRenderer.call(renderer, href, title, text);
return html.replace(/^<a /, '<a target="_blank" ');
};
const html = marked(markdown, { renderer });
Tips:marked參數(shù)配置
const renderer = new marked.Renderer();
//基本設(shè)置
marked.setOptions({
renderer: renderer,
gfm: true, //允許 Git Hub標(biāo)準(zhǔn)的markdown.
tables: true, //允許支持表格語法（該選項要求 gfm 為true）
breaks: true, //允許回車換行（該選項要求 gfm 為true）
pedantic: false, //不糾正原始模型任何的不良行為和錯誤（默認為false）
sanitize: false, //對輸出進行過濾（清理），將忽略任何已經(jīng)輸入的html代碼（標(biāo)簽）
smartLists: true, //使用比原生markdown更時髦的列表
smartypants: false //使用更為時髦的標(biāo)點
});
ps：vue實現(xiàn)類似target="_blank"打開新窗口
//href的{}不能少
let {href} = this.$router.resolve({path:'/applySocSecCard'});
window.open(href, '_blank');
總結(jié)
以上所述是小編給大家介紹的Vue配置marked鏈接添加target="_blank"的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了詳解Vue 實例中的生命周期鉤子，在Vue的整個生命周期中，它提供了一些生命周期鉤子，給了我們執(zhí)行自定義邏輯的機會。2017-03-03
接收一個輸入的手機號,判斷輸入的手機號是否正確是一個很常見的功能,這篇文章主要給大家介紹了關(guān)于前端Vue手機號校驗以及后端Java手機號校驗的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要為大家推薦了一篇值得收藏和學(xué)習(xí)的vue.js最細致的基礎(chǔ)語法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue3+Element+Ts實現(xiàn)表單的基礎(chǔ)搜索重置等功能
本文主要介紹了Vue3+Element+Ts實現(xiàn)表單的基礎(chǔ)搜索重置等功能，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
詳解基于 Nuxt 的 Vue.js 服務(wù)端渲染實踐
這篇文章主要介紹了詳解基于 Nuxt 的 Vue.js 服務(wù)端渲染實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue使用高德地圖實現(xiàn)添加點標(biāo)記和獲取點擊位置信息的示例代碼
這篇文章主要介紹了vue使用高德地圖實現(xiàn)添加點標(biāo)記和獲取點擊位置信息的示例代碼,文中補充介紹了高德vue-amap使用（一）標(biāo)記點位獲取地址及經(jīng)緯度,本文結(jié)合示例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-01-01
el-form表單el-form-item label不換行問題及解決
這篇文章主要介紹了el-form表單el-form-item label不換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了VUE如何將方法名字作為變量進行調(diào)用問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了VUE JS 使用組件實現(xiàn)雙向綁定，詳細的介紹了vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
capture事件修飾符的作用是給元素添加一個監(jiān)聽器，當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧2017-12-12