【Vue项目总结】基于饿了么组件封装

YPHP 发布于2019-08-23 18:23 / 2043人阅读

摘要：项目中，组件是项目的基石，每个页面都是组件来组装起来，我司没有自己的组件库，选用的是组件库，在它的基础上再次封装。部分代码三级效果如下总结组件是项目的积木条，公用组件的封装成功与否其实是对项目的开发效率有直接影响。

vue项目中，组件是项目的基石，每个页面都是组件来组装起来，我司没有自己的组件库，选用的是ElementUI组件库，在它的基础上再次封装。

可编辑表格

由于是后台管理项目，各种单据漫天飞，而且单据列表要可编辑，可验证，基于业务封装了可编辑表格组件

业务需求：

每列可以编辑

每列输入的值需要被验证

每列可编辑，则需要每列的字段需要一个可编辑的属性edit来确定是否可以编辑，输入的值可以被验证，需要我们传入验证规则。

确认需要传入的props

props: {
  // 表格数据
  tableData: {
    type: Array,
    default: () => []
  },
  // 需要验证的列字段
  columns: {
    type: Array,
    default: () => []
  },
  // 是否可编辑
  defaultEdit: {
    type: Boolean,
    default: true
  },
  // 验证集合
  verifyRules: {
    type: Object,
    default: () => {}
  }
}

表格传入数据后，初始化可编辑状态

阅读el-table源码，可以看到，表格组件拥有自己的store，一些需要通信的状态都是它来维护的，我们也可创建一个自有的table-store.js来维护编辑状态

// 初始化数据
this.store = new TableStore({
  list: this.tableData,
  columns: this.columns,
  defaultEdit: this.defaultEdit
});

可编辑列edit-table-cell

利用slot插槽来传递编辑状态和验证规则


...
computed: {
  isInput() {
    return this.slotName === "input";
  },
  rowState() {
    const states = this.editTable.store.states;
    const rowState = states.get(this.row);
    return rowState;
  },
  cellState() {
    const cellState = this.rowState.get(this.prop);
    return cellState;
  }
},
methods: {
  // 验证
  validateCell(cb) {
    this.editTable
      .verifyTableCell(this.row, this.prop, this.cellState)
      .then(errMsg => {
        const valid = !errMsg;
        typeof cb === "function" && cb(valid);
      });
  }
}

使用组件

// edit-table.vue


  
    
      
    
    
      
    
....

效果如下

具体代码可查看组件

增删改的树组件

el-tree树形组件其实已经支持了自定义节点内容，但是我们要在它的基础上改变节点内容，这里主要是运用了Vue.set向响应式对象中添加一个属性。

// 部分代码
append(node, data) {
  const { label } = this.configProps;
  const newChild = {
    id: id++,
    [label]: `三级-${id}`,
    children: [],
    isEdit: false
  };
  if (!data.children) {
    this.$set(data, "children", []);
  }
  data.children.push(newChild);
  this.$emit("addNode", node, data);
},
edit(node, data) {
  if (!node.isEdit) {
    this.$set(node, "isEdit", true);
  }
  this.$nextTick(() => {
    this.$refs[`treeInput${node.id}`].focus();
  });
  this.$emit("editNode", node, data);
}

效果如下：

总结

组件是项目的积木条，公用组件的封装成功与否其实是对项目的开发效率有直接影响。具体代码可查看vue-template，基于vue-cli3.0搭建的后台模版。

webpack常规打包优化方案

组件通信处理方案

后台管理项目总结

项目部署

参考：

ElTable

el-table-editabled

专线服务服务器托管饿了么饿了么 js 饿了么配送调度饿了么api接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105141.html

【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0
vue2 + vuex 高度还原 饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购

摘要：注此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。目前下单功能已经实现，下单功能完全采用官网真实数据，可以控制官网发短信或者打电话到指定的手机号码，下单后可以在手机中查看并且付款。前言 vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余...

JeOam 2019-08-20 14:26 评论0 收藏0
小试 Element UI

摘要：原因如下影响使用的小有点多需要重新学习一门语言接下来详述。基于标准化技术，可以最大限度的避免浪费。会广播特定的事件，这些事件无法被捕获，只能在的钩子里手工绑定。左右看了看，准备先试下。希望你们再接再厉，相信将来这套库会更好。不确定写多长，写先结论吧：暂时不推荐使用。原因如下：影响使用的小 Bug 有点多需要重新学习一门语言接下来详述。从前司离职之后，我开始更新技术栈。离...

stackfing 2019-08-20 15:24 评论0 收藏0