Element-ui 基本使用
一般组件使用
element-ui的基本使用还是十分简单的,首先根据文档的步骤进行安装,导入需要的样式即可,这一块直接看文档就已经说明的很清楚了:文档链接。接着,你只需要找到你想要的样式,然后点开详细代码,复制到你的.vue文件里那么就可以了,例如直接复制官方提供的radio组件(链接)的第一个代码:
<template>
<div>
<!-- 因为template里面只能有一个根元素,官方这里拷过来以后在外面加了一层div标签包起来 -->
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</div>
</template>
<script>
export default {
data() {
return {
radio: "1"
};
}
};
</script>
可以看出element-ui的上手使用还是挺容易的,在理想情况下,只需要以下步骤:
- 找想要的样式组件
- 复制代码到对应的.vue文件
- 修改对应的数据
- 非组件样式使用
官方提供的样式中有一部分并非是组件样式,比如:字体图标、全局指令、全局事件等,这里简单说明下这类样式的使用方法
图标样式使用
官方提供了很多图标样式(链接),通过阅读文档可以发现:一般情况下,使用i标签,并将class属性设置成对应的图标名即可;而对于别的组件希望引入图标时(有icon属性的组件,例如el-button),设置icon属性为对应的图标名即可
指令样式使用
例如Loading加载(链接),其提供的是一个指令v-loading,而非一个组件,那么使用也很简单,因为已经注册了全局组件,直接调用就行了,举例:
<template>
<div>
<div v-loading="isLoading">这块内容使用v-loading指令,true时loading</div>
<el-button @click=handle>{
{
clickText}}</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isLoading