h5实现类似淘宝评价选择标签

<template><div class="comp-box"><!-- 标签-标签盒子 --><div class="tag-box"><el-tagv-for="item in tagOptions"size="small":type="item.selected ? '' : 'info'":key="`menu-tag-${item.code}`"@click="onClickTag(item)">{{ item.label }}</el-tag></div><!-- 标签-评论内容 --><div ref="cmtContBoxRef" class="content"><divclass="tag-item-content"v-for="item in contList":key="`cont-item-${item.key}`"><div v-if="item.key !== 'txt'" class="label">{{ item.label }}:</div><divcontenteditableclass="cont":style="`text-indent: ${item.label.length === 0 ? 0 : item.label.length + 1}em;`"@input="(e) => onChange(e, item)"></div></div></div><div class="tag-item-content-label">{{ describeNum }}/3000</div></div>
</template>
<script>
/*** @todo 评论组件*/
export default {name: "Comment",props: {/*** tags.item = { code: "color", label: "标题" },* tags.item.code: 标记* tags.item.label: 显示的标题**/tags: {type: Array,default: () => [],},},data() {return {// 评论标签选项tagOptions: [],// 默认列表文字contList: [{ key: "txt", label: "", content: "" }],describeNum: 0};},watch: {tags: function () {// 重载this.reloadTagOptions();},contList: function (nv) {// const lastIdx = nv.length - 1;console.log("最后一行的内容:", nv);},},mounted() {// 重载标签选项this.reloadTagOptions();},methods: {// 获取textarea的样式textAreaClass(item) {return item.key !== "txt" ? "cont tag-input-area" : "cont";},clean() {for (const dom of this.$refs.cmtContBoxRef.children) {dom.children[0].innerText = '';}this.contList = [{ key: "txt", label: "", content: "" }]},// 重载标签reloadTagOptions() {this.tagOptions = this.tags.map((e) => {return { ...e, selected: false };});},onClickTag(item) {const selected = !item.selected;if (selected) {// 选中const newItem = { key: item.code, label: item.label, content: "" };const txtItem = this.contList.find((e) => e.key === "txt");// 如果只有1行且内容为空if (txtItem.content === "") {const list = this.contList.filter((e) => {return e.key !== "txt";});list.push(newItem);this.contList = [...list, txtItem];} else {this.contList.push(newItem);}item.selected = selected;let num = 0;this.contList.forEach(v => {num += v.label.length + v.content.length;})this.describeNum = num;} else {// 未选中const contItemIndex = this.contList.findIndex((e) => e.key === item.code);if (this.contList[contItemIndex].content) {this.$confirm("已填写的描述将被删除", "确认删除标签?", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.contList.splice(contItemIndex, 1);item.selected = selected;let num = 0;this.contList.forEach(v => {num += v.label.length + v.content.length;})this.describeNum = num;}).catch((e) => e);} else {this.contList.splice(contItemIndex, 1);item.selected = selected;}}},// 修改onChange(e, item) {item.content = e.target.innerText;let num = 0;this.contList.forEach(v => {num += v.label.length + v.content.length;})this.describeNum = num;console.log(num);},},
};
</script>
<style lang="scss" scoped>
::v-deep .el-tag {margin-right: 10px;cursor: pointer;
}
div {text-indent: 0em;
}
.comp-box {box-sizing: border-box;border: 1px solid #dedede;background-color: #fafbfc;width: 77%;// width: 500px;padding: 10px;
}
// 标签盒子
.tag-box {width: 100%;
}
// 内容
.content {width: 100%;border: 1px solid #dedede;margin-top: 10px;background-color: #fefefe;min-height: 110px;padding: 5px 0px;// 标签项.tag-item-content {font-size: 12px;color: #666666;position: relative;line-height: 22px;.label {color: #999;font-size: inherit;position: absolute;top: 0px;padding-left: 5px;}.cont {outline: none;border: none;box-sizing: border-box;padding: 0px 5px;// 只显示文本, 不自动生成标签-webkit-user-modify: read-write-plaintext-only;}}
}
.tag-input-area {text-indent: 3em;
}
.btn-box {margin-top: 5px;text-align: right;
}
.tag-item-content-label {display: flex;justify-content: flex-end;align-items: center;color: #999;
}
</style>

效果图

主要是用到div的contenteditable可编辑属性

h5实现类似淘宝评价选择标签相关推荐

评价标签类似淘宝评价效果功能实现
需求:默认显示两行标签内容,点击展开显示全部标签内容,点击收起显示两行内容主要实现代码: MainActivity代码 package it520view.com.labeldemo;import ...
淘宝商品评价api接口(app、h5端)，淘宝评论视频API接口，淘宝评论API接口
淘宝商品评价api接口(app.h5端),淘宝评论视频API接口,淘宝评论API接口可以通过商品id,获取商品评价信息.评价内容.买家秀图片.评论浏览量.评价视频.评价追评等页面上展示的数据均可以拿到 ...
VUE类似淘宝选择商品多规格(库存判断)
1.组件效果展示也可访问链接查看网页效果... 后面又用uni-app写过一次,比这次稍微清晰一些 uni-app类似淘宝选择商品多规格(库存判断) 瞎封装组件系列: VUE简单提示框 VUE树形图 ...
App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，方格布局横向滑动翻页带滚动条
TransformersLayout 项目地址:zaaach/TransformersLayout 简介: :fire: App 金刚区导航菜单,类似淘宝.QQ 音乐等 APP 导航,方格布局横向滑 ...
实战：淘宝开店选择快递公司的因素和技巧
快递是在淘宝开店非常重要的一个环节,因为店铺的DSR评分其中一项就是物流评分,如果快递时效太慢,买家肯定是不开心的.对于市面上那么多的快递公司,不少卖家也不懂得该怎么选择,就给大家说说找快递公司时要考 ...
JavaScript之衣服相册切换效果（类似淘宝商品图切换）
JavaScript之衣服相册切换效果(类似淘宝商品图切换) 话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> &l ...
基于淘宝评价的采集与产品爆款挖掘分析
基于淘宝评价的采集与产品爆款挖掘分析知已知彼,方能百战不殆.在已经成熟的电商环境中尤是如此.无论您是从事公司企业店铺的运营专家,还是从事个人店铺的打理.了解对手行业.了解同行最受欢迎的产品,是必须的 ...
弘辽科技：淘宝关键词选择与组合的注意事项有？
原标题<弘辽科技:淘宝关键词选择与组合的注意事项有?> 店铺的标题对于店铺引入流量是非常关键的,标题就相当于顾客对商家店铺第一印象.很多商家面对标题优化时,会很惶恐,不知从何下手.其实优化 ...
写一个类似淘宝的ios app需要用到哪些技术？
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...

h5实现类似淘宝评价选择标签

h5实现类似淘宝评价选择标签相关推荐

最新文章

热门文章