element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。
提示:以下是本篇文章正文内容,下面案例可供参考
Element,基于 Vue 2.0 的桌面端组件库,网站快速成型工具 和 桌面端组件库
element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。
‘饿了么前端团队 基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件。’
vue init webpack element
# 1.下载elementui的依赖
npm i element-ui -D
# 2.指定当前项目中使用elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//在vue脚手架中使用elementui
Vue.use(ElementUI);
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
总结:日后使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头
<el-button>默认</el-button>
<el-button type="primary" 属性名=属性值>默认按钮</el-button>
<el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>
<el-link>默认链接</el-link>
<el-link target="_blank" href="http://www.baidu.com" >默认链接</el-link>
<el-link type="primary":underline="false">默认链接</el-link>
<el-link type="success" disabled>默认链接</el-link>
<el-link type="info" icon="el-icon-platform-eleme">默认链接</el-link>
<el-link type="warning">默认链接</el-link>
<el-link type="danger">默认链接</el-link>
通过基础的 24 分栏,迅速简便地创建布局
在element ui中布局组件将页面划分为多个行row,每行最多分为24栏(列)
<el-row>
<el-col :span="8">占用8份</el-col>
<el-col :span="8">占用8份</el-col>
<el-col :span="8">占用8份</el-col>
</el-row>
注意:
<el-container>
</el-container>
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。
<!--创建容器-->
<el-container>
<!--header-->
<el-header><div><h1>我是标题</h1></div></el-header>
<!--容器嵌套使用-->
<el-container>
<!--aside-->
<el-aside><div><h1>我是菜单</h1></div></el-aside>
<!--main-->
<el-main><div><h1>我是中心内容</h1></div></el-main>
</el-container>
<el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>
创建Radio按钮
<!--组件创建-->
<el-radio v-model="label" label="猫">猫</el-radio>
<el-radio v-model="label" label="狗">狗</el-radio>
<script>
export default {
name: "Radio",
data(){
return{
label:'猫'
}
}
}
</script>
.Radio按钮属性的使用
<el-radio v-model="label" name="sex" disabled label="男">男</el-radio>
<el-radio v-model="label" name="sex" border size="small" label="女">女</el-radio>
<el-radio v-model="label" border size="mini" label="女">女</el-radio>
<el-radio v-model="label" border size="medium" label="女">女</el-radio>
Radio事件的使用
<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
<el-radio v-model="label" @change="aa" name="sex" border size="small" label="女">女</el-radio>
<script>
export default {
name: "Radio",
data(){
return{
label:'男'
}
},
methods:{
aa(){
//定义的事件处理函数
console.log(this.label);
}
}
}
</script>
4.radio按钮组
<el-radio-group v-model="radio">
<el-radio :label="3">备选项3</el-radio>
<el-radio :label="6">备选项6</el-radio>
<el-radio :label="9">备选项9</el-radio>
</el-radio-group>
<script>
export default {
name: "Radio",
data() {
return {
radio: 6
}
}
}
</script>