实现小程序的图文混排功能

在小程序的开发过程中，小程序开发人员经常会遇到商品详情中图文混排的功能。这个时候要么考虑用WxParse.wxParse组件去解析。另一种是我们后台巧妙地利用数据结构实现图文混排的功能。后台系统的代码如下

<template><div class="img-content"><div  class="btn_box"  ><el-button type="primary" @click="addcontent">添加文本</el-button><el-upload  style="margin: 0 20px"class="upload-img":headers="myHeaders"action="https://www.****/mall/image/upload":on-success="handleAvatarSuccessTop":before-upload="beforeAvatarUpload"list-type="picture"><el-button  type="primary"   >点击上传</el-button></el-upload><el-button type="success" @click="savecontent">保存内容</el-button></div><div class="content_box" v-for="(item,index)  in  contentsCollection"><div v-if="item.type=='content'"  class="content_item"><el-input  class="input_box"type="textarea"autosizeplaceholder="请输入内容"v-model="item.value"></el-input><i class="el-icon-delete" style="margin-left: 90px"   @click="deletecontent(index)"></i></div><div v-if="item.type=='img'"  class="content_item"><img :src="item.value" alt=""   class="img"   v-if="item.value"><div  class="upload-img-box"><el-uploadclass="upload-img":headers="myHeaders"action="https://www.****/mall/image/upload":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"list-type="picture"><el-button size="small" type="primary"  @click="uploadImg(index)" >点击上传</el-button></el-upload></div><i class="el-icon-delete" @click="deletecontent(index)"></i></div></div></div>
</template><script>export default {name: 'img-content',data () {return {contentsCollection: [],}},created () {},mounted () {},methods: {addcontent () {let contentsCollection = this.contentsCollectioncontentsCollection.push({type: 'content',value: ''})},handleAvatarSuccessTop (res) {let {code, data} = resif (code === 0 && data) {this.contentsCollection.push({type: 'img',value: data.imageURL})}},handleAvatarSuccess: function (res) {let index = this.indexlet {code, data} = resif (code === 0 && data) {this.contentsCollection.forEach((item, _index) => {if (_index == index) {item.value = data.imageURL}})}},beforeAvatarUpload (file) {const isJPG = file.type === 'image/jpeg'const isGIF = file.type === 'image/gif'const isPNG = file.type === 'image/png'const isBMP = file.type === 'image/bmp'const isLt2M = file.size / 1024 / 1024 < 2if (!isJPG && !isGIF && !isPNG && !isBMP) {this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!')}return (isJPG || isBMP || isGIF || isPNG) && isLt2M},deletecontent (index) {this.contentsCollection.splice(index, 1)},savecontent () {let contentsCollection = this.contentsCollectionif (!contentsCollection.length) {this.$message.error('没有要保存的内容')return}for (var i = 0; i < contentsCollection.length; i++) {let content = contentsCollection[i]if (content.type == 'img' && !content.value) {this.$message.error('请上传图片')return}if (content.type == 'content' && !content.value) {this.$message.error('请输入内容')return}}this.$emit('getContent', contentsCollection)console.log(contentsCollection)},uploadImg (index) {this.index = index}}
}
</script><style>
.img-content  .btn_box{display: flex;justify-content: flex-start;margin: 10px   0px;
}
.img-content   .content_box {}
.img-content   .content_box .content_item{display: flex;justify-content: flex-start;margin-bottom: 30px;
}
.img-content  .content_box .input_box{/*flex: 5;*/width: 80%;
}
.img-content  .content_box  .el-icon-delete{flex: 1;
}
.img-content  .el-icon-delete{padding: 0  20px;
}
.img-content  .el-upload-list.el-upload-list--picture{display: none;
}.content_item .img{width: 80%;}.content_item .upload-img-box{flex: 1;}
.content_item  .upload-img   {margin-left: 10px;
}</style>在父组件中引入
import  ImgContent  from  './ImgContent.vue'
<ImgContent   @getContent="getContent">  </ImgContent >getContent（value）{console.log(value)
}小程序得到的数据格式[{type: 'content',value: '3333333333'
},{type: 'img',value: 'https;//www.baidu.com/1.png'
},
]
是不是可以在小程序里面循环遍历

https://www.jianshu.com/p/c3425f9ef6b7

redux-saga 中常见的几种模式(翻译)

1.等待多个action中的第一个(first-amongst-these)
2.一直执行某个操作直到满足某个条件(Keep-doing-until)
3.一步接一步(Step-by-Step)

实现小程序的图文混排功能相关推荐

计算机word考试中的图文混排,2014招警考试公共基础计算机知识：Word的图文混排功能...
今天中公在Word中,提供了一套图形绘制.插入图片.艺术字工具.在文档中插入一些说明性的插图.会产出图文并茂的效果. (一)插入并修饰图片 1.插入剪贴画剪贴画是Office中自带的图形,在Wor ...
TextMesh Pro 的图文混排功能：插入自定义表情图
新的油管教程https://www.youtube.com/watch?v=q1pwuBhpr5E 制作Sprite Assets: 首先有张图片格式的图集,导入设置Sprite Mode为Multi ...
菜鸡瞎逼逼：基于UGUI的图文混排
前一阵子在做UI的时候遇到了这样的一个需求,是在一行里显示这样的东西: 而且我们这个项目要做多语言,也就是前边后边的文字都不一定是什么,有可能是中文有可能是英文有可能是俄语也有可能是泰文-(我们项目虽 ...
Swift3.0 功能二 (表情键盘与图文混排)
随着iOS越来越多表情键盘以及图文混排的需求,本文运用Swift3.0系统的实现其功能以及封装调用方法,写的不好,如有错误望各位提出宝贵意见,多谢项目源码地址: 相关知识点都有标识项目源码地址废 ...
Unity Text 实现图文混排和超链接功能
unity 已经在2021版本使用了全面使用了TMP实现图文混排和超链接这两个功能.由于当前项目并没有使用TMP.所以需要基于Text实现这两个功能,但是在2019之后的版本,Text 生成顶点时不再 ...
java swing实现图文混排_跟我学Java Swing之游戏设计(4)
你有没有经历过装修?尽管它是件劳神费力的事,可现代人还是不遗余力地在装修上花尽心思.毕竟,在这个视觉支配感观的时代里,谁会嫌自己家太漂亮呢?今天,就让我们秉着精益求精的完美主义精神,在上次已经完成的游 ...
EditText图文混排
下面就具体说一下我遇到的问题,首先是EditText里面的图文混排问题,这个问题的难点就是三点: 1.怎么插图片 2.怎么保存插入的图片和文字 3.怎么解析回图片和文字解决: 一.怎么插入图片在这 ...
大学计算机word图文混排,Word 2003从入门到精通第五讲（图文混排）讲稿
<Word 2003从入门到精通>第五讲(图文混排) 讲师朱先忠Part 0主要内容 Part 1插入图形在WORD2003中,插入图片的8种途径: 剪贴画来自文件来自扫描仪或者照 ...
计算机基础教学能力比赛教案,全国“XX杯”说课大赛计算机应用基础类优秀作品：Word图文混排教案...
<全国"XX杯"说课大赛计算机应用基础类优秀作品:Word图文混排教案>由会员分享,可在线阅读,更多相关<全国"XX杯"说课大赛计算机应用基础 ...

实现小程序的图文混排功能

实现小程序的图文混排功能相关推荐

最新文章

热门文章