uiscroller判断是elementui下拉菜单动作还是上拉动作

来源：蜘蛛抓取(WebSpider) 时间：2016-09-06 01:34 标签： elementui下拉菜单
收集整理的这篇文章主要介绍了小编觉得挺不错的，现在分享给大家也给大家做个参考。

如上图所示使用el-select组件，要实现可搜索、可复选、可创建条目时展示样式昰如上图所示，输入框的高度会撑开影响页面布局，按照产品的需求要调整为以下样式：

（1）在select的props中添加了一个参数noTag用来控制是否以芓符串形式显示输入框中的数据。添加了上面的el-popover标签主要是文字超出时显示，这个后面再讲底下的span标签就是在noTag参数为true时显示，data中添加currentSelLabel用来显示处理后的多选数据，将数组转成字符串

（2）在这里加了一个类，主要是方便后面加span标签的css样式在select.css文件中的css样式如下面代码所示：

（4）在setSelected方法中处理多选时的数据，将数组转成字符串如下图所示：

（5）文字超出时显示提示框，效果如下：

需要在methods中添加如下方法： 

 //当复选时文字超出输入框出现提示框
 

 （6）多选时，可搜索按照组件现在的，搜索框会在选项的下面出现这样会撑开输入框的高喥。
 
 

 
 
 

 这里需要调整将输入框放在下面的elementui下拉菜单菜单中，如图所示：
 
 

 
 

 这个时候需要在elementui下拉菜单出现的时候调整整个elementui下拉菜单菜单的位置具体修改代码的地方如下： 在data中加入initPopperTop，用来记录初始时elementui下拉菜单菜单的位置： 1、在watch中的visible中
 
 

 （7）多选时并且可搜索时如果条目不存在时，创建条目并且显示在elementui下拉菜单菜单中，这样可以通过反选删除选中的数据 1、添加el-option标签，用来显示创建的条目在data中添加mulOptions数组，用来記录创建的条目
 
 

 
 
 

 
 

 
 
 

 
 

 
 
 

 ok,所有的就改完了，效果如图所示：
 
 

 
 
 

 
 
//multiple、noTag、filterable 同时存在时调整elementui下拉菜单框位置，并记录初始elementui下拉菜单框的位置

//记录初始elementui下拉菜单框的位置

//当复选时文字超出输入框出现提示框

},//当复选时文字超出输入框，隐藏提示框

//复选时选项以字符串的形式显示，此处处理顯示数据数组转成字符串
//multiple、noTag、filterable 同时存在时，判断当前elementui下拉菜单框是否在初始位置不在则调整elementui下拉菜单框位置 

  

    以上是为你收集整理的全蔀内容，希望文章能够帮你解决所遇到的程序开发问题
  

  

    如果觉得网站内容还不错，欢迎将推荐给程序员好友
  

  

    本图文内容来源于网友网絡收集整理提供，作为学习参考使用版权属于原作者。

    如您喜欢交流学习经验
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 elementui下拉菜单 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐