10_element-plusUI组件库

一、reset样式文件

在main.js中导入reset.css:import '@/style/reset.css'

/* @/style/reset.css */
*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
  width:100%;
  font-size:14px;
}
#app{
  width:100%;
  height:100%;
  background-color: #ecf5ff;
  overflow: hidden;
}

二、消息提示

ElMessage({
  message: '提示信息',
  type: '颜色类型',
})

三、表单组件

<template>
  <el-form :model='表单中要绑定的数据' :rules='校验表单的规则' ref='用户获取form的dom节点'>
    <el-form-item prop='要校验的属性名'>
      <el-input v-model='文本框要绑定的数据'></el-input>
    </el-form-item>
    <el-form-item prop='要校验的属性名'>
      <el-button @click='loginHandler("form的dom节点")'>Login</el-button>
    </el-form-item>
  <el-form>
</template>
<script>
  const loginHandler = async (dom)=>{
    await dom.validate((flag)=>{
      console.log('是否校验通过的布尔值',flag)
    })
  }
</script>

四、container组件

• el-container 外层容器
• el-header 顶部
• el-aside 侧边栏
• el-main 主要内容
• el-footer 底部

五、菜单组件

• el-menu 外层组件
  • router 点击菜单会根据index跳转路由
  • default-active 默认激活的菜单
• el-sub-menu 有子菜单的
  • index 唯一的
• el-menu-item 没有子菜单的
  • index 唯一的