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可修改为可选值的
  • 注意类型
  • 如 单选框 数据绑定和禁用

    <!-- flag radio都是data中定义的变量分别控制 是否禁用、双向绑定的值 -->
    <!-- size 类型是字符串，可选值有 （medium / small / mini	），此处使用常规尺寸，设置size为字符串medium -->
       <el-radio v-model="radio" label="1" :disabled="flag" :size="'medium'">备选项</el-radio>
    

• Events

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

   <el-radio v-model="radio" label="1"  @change="handleChange">备选项</el-radio>
   <!-- 此处省略页面代码 -->
   <!-- 回调参数接受：**选中的 Radio label 值** -->
   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 对话框 组需要 自定义底部 确认 取消按钮

  <!-- 这里的 footer就是要替换的部分，通过自定义样式内容展示具体业务页面 -->
    <el-dialog
     title="提示"
     :visible.sync="dialogVisible"
     width="30%"
     :before-close="handleClose">
     <span>这是一段信息</span>
     <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
     </span>
     </el-dialog>
  

• Methods

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

       <el-drawer
         title="我是标题"
         :visible.sync="drawer"
         :with-header="false"
         ref="drawer">
         <span>我来啦!</span>
      </el-drawer>
      <!--此处省略页面代码-->
      closeDrawer(){
         this.$refs.drawer.closeDrawer()
      }