ElementUi的使用

ElementUi使用说明

• element ui安装与配置

  1. npm i element-ui –S
  2. 项目入口文件main.js 导入 Element-UI 相关资源

     // 导入组件库
     import ElementUI from 'element-ui';
     // 导入组件相关样式
     import 'element-ui/lib/theme-chalk/index.css';
     // 配置 Vue 插件
     Vue.use(ElementUI);
     

• 文档使用说明

  • 访问网址：https://element.eleme.cn/#/zh-CN/
  • 切换到菜单 组件
  • 设置国际化 (main.js文件)

    import ElementUI from 'element-ui'
    import locale from 'element-ui/lib/locale/lang/en'
    // import locale from 'element-ui/lib/locale/lang/zh'
    Vue.use(ElementUI, { locale })
    

• 自定义主题

  • 根据设计稿配色原则，明确 主题色、成功、失败、警告、按钮色等，在 https://element.eleme.cn/#/zh-CN/theme 设置对应的颜色，然后下载。
  • 将下载后的 style文件解压出来，将 theme文件夹 剪切到 src/assets里
  • 在 main.js中引入

• 过渡动画

  • 通过设置 transition 的name属性，设置dom需要的动画

       <transition name="el-fade-in-linear">
       <div v-show="show" class="transition-box">.el-fade-in-linear</div>
       </transition>
    

• 组件的使用

• 修改组件原有样式

  1. 优先查看 组件属性 说明文档，如果有修改属性，直接通过 v-bind方式修改
  2. 通过F12查找到要修改dom元素的 style链
  3. 在vue文件style中 通过 穿透修改

        ::v-deep .el-radio-button--small .el-radio-button__inner{
           padding: 5px 10px;
        }
     

• 组件文档解读

• Attributes

  • 属性可修改，有默认值，通过v-bind可修改为可选值的
  • 注意类型
  • 如 单选框 数据绑定和禁用

    
    
       备选项
    

• Events

  • 通过 说明 ，绑定组件需要的事件
  • 事件，由@+事件名称,赋值给一个自定义事件，在method中实现
  • 自定义事件会拿到 回调参数,直接使用
  • 如 单选框中 change事件

   备选项
   
   
   handleChange(label){
     console.log(label); // '1'
   }
  

• Options

  • 这个是配置项，一般在js代码中调用 组件的使用
  • 如 调用 Loading 加载组件

    // text 、lock、spinner、background作为 loading对象的配置项，根据业务需求选择是否使用，
    // 根据 ** 说明** **类型** **可选值** 传对应的值
   openFullScreen() {
      const loading = this.$loading({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
         loading.close();
      }, 2000);
   }
  

• Slot

  • element ui组件的slot同我们自己写的组件slot一样，都是起到占位、替换的作用
  • ui组件有自己默认的一套dom结构，也就是占位
  • 如果需要 替换掉，直接 通过slot实现
  • 如 Dialog 对话框 组需要 自定义底部 确认 取消按钮

  
    
     这是一段信息
     
        取 消
        确 定
     
     
  

• Methods

  • 这里定义的方法，相当于引用子组件里面的method，一般通过 ref实现
  • 如 需要关闭 Drawer 抽屉

       
         我来啦!
      
      
      closeDrawer(){
         this.$refs.drawer.closeDrawer()
      }