:class=" config.btnLink == ''? 'noPointer':''"
:target=" imgItem.link.match(/(http|https):\/\/([\w.]+\/?)\S*/ig)?'_blank': ''"
:href="isEdit ? 'javascript:;' : imgItem.link == ''?'javascript:': imgItem.link"
1.链接为空的时候,a 链接的小手变成默认的指针
当链接为空的时候给a 链接定义一个class 为noPointer,当hover的时候,设置cursor:defalut;
.noPointer:hover{
cursor: default;
}
2.链接跳转:
需求:如果链接为空,不跳转。如果链接为外链,在新的窗口打开,如果为内链,在当前页面打开。
正则匹配外链接:match(/(http|https):\/\/([\w.]+\/?)\S*/ig)
代码如下:
:target=" imgItem.link.match(/(http|https):\/\/([\w.]+\/?)\S*/ig)?'_blank': ''"
<a
:event="isEdit ? '' : 'click'"
:target=" imgItem.link.match(/(http|https):\/\/([\w.]+\/?)\S*/ig)?'_blank': ''"
:href="isEdit ? 'javascript:;' : imgItem.link == ''?'javascript:': imgItem.link"
></a>
3.清除浮动:
浮动会影响其他元素的布局,清除浮动,是对设置浮动的元素设置::after属性。
.header-box::after{
content:""; /*注意:这里一定要写 即使没有要写的内容也要有.*/
clear:both; /*清除两边的元素*/
display:block;/*伪元素行内的特性*/
}
4.光标处插入关键字
需求如下,以下3个标题,在光标处插入关键字。
核心代码:
1.在input 输入框加blur事件,blur事件加入自定义参数(用于判断是第几个输入框)
@blur="((e,index)=>{titleBlur(e,'1')})"
2.这三个输入框绑定的值为pageInputData.HeadlinePart1,pageInputData.HeadlinePart2,pageInputData.HeadlinePart3
v-model="pageInputData.HeadlinePart1"
3.点击【插入关键字】后触发campaignFormatChar()方法。并将插入的值传入方法中。
4.data定义,currentIndex用于判断处于第几个输入框。
campaignNameIndex用于记录光标的位置。
5.methods定义方法:
titleBlur(e,index){
this.currentIndex = index;
console.log("光标位置",index)
this.campaignNameIndex = e.srcElement.selectionStart;
},
/** 替换字符 **/
campaignFormatChar(val){
if( this.pageInputData[`HeadlinePart${this.currentIndex}`]){
let index = this.campaignNameIndex;
let name = this.pageInputData[`HeadlinePart${this.currentIndex}`];
this.pageInputData[`HeadlinePart${this.currentIndex}`] = name.substring(0,index) + val + name.substring(index);
}else{
this.pageInputData[`HeadlinePart${this.currentIndex}`] = val;
}
},
5.匹配特殊字符{KeyWord:},替换为空
value.replaceAll(/{KeyWord:|}/g, "")