工作211:新的封装组件秒呀

<!-- 可以动态新增的 tag 列表 -->
<template><div><el-tagv-for="(tag, index) in dynamicTags":key="index":closable="true":disable-transitions="false"@close="handleClose(tag)">{{ tag }}</el-tag><el-inputref="saveTagInput"class="input-new-tag"v-if="inputVisible"v-model="inputValue"@keyup.enter.native="$event.target.blur()"@blur="handleInputConfirm"/><el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button></div>
</template><script>
export default {name: "EditableTag",props: {dynamicTags: { type: Array, require: true }},model: {event: "change",prop: "dynamicTags"},data() {return {inputVisible: false,inputValue: ""};},methods: {handleClose(tag) {this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);},showInput() {this.inputVisible = true;this.$nextTick(() => {// auto focusthis.$refs.saveTagInput.$refs.input.focus();});},handleInputConfirm() {if (this.inputValue) {this.dynamicTags.push(this.inputValue);}this.inputVisible = false;this.inputValue = "";}}
};
</script><style>
.el-tag {margin-right: 10px;
}
.button-new-tag {height: 32px;line-height: 30px;padding-top: 0;padding-bottom: 0;
}
.input-new-tag {width: 90px;vertical-align: bottom;
}
</style>

这个组件封装的还是秒呀

值通过父组件传入

绑定change方法

工作211:新的封装组件秒呀相关推荐

工作总结12：封装组件
selectform组件  <template><el-select :value="value" pla ...
组件化开发之如何封装组件
自从React,Vue等前端框架在市面上大量使用之后,组件化开发逐渐成为了前端主流开发方式,今天我就在这里给大家分享一下在我们平时的开发中我们自己应该如何去封装组件.主要从以下三个方面给大家讲解: 什 ...
标准化工作取得新突破窄带物联网商用指日可待
截至四月底,中国信息通信研究院泰尔终端实验室提出的"窄带物联网(NB-IoT)的终端模组"系列标准规范已通过送审稿,正在积极准备报批版本及相关文件,这标志着业界NB-IoT模组系列 ...
firefox使用掘金插件_Mozilla发布新的附加组件来修复旧版Firefox中的扩展禁用问题...
大约一个半星期前的5月4日,用于签署Firefox附加组件的证书过期,随后全球Firefox用户的已有附加组件和新添加附加组件完全停止工作.虽然在Mozilla在下一个周一早上发布修补程序版本,但由于 ...
jquery数组怎么传给后台_我是如何让公司后台管理系统焕然一新的（下）封装组件...
作者:yeyan1996 https://juejin.im/post/5c7b4761f265da2db2795036 写在前面上篇在这里马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热 ...
欧盟「人脑计划」最新进展：新算法模拟生物进化，为大脑如何工作提供新见解...
来源:ScienceAI 编辑:凯霞 2013 年,欧盟「人脑计划」(Human Brain Project,HBP)正式启动,是欧洲最大的脑科学项目,也是欧盟资助的最大研究项目之一.是欧盟首批为期 ...
vue 封装组件供全局使用_vue 封装组件的基本操作
/**1.封装组件局部封装**/ // 1.创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> </div>` }) ...
前端：uniapp封装组件用法笔记
大家在做前端项目开发的时候,经常会遇到公用的一些页面,比如搜索.列表.商品详情卡片.评论列表等.为了提高开发效率.使代码看起来更加简洁,这个时候封装相应的组件是最好的解决方案.今天小编给大家介绍一下如 ...
iOS 15增加更多新的小组件
本文来自威锋网 ,作者乔纳森森森 iOS 15 为许多系统应用程序和功能提供了新的小组件.用户可以轻松地通过上下滚动以查看选定的小组件.重新排列它们或将它们从堆栈中删除.堆栈还有另外两个选项:智能 ...

工作211:新的封装组件秒呀

工作211:新的封装组件秒呀相关推荐

最新文章

热门文章

工作211:新的封装组件 秒呀

工作211:新的封装组件 秒呀相关推荐

最新文章

热门文章

工作211:新的封装组件秒呀

工作211:新的封装组件秒呀相关推荐