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