当前位置: 首页 > news >正文

element的tabs组件使用问题解决

1.去除el-tabs组件自带的键盘切换功能

今天在使用element的tabs组件时,发现这个tab组件自带了按键盘左右方向,切换tab的功能,可以通过使用@keydown.native.capture.stop去除该事件

<el-tabs v-model="editableTabsValue"type="card":addable="true"size="small"tab-position="top"style="height:100%"@keydown.native.capture.stopref="tabs">
</el-tabs>
2.我在el-tabs组件的标签中嵌套了el-input之后,发现每次在el-input中输入文字,光标都会跳到最后一位。具体原因不知。

最终的解决办法就是不使用el-input。而是使用原生的input。这样光标就不会总在最后一位了。

<inputclass="tabInput"autocomplete="off"type="text"@blur="closeRenameTab('msg')"@change="closeRenameTab('no')"@input.stopv-model="one.title" ></input>
.tabInput{position: relative;font-size: 12px;display: inline-block;-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;height: 25px;line-height: 25px;outline: none;padding: 0 7px;transition: border-color .2s cubic-bezier(.645,.045,.355,1);width: 100%;
}

http://www.lryc.cn/news/210070.html

相关文章:

  • python实验1 猜数字游戏
  • docker 中给命令起别名
  • PHP的yaf框架自带插件
  • SpringCloud Alibaba【三】Gateway
  • Azure - 机器学习实战:快速训练、部署模型
  • C语言十进制转其它进制
  • 网络建设 之 React数据管理
  • 如何隐藏woocommerce 后台header,woocommerce-layout__header
  • 通俗易懂的理解 解耦 概念
  • 全志A40i android7.1 增加Vlan功能
  • NAT技术与代理服务器
  • 关于报错java.util.ConcurrentModificationException: null的源码分析和解决
  • 使用koa搭建服务器(一)
  • echarts的柱状图的重叠和堆叠实现两个柱体的显示和之前的差值显示
  • 泛积木-低代码 使用攻略
  • 红队专题-从零开始VC++C/S远程控制软件RAT-MFC-远控介绍及界面编写
  • 机器学习(五)如何理解机器学习三要素
  • 【计算机视觉】3D视觉
  • 策略路由和路由策略
  • [动态规划] (一) LeetCode 1137.第N个泰波那契数
  • SystemVerilog语法中,在Class中引用层次化信号
  • 磁盘的结构(磁道,扇区,盘面,柱面,物理地址)
  • uni-app集成uni-simple-router,报错:Uncaught ReferenceError: ROUTES is not defined
  • 几个常用的nosql数据库的操作方式
  • 如何使用 nvm-windows 这个工具来管理你电脑上的Node.js版本
  • 公司电脑禁用U盘的方法
  • Elasticsearch 7.X版本常用语法语句
  • Python分享之数学与随机数 (math包,random包)
  • Linux 基本语句_8_C语言_文件控制
  • 博通BCM575系列 RDMA 网卡驱动 bnxt_re 分析(一)