vue+elementui dropdown 下拉菜单绑定方法

方法一:给el-dropdown根组件监听command ,再el-dropdown-item 绑定commandshuxing值。 methods内详细写监听对应的方法

handleCommand(command) {

if(command == ‘loginOut‘){

this.$confirm(‘are you sure loginOut?‘, ‘提示‘, {

confirmButtonText: ‘确定‘,

cancelButtonText: ‘取消‘,

type: ‘warning‘

}).then(() => {

this.$message({

type: ‘success‘,

message: ‘loginOut成功!‘

});

}).catch(() => {

this.$message({

type: ‘info‘,

message: ‘已取消loginOut‘

});

});

}

// else if(command == ‘resetPwd‘){

// this.$alert(

// `<input

// placeholder="输入名字搜索"/>`,

// ‘notice‘,

// {

// dangerouslyUseHTMLString: true,

// showClose:true,

// callback: action => {

// this.$message({

// type: ‘info‘,

// message: `action: ${ action }`

// })

// },

// }

// )

// }

},

缺点:如果在处理事件内需要弹出表单元素,则只能使用原生html,无法使用dialog。

方法二:给el-dropdown-item 绑定点击事件。但是无效果,需要用 @click.native=" name"  这样绑定才会有效。

resetPassword:function(){

this.dialogFormVisible = true

console.log("重置密码")

}

原文地址:https://www.cnblogs.com/tuhazi/p/10394527.html

时间: 2024-10-01 05:29:31

vue+elementui dropdown 下拉菜单绑定方法的相关文章

Rails Bootstrap dropdown下拉菜单没反应解决方法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { } Mac环境 Rails 5.1.4 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { }

Bootstrap历练实例:下拉菜单插件方法的使用

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:下拉菜单插件方法的使用</title> <meta charset="utf-8" /> <meta name="v

巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图 正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其

AngularJS ng-options下拉菜单绑定数值

这两天做了一个页面,结构比较简单,最上方有两个下拉菜单,选择后点击确定,浏览器会通过AJAX获取数据并在下方生成表格. 因为刚接触AngularJS,最近经常性地陷入某些"陷阱"中 = = 这次遇到的一个问题是,当我写成形如以下格式的时候: select option(ng-repeat="item in itemList" ng-model="choosenItem" value="{{item}}") {{item}} 可

yii实现级联下拉菜单的方法

1.模版中加入如下代码: ? 1 2 3 4 5 6 7 8 <?php  echo $form->dropDownList($model, 'src_type_id', OrderSrc::options(), array(  <span style="white-space:pre"> </span>'id' => 'task-order-src-id',  ));  echo $form->dropDownList($model,

为joomla加入?下拉菜单的方法

用 Joomla! 建站的大多数站长都须要在站点前台使用下拉菜单(dropdown menu),或者叫弹出菜单(slide menu),由于这样能够在有限的页面空间上公布很多其它的导航菜单,而且能够进行分组,方便訪客迅速找到所需信息.因此,我们也注意到了,差点儿每一款收费模板(commercial template)都提供了下拉菜单功能.假设你使用 Joomla! 1.5 核心自带的 rhuk_milkyway 模板,就会发现这个模板却没有提供下拉菜单功能.那么,是否能用 Joomla 核心自带

【网摘】C#.NET 在 MVC 中动态绑定下拉菜单的方法

1. 已知下拉菜单列表项: 在 Controller 控制器类中输入已下代码  1 public class DemoController : Controller 2 { 3     public ActionResult BindDropDownList() 4     { 5         List<SelectListItem> select1 = new List<SelectListItem> 6         { 7             new SelectL

为joomla加入下拉菜单的方法

用 Joomla! 建站的大多数站长都须要在站点前台使用下拉菜单(dropdown menu),或者叫弹出菜单(slide menu),由于这样能够在有限的页面空间上公布很多其它的导航菜单,而且能够进行分组,方便訪客迅速找到所需信息.因此,我们也注意到了,差点儿每一款收费模板(commercial template)都提供了下拉菜单功能.假设你使用 Joomla! 1.5 核心自带的 rhuk_milkyway 模板,就会发现这个模板却没有提供下拉菜单功能.那么,是否能用 Joomla 核心自带

jquery:提取亚马逊网站的dropdown下拉菜单

上面是亚马逊网站的下拉导航菜单,类似于天猫和京东商城.精心开发5年的UI前端框架! 鼠标移上去的效果反应非常迅速,事实上做过这种效果的人都应该知道,一般要做到如此快速的效果,当你从左侧移到右侧的时候是会出问题的.大多数dropdown菜单在鼠标移到菜单项并显示子菜单的时候,都会有一定的延迟效果,下面是old Khan Academy网站的一个例子: 看到那延迟效果了没?其实你是需要这个延迟的,不管是代码上还是审美上,如果没有这个延迟,你从主菜单移到子菜单的瞬间,子菜单会消失掉.这会让用户觉得心里