elementUi 隐藏组件指令

1,201 阅读1分钟

1、点击标签外触发事件

当我们需要点击标签外触发事件可以使用v-clickoutside指令

首先引入

import Clickoutside from 'element-ui/src/utils/clickoutside';

然后在data里面添加指令

data:{
  directives: { Clickoutside },
},
methods: {
  clickOut(){
    console.log("点击了标签外面哦~")
  }
}

使用

<div class="slogan" v-clickoutside="clickOut">欢迎使用</div>

2、滚动条

elementui内置了滚动条组件scrollbar

直接在页面使用就 可以了

<el-scrollbar
  tag="ul"
  wrap-class="el-autocomplete-suggestion__wrap"
  view-class="el-autocomplete-suggestion__list">
  <li><i class="el-icon-loading">选项1</i></li>
  <li><i class="el-icon-loading">选项2</i></li>
  <li><i class="el-icon-loading">选项3</i></li>
</el-scrollbar>

组件属性:

wrapClass 可选参数,容器的样式名 string

viewClass 可选参数,展示视图的样式名 string

wrapStyle 可选参数,容器的样式 string

viewStyle 可选参数,展示视图的样式 string

native 可选参数,是否使用原生滚动 boolean false

noresize 可选参数,容器大小是否是不可变的 boolean false

tag 可选参数,渲染容器的标签 string div