Vue前端小知识整理之——富文本内容

此处的’ ‘富文本 ’ 不是指富文本编辑器，而是通过Ajax请求传递过来的，存储在数据库的之前富文本编辑器编辑保存的具有html样式的文本内容

一、解决富文本下面图片大小不受控制的问题(清除所有样式，重新添加)

content= content.replace(/style="[^"]*?"/g,'');

content= content.replace(/height="[^"]*?"/g,'');

content= content.replace(/width="[^"]*?"/g,'');

content= content.replace(/img/g,'img width="100%" ');

二、vue中想给富文本中的图片添加点击事件

2.1 页面代码

<!-- 解决思想：给父容器添加点击事件，通过target方法，得到触发事件源，判断是否为图片 -->
<div class="text" @click="imgonclick($event)" v-html="content"></div>

2.2 方法代码

/*target：指向的是引起触发事件的元素对象，currentTarget：是绑定监听事件的元素对象*/
/*帮助理解: https://www.cnblogs.com/yewenxiang/p/6171411.html*/
imgonclick(e){
	var obj=e.target;
    /*富文本中好像只有img有src属性，javaScript中：undefined,null转成Boolean都是false*/
    if(obj.src){
        console.log(obj.src)
    } 
}

三、vue中富文本图片点击全屏显示

参考链接：jquery实现点击图片全屏查看功能

1.1 代码

<div  class="opacityBottom" v-show="imgIsShow" @click="imgIsShow=false"><img width= "100%" class="bigImg" :src="imgsrc"></div>

1.2 样式

/*使图片在浏览器中居中显示*/
.bigImg {
    position: absolute;
    top: 50%;
    left: 50%;
    /*图片向左移动自身宽度的50%, 向上移动自身高度的50%。*/
    transform: translate(-50%,-50%);
}
/*遮罩层*/
.opacityBottom {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    top: 0;
    left: 0;
}

1.3 vueData

export default {
    data () {   
        return {
            imgsrc: '',
            imgIsShow: false
        }
    }
}

1.4 方法(结合上面的给图片添加点击事件)

imgonclick(e){
    var obj=e.target;
    if(obj.src){
        var imgsrc = obj.src;
        console.log(imgsrc);
        this.imgIsShow=true;
        this.imgsrc=imgsrc;
    }
}