element-ui大总结

本文主要总结了Element-UI的四大核心用法:slot、Attribute、method和event,旨在提供一个快速查阅的指南。虽然初次接触可能会感到内容繁多,但通过实践和理解组件背后的思维原理,将能更熟练地运用Element-UI。
摘要由CSDN通过智能技术生成

element-ui 使用方法主要有4大块,slot ,属性, method和event。刚开始看这个不久,乍一看感觉有很多东西要记住使用。这个就当是做个主题阅读,知道基本的使用规则,快速索引。真正的熟练还是要在项目中多多练习才行,更重要的是有时间的时候,自己造出这些组建,了解后面的思维原理。

slot

<div style="width:800px;">
        <h1 class="mb20">slot</h1>
        <p>1.input slots</p>
        <el-input v-model="input22" placeholder="input prefix 效果">
          <!-- slot :prefix  suffix prepend append  只对type=text 有效-->
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-button type="primary" slot="prepend">prepend 前置</el-button>
          <el-button type="primary" slot="append">append 后置</el-button>
        </el-input>
        <p>2. Alert slot</p>
        <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
          <p slot>辅助性文字。同属性description</p>
        </el-alert>
        <p>3.Dropdown Slots
          <br>通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单.
        </p>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-button type="primary">
              下拉菜单
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </span>
          <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-menu>
        </el-dropdown>
        <p @click="centerDialogVisible = true">4. dialog Slot
          <!--  匿名  title footer -->
        </p>
        <el-dialog :visible="centerDialogVisible" :app
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值