美文网首页
element使用方法

element使用方法

作者: ryanxun | 来源:发表于2019-03-07 20:49 被阅读0次

首先引入


<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
因为是基于Vue所以还需要Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

然后找到自己需要的控件例如:

//首先在上面引入原生css
<style>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
//这里是需要的控件
<el-dropdown>
  <el-button type="primary">
    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item>双皮奶</el-dropdown-item>
    <el-dropdown-item>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
  更多菜单
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item>双皮奶</el-dropdown-item>
    <el-dropdown-item>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

//这里因为是基于Vue,所以需要引
new Vue({
  el:"(当前的id或者class)",
 methods: {
      handleClick() {
        alert('button click');
      }
    }
})

相关文章

网友评论

      本文标题:element使用方法

      本文链接:https://www.haomeiwen.com/subject/dnahpqtx.html