精华内容
下载资源
问答
  • el-dropdown-item绑定事件
    2022-05-18 17:26:46

    el-dropdown-item @click事件点击无效

    一开始在里面包裹了一层<label>,在label里面添加click事件,然后发现只有在点击文字的时候才能触发,实际效果不怎么样

    搜了一下,最好的解决办法应该是@click.native,如果不需要穿参的话其实也可以用官方自带的方法command

    更多相关内容
  • 且多个el-dropdown下拉 共用 一个 @command 事件 @command=”handleCommand” 上代码部分 html //全部城市 下拉 //handleCommand下拉事件 all_city点击后显示在上面的数据 item.label下拉的数据 :command点击...
  • 问题遇到的现象和发生背景 使用VUE下拉框组件el-dropdown-item,设置click点击事件,会触发两次 js写了一个exit方法,在下拉框选项处click调用,会触发两次exit事件,在别处调用不会出现此情况。 问题相关代码,请勿...
  • el-dropdown绑定click点击事件不生效和样式修改 我们在开发项目的时候会用到el-dropdown,这个功能一般都会在用户上进行使用 比如: 修改密码,退出的情况下 绑定点击事件 组件直接绑定点击事件是不生效的,需要...

    el-dropdown绑定click点击事件不生效和样式修改

    我们在开发项目的时候会用到el-dropdown,这个功能一般都会在用户上进行使用

    比如:
    修改密码,退出的情况下
    在这里插入图片描述
    绑定点击事件

    组件直接绑定点击事件是不生效的,需要通过 @click.native=‘logout’ 这种方式来进行绑定点击事件。

    修改样式

    先看图:
    在这里插入图片描述
    这个组件的DOM不在#app里面,和#app是同级关系。

    如果我们要修改组件样式的话,我们就不能再style上加scoped,必须全局修改,这样就会出现一个情况:我们在其他地方使用组件的话,就会出现样式污染。

    因此,我们可以在组件上加上 :append-to-body=“false”,这样我们把组件的DOM添加进了#app里面,同时也可以在此基础上添加class名,来进行样式修改。

    <el-dropdown trigger="click" placement="bottom-end">
            <el-dropdown-menu
              slot="dropdown"
              :append-to-body="false"
              class="popper-dropdown"
            >
              <el-dropdown-item @click.native="changePasswordt">
                <span @mouseover="mouseOverFirst" @mouseleave="mouseLeaveFirst"
                  >修改密码</span
                >
              </el-dropdown-item>
              <el-dropdown-item @click.native="modifyMailbox">
                <span @mouseover="mouseOverSecond" @mouseleave="mouseLeaveSecond"
                  >修改邮箱</span
                >
              </el-dropdown-item>
              <el-dropdown-item @click.native="logout">
                <span @mouseover="mouseOverThird" @mouseleave="mouseLeaveThird"
                  >退出登录</span
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
    

    在这里插入图片描述
    这样我们就可以看到,DOM已经在#app里面了,这样就可以进行修改样式了

    还有一个需要注意的的地方

    我这边要求鼠标移入变色,同时icon小图标也要一起变色,如果是小图标的话,我们可以直接改变color就行,如果是图片的话,这样我们就需要加上鼠标移入移出事件。

    问题就在这,移入移出事件如果直接绑定在el-dropdown-item上就不生效,就必须放在el-dropdown-item里面的子组件上才能生效。

    关键代码在上面,可以对照着看一下。

    展开全文
  • 1、el-dropdown下拉菜单中添加点击事件@click无效 2、需要添加@click.native <el-dropdown trigger="click"> <span class="el-dropdown-link" style="color:white">分类<i class="el-icon-arrow-...

    1、el-dropdown下拉菜单中添加点击事件@click无效

    2、需要添加@click.native

    <el-dropdown trigger="click">
                      <span class="el-dropdown-link" style="color:white">分类<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="toEntertainment">明星娱乐</el-dropdown-item>
                      <el-dropdown-item @click.native="toStudy">学习教育</el-dropdown-item>
                      <el-dropdown-item>兼职</el-dropdown-item>
                      <el-dropdown-item>计算机</el-dropdown-item>
                    </el-dropdown-menu>
    </el-dropdown>

    解释:

    关于vue中@click.native

    作用:[给组件绑定原生事件]

    展开全文
  • 如何给el-dropdown-item 绑定一个事件 或 多个事件,并禁用 @click.native=" 事件名 " 禁用 disabled // An highlighted block <el-dropdown-item :disabled="true" command="a" @click.native=...

    如何给el-dropdown-item 绑定一个事件 或 多个事件,并禁用

    @click.native=" 事件名 "

    禁用 disabled

    // An highlighted block
     <el-dropdown-item :disabled="true" command="a" @click.native="dialogFormVisible = true ; dialogForm()">财务审核</el-dropdown-item>
    
    
    绑定多个事件 直接 ; fun() 在后面写 事件即可
                 <el-dropdown-item disabled >设置</el-dropdown-item>
    
    展开全文
  • 直接在el-dropdown-item上添加click事件,点击后没有任何反应 在click后...代码如下 在给Vue组件(el-dropdown-item就是一个组件)绑定事件的时候,必须加上navtive修饰符才能生效,navtive可以监听根元素的原生事件
  • el-dropdown事件绑定

    千次阅读 2019-01-22 16:26:06
    el-dropdown class="filter-select" @command="handleCompanyChange" trigger="click"&gt; &lt;span class="el-dropdown-link font-bold"&gt; {{company}}&...
  • 动态表头 el-table el-dropdown el-checkbox
  • 若直接在el-dropdown-item上添加click事件,点击后没有任何反应。 在click后添加native修饰符,则可解决问题。代码如下: <el-dropdown> <span class="user"></span> <el-dropdown-menu ...
  • el-dropdown绑定click点击事件不生效和样式修改 我们在开发项目的时候会用到el-dropdown,这个功能一般都会在用户上进行使用 比如: 修改密码,退出的情况下 绑定点击事件 组件直接绑定点击事件是不生效的,需要...
  • Vue-elementui 下拉框(el-dropdown绑定点击事件

    万次阅读 多人点赞 2018-09-06 10:09:15
    ElementUI组件下拉框绑定点击事件无效的解决方案 在使用脚手架构建的项目中需要使用到下拉组建 &lt;el-dropdown&gt; &lt;span class="el-dropdown-link" ref="echarType"&...
  • el-dropdown-item的点击事件

    千次阅读 2020-11-06 20:56:57
    el-dropdown-item的点击事件 <el-dropdown> <span class="user"></span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="changePassword">修改密码</el...
  • 1. 由于jsx不支持.natuve,而在el-dropdown-item绑定事件需要.native 2.jsx语法提供了nativeOnClick事件绑定点击事件
  • 使用vue element-ui 中的 导航 发现 el-dropdown-menu 绑定click事件不起作用 <el-dropdown> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item, index) in deivceList" :key="index" @click=...
  • Vue-elementUI 表格里动态添加行操作按钮,...一、直接给el-dropdown-item 绑定点击事件。这里需要用 @click.native=" name" 这样绑定才会有效。 <el-table :data=“orderAcceptTableData” stripe border hei...
  • 记录篇 直接用@click是不生效的 也没有报错 <el-dropdown> <span>玲玲</span> ...el-dropdown-menu slot="dropdown">...el-dropdown-item>个人中心</el-dropdown-item> <el-dropd...
  • 看了下拉菜单的文档 确实没有click事件说明(不想用文档上的方法) 但使用click又不生效 最后在segmentfault找到了答案 将@click改为@click.native即可 当你给一个vue组件绑定事件时候,要加上native!如果是普通的...
  • 组件直接绑定点击事件@click无效是不生效的, 需要添加@click.native进行绑定点击事件。 <el-dropdown trigger="click"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down ...
  • el-dropdown-item上添加@click事件,点击后没有任何反应。若在@click后添加native修饰符,则可解决问。 <el-dropdown :hide-on-click="false"> <span class="el-dropdown-link"> <h4 style=...
  • 在学习vue使用element组件的时候经常会用到Dropdown 下拉菜单,对于点击el-dropdown-item事件触发跳转@click="logout()"是不行的,给一个vue组件绑定事件时候,要加上native。 <el-dropdown-item divided="true...
  • ElementUI中的el-dropdown传入多参数

    千次阅读 2021-12-13 13:53:32
    最近工作中因为业务中按钮的增多,导致页面排版按钮过多,页面不够美观,用户体验不佳,于是想到利用el-dropdown做一个下拉按钮(把多个按钮整合到了一起,下拉实现) 但是ElementUi官方文档中的handleCommand方法...
  • vue中使用el-dropdown

    2022-04-15 19:12:12
    <el-dropdown @command=" (command) => { handleCommand(command, scope.$index, scope.row); } " > <el-link type="primary" :underline="false" style="...
  • vue element-ui框架 el-dropdown-menu 绑定click事件

    万次阅读 多人点赞 2018-05-26 10:30:41
    使用vue element-ui 中的 导航 发现 el-dropdown-menu 绑定click事件不起作用 &lt;el-dropdown&gt; &lt;i class="el-icon-setting" style="margin-right: 15px"&gt;&lt;/...
  • <!--:append-to-body="false"--> <el-dropdown v-if="editEnable" > <el-button icon="el-icon-plus"></el-button>...el-dropdown-menu slot...el-dropdown-item>新增子分类</el-dropdown-
  • <el-dropdown-item @click.native="handleUpload">上传文件</el-dropdown-item> <el-dropdown-item @click.native="handleUploads">上传文件夹</el-dropdown-item> </el-dropdown-menu> </el-dropdown> js: // ...
  • Element:改变原生 el-dropdown 的样式

    千次阅读 2021-07-13 09:31:19
    在用 el-dropdown 的时候,不知道为什么一个页面中的某个 dropdown 的间距过大,其他的都很正常,所以需要 调整许多 el-dropdown 中一个的样式。 但 ElementUI 会有自己的样式,他绑定的 id 会动态变化,每个 el ...
  • el-dropdown> <el-button> <svg-icon icon-class="filter" class-name="icon-svg" /> <span>筛选</span> <i class="el-icon-arrow-down el-icon--right" /> </el-...
  • el-dropdown用法

    2021-04-27 17:00:12
    <el-dropdown @command="handleCommand"> <!-- 绑定指令,在methods里定义--> <h1 class="el-dropdown-link exit"> {{username}} <i class="el-icon-caret-bottom el-

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 732
精华内容 292
热门标签
关键字:

el-dropdown-item绑定事件