首先說(shuō)下我們的業(yè)務(wù)場(chǎng)景：
我們目前有三個(gè)平臺(tái) 分別是淘寶抖音快手(搞數(shù)據(jù)爬蟲(chóng)的),看了一下微博的大概發(fā)布邏輯,微博是前端給后端一個(gè)@馬總 或者 #馬總真棒# 后端把它轉(zhuǎn)成標(biāo)簽的格式例如 ``<a href='www,mazong,com'>馬總</href>`沒(méi)有的話(huà)則創(chuàng)建一個(gè)話(huà)題切油，前端只需要讀取就可 但是我們這個(gè)不可以這樣做 因?yàn)槲覀冇腥齻€(gè)平臺(tái) 如果直接給后端傳一個(gè)名字褥实，并不知道用戶(hù)想要的哪個(gè)平臺(tái)的名字洛勉，跳轉(zhuǎn)的話(huà)就會(huì)有bug，所以這就需要前端來(lái)處理;下面開(kāi)始說(shuō)一下如何實(shí)現(xiàn)页慷。
首先插件是使用的"tributejs": "^5.1.3", 附git鏈接：https://github.com/zurb/tribute瑞信。（注：還有一些bug作者沒(méi)有解決卢鹦，詳情見(jiàn)issues）
然后和后臺(tái)溝通好怎么傳輸 我們是這個(gè)格式 #薇婭#[69226163,taobao] 返回的時(shí)候也是這個(gè)格式然后自己前端處理一下渲染出來(lái)锻离。
里面有一個(gè)trigger是觸發(fā)器 就是觸發(fā)下拉框的一個(gè)事件
[圖片上傳失敗...(image-3e5e3d-1607570108175)]
selectTemplate是點(diǎn)擊確定以后渲染到頁(yè)面的格式 例如我是這樣寫(xiě)的：
selectTemplate: function (item) {
if (this.range.isContentEditable(this.current.element)) {
let tpl = `<a href="javascript:void(0)"
name='${item.original.anchorNickname}'
id='${item.original.anchorId}'
plantfrom='${item.original.anchorPlatform}'
style='color: #FF6B60'
contenteditable='true' target="_blank">
#${item.original.anchorNickname}#</a>`
return tpl
}
},
menuItemTemplate是下拉框的一些樣式：
menuItemTemplate: function (item) {
return `<div class="menuItem" @click="mx">
<em>${item.original.anchorNickname}</em>
<em>粉絲: ${ that.formatNum(item.original.anchorLatestFansNums)}</em>
<span class="${item.original.anchorPlatform == 'kuaishou'?'kuaishou' : (item.original.anchorPlatform == 'douyin' ?'douyin':'taobao')}" >
${item.original.anchorPlatform == 'kuaishou'? '快手平臺(tái)' : (item.original.anchorPlatform == 'douyin'? '抖音平臺(tái)' : '淘寶平臺(tái)') }
</span>
</div>`
},
當(dāng)然還有一些其他的一些配置
例如：
replaceTextSuffix 回車(chē)確認(rèn)以后尾隨的值
noMatchTemplate 沒(méi)有搜索到時(shí)顯示的文案undefinedlookup 搜索時(shí)選擇的參數(shù)
values數(shù)據(jù)
values: [{ key: "Phil Heartman", value: "pheartman" },{ key: "Gordon Ramsey", value: "gramsey" } ] 可以填寫(xiě)默認(rèn)值 也可以寫(xiě)請(qǐng)求方法請(qǐng)求的數(shù)據(jù)。
接下來(lái)會(huì)有小伙伴說(shuō)了,啊 那他是怎么知道我的輸入框在哪里的槽棍？別著急捉蚤，看這里-> this.$nextTick(()=>{
tribute.attach(document.querySelectorAll(".mentionable"));// 綁定你所需要的div的class名字
})
接下來(lái)樣式寫(xiě)完了 開(kāi)始連接跟后臺(tái)的api；
var tribute = new Tribute({
values: (text, cb)=> {
this.remoteSearch(text, users => cb(users));
}
})
/********************************/
methods:{
remoteSearch (text, cb) {
this.text = text;
if(!text){
return;
}
if(this.time){//節(jié)流防抖
this.time = false
setTimeout(()=>{
this.search_anchor(this.text, cb)
this.time = true;
},2000)
}
},
}
功能到這里其實(shí)差不多了炼七，但是我們還有一個(gè)點(diǎn)擊下面的按鈕 添加一個(gè)#其實(shí)就跟微博@一樣缆巧，點(diǎn)擊會(huì)在文本框里添加一個(gè)#或者@。（目前無(wú)法實(shí)現(xiàn)根據(jù)上次光標(biāo)的地方點(diǎn)擊插入進(jìn)去）
給需要觸發(fā)的div綁定事件insertVariable（將文本框原本的內(nèi)容和#做拼接）
insertVariable(value){ //在textarea的光標(biāo)處插入置頂文字
var sel = this.$refs.gain;
sel.innerHTML += " #";
var range = window.getSelection();
range.selectAllChildren(sel);
range.collapseToEnd();
}
直接這樣寫(xiě)是可以尾部插入一個(gè)# 但是有一系列的問(wèn)題 比如換行等 一系列神奇的bug
優(yōu)化代碼如下：
insertVariable(value){ //在textarea的光標(biāo)處插入置頂文字
var sel = this.$refs.gain;
if(sel.innerHTML == '<br>'){ //解決莫名其妙換行問(wèn)題 （里面數(shù)據(jù)為空時(shí)會(huì)塞入一個(gè)br 沒(méi)有找到原因）
sel.innerHTML = " #";
}else{
sel.innerHTML += " #";
}
var range = window.getSelection();
range.selectAllChildren(sel);
range.collapseToEnd();
},
成功解決~豌拙；
接下來(lái)如何渲染呢陕悬；
別著急,上代碼！
htmlShow(){
var reg = /#([^#]+?)#\[(.+?),(.+?)\]/g;
var str = this.content;
if(!this.content){
return;
} else if(!str.match(reg)){
this.htmlInner = str;
return;
}
var repe = str.replace(reg, function (a, b, c, d) {
var name = a.split("#[");
var platform = (name[1].split(",")[1].split("]")[0]).trim();
var id = name[1].split(",")[0];
if(platform == 'taobao'){
return `<span><a href='/taobao/anchorModel/searchAnchor/anchor-detail/${id}' style='color: #FF5353;text-decoration:none;'> ${name[0]}# </a></span>`;
} else if(platform == 'kuaishou'){
return `<span><a href='/kuaishou/anchor/anchor-detail/${id}' style='color: #FF5353;text-decoration:none;'> ${name[0]}# </a></span>`;
} else if(platform == 'douyin'){
return `<span><a href='/douyin/anchor/anchor-detail/${id}' style='color: #FF5353;text-decoration:none;'> ${name[0]}# </a></span>`;
}else{
return ''
}
});
this.htmlInner = repe;
}
使用正則配合來(lái)篩選出所有的帶#xxx#xxx,xxxx 的格式然后使用字符串拼接起來(lái)把數(shù)據(jù)return出去就可以了按傅。
發(fā)布文章可以啦捉超，接下來(lái)還有一個(gè)需求是分享發(fā)布到微博和朋友圈，
分享微博的話(huà)直接用https://service.weibo.com/share/share.php?url=分享地址?&sharesource=weibo&title=分享內(nèi)容 拼接即可 使用npm包來(lái)引入 qrcode ,返回的參數(shù)里面第二個(gè)參數(shù)就是返回的base64
var url = `http://beta2.dev.pangqiu.com/omni/content-details/${item.articleId}`
QRCode.toDataURL(url, (err, url) => {
if(!err){
this.imgUrl = url;
}
})
轉(zhuǎn)換成功
里面有好多坑 踩了一個(gè)星期唯绍，才算搞完拼岳，頭皮發(fā)麻。
