技术标签: Vue拓展组件功能 vue Vue Vue extend
用到ElementUI的select组件,要求能够多选并且重复选择。如果直接使用的话,首先el-tag
会报错,因为循环中key值重复;其次,他的移除是通过indexof搜索移除的tag的值,且在remove-tag事件中未抛出被移除tag的索引,这样的后果是存在多个相同值的tag时,只会移除第一个相同值的tag
在el-tag
的循环中,给close
事件增加一个参数index
,然后重写deleteTag
方法,直接通过index删除该tag
@close="deleteTag($event, item)"
on-close={e => this.deleteTag(e, this.selected[0])}
deleteTag(event, tag, tagIndex){
const value = this.value.slice();
value.splice(tagIndex, 1);// 核心代码,其他代码省略
}
非常简单,改动特别少,可以使用Vue的所有用法,只需要复制el-select的template
el-select
的template模板内容过来el-select
,继承methods
中的deleteTag
<template>
<div
class="el-select"
:class="[selectSize ? 'el-select--' + selectSize : '']"
@click.stop="toggleMenu"
v-clickoutside="handleClose">
我是示例代码,此处为自定义模板内容
</div>
</template>
<script>
import {
Select} from 'element-ui';
export default {
extends: Select,//继承
name: 'my-el-select',
methods: {
deleteTag(event, tag, tagIndex) {
// 重写该方法
},
},
};
</script>
需要手动将Vue template转为jsx写法,无法使用事件修饰符,部分指令等等,改动比较大
import {
Select} from 'element-ui';
const myElSelect = {
extends: Select
}
Vue template最终编译之后也是生成render函数,这里覆盖render函数,
生成自定义内容。此处的意义只是为了记录以便于方便我用render函数时的jsx写法
render()
{
const tagContent = () => {
if (this.collapseTags && this.selected.length) {
const tag0 = (
<el-tag
closable={
!this.selectDisabled}
size={
this.collapseTagSize}
hit={
this.selected[0].hitState}
type='info'
on-close={
e => this.deleteTag(e, this.selected[0])}
disable-transitions={
true}>
<span class='el-select__tags-text'>{
this.selected[0].currentLabel}</span>
</el-tag>
);
const tag1 = (
<el-tag
closable={
false}
size={
this.collapseTagSize}
type='info'
disable-transitions={
true}>
<span class='el-select__tags-text'>+ {
this.selected.length - 1}</span>
</el-tag>
);
if (this.selected.length > 1) {
return (
<span>
{
tag0}
{
tag1}
</span>
);
}
return (
<span>
{
tag0}
</span>
);
}
};
const emptyText = () => {
if (this.emptyText && (!this.allowCreate || this.loading || (this.allowCreate && this.options.length === 0))) {
return (
<p class='el-select-dropdown__empty'>{
this.emptyText}</p>
);
}
};
const selectOption = () => {
return (
<transition
name='el-zoom-in-top'
on-before-enter={
this.handleMenuEnter}
on-after-leave={
this.doDestroy}>
<el-select-menu
ref='popper'
append-to-body={
this.popperAppendToBody}
v-show={
this.visible && this.emptyText !== false}>
<el-scrollbar
tag='ul'
wrap-class='el-select-dropdown__wrap'
view-class='el-select-dropdown__list'
ref='scrollbar'
class={
{
'is-empty': !this.allowCreate && this.query && this.filteredOptionsCount === 0}}
v-show={
this.options.length > 0 && !this.loading}>
{
this.showNewOption ? (
<el-option
value={
this.query}
created={
true}>
</el-option>
) : null}
{
this.$slots.default
}
</el-scrollbar>
{
emptyText()}
</el-select-menu>
</transition>
);
};
return (
<div
class={
['el-select', this.selectSize ? 'el-select--' + this.selectSize : '']}
on-click={
this.toggleMenu} v-clickoutside={
this.handleClose}>
<div
class='el-select__tags'
ref='tags'
style={
{
'max-width': this.inputWidth - 32 + 'px'}}>
{
tagContent()}
<transition-group onAfterLeave={
this.resetInputHeight}>
{
this.selected.map((item, index) => {
return (
<el-tag
key={
index}
closable={
!this.selectDisabled}
size={
this.collapseTagSize}
hit={
item.hitState}
type='info'
on-close={
(e) => this.deleteTag(e, item, index)}
disable-transitions={
false}>
<span class='el-select__tags-text'>{
item.currentLabel}</span>
</el-tag>
);
})}
</transition-group>
</div>
<el-input
ref='reference'
value={
this.selectedLabel}
type='text'
placeholder={
this.currentPlaceholder}
name={
this.name}
id={
this.id}
auto-complete={
this.autoComplete}
size={
this.selectSize}
disabled={
this.selectDisabled}
readonly={
this.readonly}
validate-event={
false}
class={
{
'is-focus': this.visible}}
on-focus={
this.handleFocus}
on-blur={
this.handleBlur}
on-keyup_native={
this.debouncedOnInputChange}
on-paste_native={
this.debouncedOnInputChange}
on-mouseenter_native={
(this.inputHovering = true)}
on-mouseleave_native={
(this.inputHovering = false)}
>
<i slot='suffix'
class={
['el-select__caret', 'el-input__icon', 'el-icon-' + this.iconClass]}
on-click={
() => this.handleIconClick}/>
</el-input>
{
selectOption()}
</div>
);
}
import {
Select} from 'element-ui';
const myElSelect = {
extends: Select,
methods: {
deleteTag(event, tag, tagIndex) {
// *****略
},
},
render() {
return (
<div>例子</div>
);
}
};
export default myElSelect;
文章浏览阅读3.8k次。1、将下载好的萤石js插件,添加到SoringBoot项目中。位置可参考下图所示。(容易出错的地方,在将js插件在html页面引入时,发生路径错误的问题)所以如果对页面中引入js的路径不清楚,可参考下图所示存放路径。2、将ezuikit.js引入到demo-live.html中。(可直接将如下代码复制到你创建的html页面中)<!DOCTYPE html><html lan..._ezuikit 测试的url
文章浏览阅读322次。第二步,在弹出的对话框选择,设备驱动—>PLC—>莫迪康—>ModbusRTU—>COM,根据配置软件选择的协议选期期,这里以此为例,然后点击“下一步”。第四步,把使用虚拟串口打勾(GPRS设备),根据需要选择要生成虚拟口,这里以选择KVCOM1为例,然后点击“下一步”设备ID即Modbus地址(1-255) 使用DTU时,为下485接口上的设备地址。第六步,Modbus的从机地址,与配置软件相同,这里以1为例,点击“下一步“第五步,Modbus的从机地址,与配置软件相同,这里以1为例,点击“下一步“_组态王ua
文章浏览阅读9.4k次,点赞22次,收藏19次。安装npm相当于安装node.js,Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西_npm安装配置
文章浏览阅读748次,点赞21次,收藏26次。大家好,小编来为大家解答以下问题,python基础训练100题,python入门100例题,现在让我们一起来看看吧!宝子们还在新手村练级的时候,不单要吸入基础知识,夯实自己的理论基础,还要去实际操作练练手啊!由于文章篇幅限制,不可能将100道题全部呈现在此除了这些,下面还有我整理好的基础入门学习资料,视频和讲解文案都很齐全,用来入门绝对靠谱,需要的自提。保证100%免费这不,贴心的我爆肝给大家整理了这份今天给大家分享100道Python练习题。大家一定要给我三连啊~
文章浏览阅读1k次。 为了在 Linux ( Ubuntu) 上安装sublime,一般大家都会选择常见的教程或是 sublime 官网教程,然而在国内这种方法可能失效。为此,需要用安装包安装。以下就是使用官网安装包安装的教程。打开 sublime 官网后,点击右上角 download, 或是直接访问点击打开链接,即可看到各个平台上的安装包。选择 Linux 64 位版并下载。下载后,打开终端,进入安装..._ubuntu 安装sumlime text打不开
文章浏览阅读563次,点赞13次,收藏6次。CrossOver24是一款类虚拟机软件,专为macOS和Linux用户设计。它的核心技术是Wine,这是一种在Linux和macOS等非Windows操作系统上运行Windows应用程序的开源软件。通过CrossOver24,用户可以在不购买Windows授权或使用传统虚拟机的情况下,直接在Mac或Linux系统上运行Windows软件和游戏。该软件还提供了丰富的功能,如自动配置、无缝集成和实时传输等,以实现高效的跨平台操作体验。
文章浏览阅读1.7k次。一个用聊天的方式让ChatGPT帮我写的线程安全的环形List_为什么gpt一写list就卡
文章浏览阅读336次。我们在前面的文章里曾写过Web应用中乱码产生的原因和处理方式,旧文回顾:深度揭秘乱码问题背后的原因及解决方式其中我们提到可以通过Filter的方式来设置请求和响应的encoding,来解..._filterconfig selectencoding
文章浏览阅读651次。转自:http://www.jb51.net/article/36480.htmencodeURI和decodeURI是成对来使用的,因为浏览器的地址栏有中文字符的话,可以会出现不可预期的错误,所以可以encodeURI把非英文字符转化为英文编码,decodeURI可以用来把字符还原回来_js encodeur decodeurl
文章浏览阅读1.9w次,点赞6次,收藏3次。前言在日常的Android开发当中,我们肯定要打包apk。但是今天我打包的时候遇到一个很奇怪的问题Android The destination folder does not exist or is not writeable,大意是目标文件夹不存在或不可写。出现问题的原因以及解决办法上面有说报错的中文大意是:目标文件夹不存在或不可写。其实问题就在我们的打包界面当中图中标红的Desti..._the destination folder does not exist or is not writeable
文章浏览阅读94次。一、配置代码编辑区的样式 <1>打开Eclipse,Help —> Install NewSoftware,界面如下: <2>点击add...,按下图所示操作: name:随意填写,Location:http://eclipse-color-th..._ecplise高大上设置
文章浏览阅读2.8k次。一,下载mysql:http://dev.mysql.com/downloads/mysql/; 打开页面之后,在Select Platform:下选择linux Generic,如果没有出现Linux的选项,请换一个浏览器试试。我用的谷歌版本不可以,换一个别的浏览器就行了,如果还是不行,需要换一个翻墙的浏览器。 二,下载完后解压缩并放到安装文件夹下: 1、MySQL-client-5.6.2_linux mysql 安装 mysql-5.6.24-1.linux_glibc2.5.x86_64.rpm-bundle