Element UI

  • npm i element-ui -S
  1. /**
  2.  *  src/main.js
  3.  */
  5. //  Element UI 
  6. import ElementUI from 'element-ui';
  7. import 'element-ui/lib/theme-chalk/index.css';
  9. Vue.use(ElementUI); // 全局使用

导航守卫

  • 全局守卫
  • 路由守卫
  • 组件守卫
  1. // 组件守卫
  2.     beforeRouteEnter(to, from, next) {
  3.         // to 表示要去的路径  from表示离开时的路径
  5.         console.log(to, from, next);
  6.         // 在渲染该组件的对应路由被 confirm 前调用
  7.         // 因为当守卫执行前，组件实例还没被创建
  8.         // 不能访问组件 this
  9.         // 访问方式 ：
  10.         next(vm => {
  11.             // 通过 vm 访问组件实例
  12.             console.log(vm);
  13.         });
  14.     },
  15.     beforeRouteUpdate(to, from, next) {
  16.         // 在当前路由改变，但是该组件被复用时调用
  17.         // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  18.         // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  19.         // 可以访问组件实例 `this`
  20.     },
  21.     beforeRouteLeave(to, from, next) {
  22.         // 导航离开该组件的对应路由时调用
  23.         // 可以访问组件实例 `this`
  25.         // 如果没有填写内容并且没有提交
  26.         if (!this.ruleForm.username && !this.flag) {
  27.             this.$confirm('是否提交', '提示', {
  28.                 confirmButtonText: '确定',
  29.                 cancelButtonText: '取消',
  30.                 type: 'warning',
  31.             })
  32.             .then(() => {
  33.                next();
  34.             })
  35.             .catch(() => {  });
  36.         }else {
  37.             next()
  38.         }
  39.     },

Vue 仿写 Element UI 弹层

  1. /**
  2.  *  App.vue
  3.  */
  5. // import Message from './Components/Message.js';// 弹窗第一种方式
  6. // export default {
  7. //     methods: {
  8. //         showMessage() {
  9. //             Message.info({
  10. //                 message: '你好',
  11. //                 duration: 2000,
  12. //             })
  13. //         }
  14. //     }
  15. // }
  16. import Vue from 'vue';
  17. import { Message } from './Components/Message.js'; // 弹窗第二种方式, 暴露全局
  18. Vue.use(Message); // install 
  19. export default {
  20.     methods: {
  21.         showMessage() {
  22.             this.$message.info({
  23.                 message: '你好',
  24.                 duration: 2000,
  25.             })
  26.         }
  27.     }
  28. }
  31. /**
  32.  * 组件的核心逻辑,渲染 message 组件 并且调用核心方法
  33.  *  message.js
  34.  */
  36. import Vue from 'vue';
  37. import MessagePopup from './MessagePopup.vue';
  40. **重点技巧知识**
  42. let getInstance = () => {
  43.     let vm = new Vue({
  44.         render: h => h(MessagePopup),
  45.     });
  46.     vm.$mount(); // 没有传参数的时候，挂载在内存中,还没有挂载到 dom 元素
  47.     // 通过 vm.$el 获取 然后挂载到根实例 此时 Message 组件 就是 vm 实例的子组件
  48.     document.body.appendChild(vm.$el);
  49.     //  拿取子组件上的核心方法  $parent $children（获取所有的子组件）
  50.     let component = vm.$children[0];
  51.     return {
  52.         add: options => {
  53.             component.add(options); //add 再次封装
  54.         },
  55.     };
  56. };
  58. **重点技巧知识**
  59. // 单例模式解决 多次初始化 vue 的问题
  60. let instance;
  61. let getIns = () => {
  62.     //判断  instance 有无值，有值 说明 vue 已经初始化过了
  63.     instance = instance || getInstance();
  64.     return instance;
  65. };
  68. const Message = {
  69.     info(options) {
  70.         getIns().add(options);
  71.     },
  72.     success() {},
  73. };
  74. //  export default Message;
  78. // 使用 vue.use 会调用 install 方法
  80.    Message.install = (Vue)=> {
  81.     //    alert(1)
  82.         // Message 的方法 放入 $message 中
  83.         let $message = {}
  84.         Object.keys(Message).forEach(key=>{
  85.             $message[key] = Message[key]
  86.         })
  88.         // 把 $message 放入 Vue 原型上
  89.         // console.log($message);
  90.         Vue.prototype.$message = $message;
  91.     }
  93. //  第二种方式导出
  94. export { Message };

基于 Element UI 封装树形控件

  • 树形菜单的接口
  • 通过axios调用接口
  • 格式化数据
  • 自定义树形组件
  • 扩展操作的列表
  • 点击切换输入框
  • 确认修改
  • 删除文件或文件夹

以上更新于 2020 年 1 月 4 日