(vue+【饿了么UI】tag组件封装)

根据项目所衍生的一种tag组件，废话不多说直接上代码

<template>
<div><!-- 素材标签 --><div class="material_title"><div class="m_title">素材标签:</div><div class="m_input"><el-tag v-for="(tag, id) in newFrom.list" :key="id" closable size="mini" :disable-transitions="false" @close="handleClose(id)"># {{ tag.name }}</el-tag><el-input class="input-new-tag" style="width: 100%" v-model="newFrom.inValue" placeholder="请输入或选择标签，输入的标签用分号”;”间隔" size="small" @keyup.enter.native="handleConfirm" @blur="handleConfirm"></el-input></div></div><!-- 标签项 --><div class="material_label"><div class="m_title"></div><div class="m_input"><div class="tab-li" v-for="(item, oop) in list" :key="oop" :class="item.isSelected ? 'Active' : ''" @click="cutTabClick(oop, item)"># {{ item.name }}</div></div></div>
</div>
</template>
<script>
export default {   data(){return {newFrom:{},list:[]}},mounted(){this.getData()},methods:{getData(){let newFrom_request = {                                                   //修改标签弹框数据titleVales: "", //标题list: [{id:1, name: "标签1", isSelected: false },{id:2, name: "标签2", isSelected: false },{id:3, name: "标签3", isSelected: false },{id:4, name: "标签4", isSelected: false },{id:5, name: "标签5", isSelected: false },],inValue: ""}let list_request = [{id:54, name: "添加的标签1", isSelected: false },{id:6, name: "标签2", isSelected: false },{id:7, name: "标签3", isSelected: false },{id:8, name: "标签4", isSelected: false },{id:9, name: "标签5", isSelected: false },]this.newFrom = newFrom_request;this.list = list_request;},cutTabClick(oop, item) {this.actiove = oop;//然后通过这个属性判断是否选中点亮和取消item.isSelected = !item.isSelected;let listNumber = this.newFrom.list.length;if(listNumber >= this.listnumber){return this.$message('最多添加4个标签')}else{if(item.isSelected == false){this.newFrom.list.forEach((items,index) => {if (items.id == item.id) {this.newFrom.list.splice(index,1);}})return false}this.newFrom.list.push({ id:item.id, name: item.name, isSelected: false });}},handleClose(id) {this.newFrom.list.splice(id, 1);},handleConfirm() {let inValue = this.newFrom.inValue;let listLength = this.newFrom.list.lengthif (inValue) {if(listLength >= this.listnumber){return this.$message("最多添加4个标签")}else{this.newFrom.list.push({id:Math.round(Math.random()*100), name: inValue, isSelected: false });}}this.inputVis = false;this.newFrom.inValue = "";},}
}
</script>
<style scoped>
.m_input >>> .el-input__inner {border: none;background-color: rgba(255, 192, 203, 0);
}
.m_input >>> .el-tag {color: #425466;background: #ffffff;border: 1px solid #4c6fff;
}
</style>
<style lang="scss" scoped>
.material_title {height: 48px;display: flex;align-items: center;justify-content: space-between;margin: 20px 0 20px 0; //上 右 下 左.m_title {flex: 1;font-family: Microsoft YaHei;font-size: 14px;line-height: 24px;color: #27272e;}.m_input {height: 100%;margin-left: 14px;display: flex;flex: 10;padding: 0 20px;align-items: center;background: #f8f9ff;backdrop-filter: blur(10px);border-radius: 10px;.el-tag + .el-tag {margin-left: 10px;}.button-new-tag {margin-left: 10px;height: 32px;line-height: 30px;padding-top: 0;padding-bottom: 0;}.input-new-tag {width: 90px;margin-left: 10px;vertical-align: bottom;}}
}
.material_label {display: flex;justify-content: space-around;.m_title {flex: 1;}.m_input {height: 100%;flex: 10;margin-left: 14px;display: flex;align-items: center;.tab-list {width: 92.5%;margin: auto;display: flex;flex-wrap: wrap;}.tab-li {min-width: 1.6rem;height: 100%;border-radius: 0.27rem;text-align: center;line-height: 20px;font-size: 0.32rem;color: #333333;margin-right: 0.75rem;padding: 0 0.2rem;color: #425466;cursor: pointer;background: #fff;border: 1px solid #f4f6ff;}/*点击后样式*/.Active {color: #000;// background: #ff7e22;border: 1px solid #4c6fff;}}
}
</style>

效果图：代码直接可用

(vue+【饿了么UI】tag组件封装)相关推荐

Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）
项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
vue 饿了么ui 日期选择器修改样式
<div class="block"><el-date-pickerv-model="selectStartTime"type="d ...
vue elementui 表格搜索筛选栏组件封装
1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项.表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,且多人开发情况下每个人写的样式都不相同,布局样式无法统一. ...
【Vue】解决el-dialog作为子组件封装点击显示与隐藏问题
element-ui中的el-dialog组件经常用作嵌套表单来使用,但是当我们把它封装成一个子组件时会发现点击隐藏与显示会出现问题.以下贴出关键代码,希望对大家有帮助,共同学习. 解决代码: el- ...
vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）
一.效果图二.说明支持点击输入框删除或输入车牌,可直接在uniapp项目中运行,将view标签换为div.并且将rpx单位换成px可在vue项目里运行三.代码 <temp ...
vue饿了么UI库-笔记
1. :rules="{required: true, message: '有效期不能为空'}" :rules="{type:'date',required: true, ...
Vue + Element UI 实现权限管理系统前端篇（七）：功能组件封装
组件封装为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构组件封装重构后,试图组件结构如下图所示代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

(vue+【饿了么UI】tag组件封装)

(vue+【饿了么UI】tag组件封装)

(vue+【饿了么UI】tag组件封装)相关推荐

最新文章

热门文章