前言

周饼伦在街头摊煎饼，摊后人群熙熙攘攘。他忙得不可开交，既要记住面前小哥要加的培根，又要记住身后奶奶要加的生菜，这时又来了个小妹妹，点的煎饼既要培根又要腊肠。他把鸡蛋打进煎饼后，竟突然忘了前面光头大叔要加的料，是火腿还是鸡柳？一时记不清，好像是火腿，对。然而当把煎饼交给大叔，大叔却怒了，说要的是鸡柳。😡

这可咋办？周饼伦赶忙道歉，大叔却语重心长地说：“试试用小程序云开发吧！最近的数据模型新功能好用得很！” 周饼伦亮出祖传手艺，边摊煎饼边开发小程序，把新开发的小程序点餐页面二维码贴在摊前。从此再没出过错，终于能安心摊煎饼啦！

设计思路

客户扫摊子上面贴的二维码后，会进入点餐页面，在选好要加的配料之后，点击确定就可以点餐，随后，即可在云后台上看到食客提交的数据

实现过程

周饼伦就把当前摊位的主食、配菜，以及各自相应的价格贴在了摊位上，也要把食客的点餐内容记在脑里或者用笔写在纸上。

点餐页要实现两个功能：1.展示当前摊位有的主食、配菜、口味 2.提交订单到周饼伦的订单页面。

煎饼摊子主食（staple food）目前只有摊饼、青菜饼，主食下面有的配菜（side dish），有鸡柳、生菜、鸡蛋、火腿、腊肠。

同理，数据库里面也需要呈现相应的结构。

数据表的实现

数据模型现在提供了一种便捷的能力来，可以快速创建一套可用的数据表来记录摊煎饼的相关数据。

在云后台中新增了一个基于 MySQL 的数据模型，数据模型相当于一张纸，可以在上面记录任何想要记录的数据，比如周饼伦摊位的提供的菜品

创建了基于云开发MySQL数据库的主食表，主食表中包含主食名称，主食价格

字段的详细设置如下

现在就实现了记录当前摊子的主食和配菜。还需要一个订单表，来记录用户的点餐数据

配菜的类型是一个数组文本，用来记录配菜的类型，结构如下

接着需要分别设置每个数据模型的权限。在使用小程序查看订单时，也是以用户的身份来读取的，所以，需要配置用户权限，通过页面访问来控制用户能够访问到哪些页面

至此，数据表就已经大功告成！现在完全可以使用三个表来记录当前摊子的菜品、营业情况。

但是，别忘了周饼伦的目的不止于此，为了周饼伦实现早日暴富，当上CEO，所以，还要利用小程序实现一个界面，来给”上帝“们点餐，并且提供各位CEO查看订单

小程序实现过程

一. 初始化 SDK

在云后台的数据管理中的右侧中，可以方便的查询到使用的文档

新建一个基于云开发的小程序，删除不必要的页面，并且按照文档的步骤进行初始化👇

1.按照指引在 miniprogram 目录下初始化 npm 环境并安装 npm 包

请注意，这里需要在 miniprogram 目录下初始化 npm ，不然需要编辑 project.config.json 手动指定 npm 包的位置

在 miniprogram 目录下打开终端

2.初始化当前 npm 并且安装 @cloudbase/wx-cloud-client-sdk npm 包

npm init -y & npm install @cloudbase/wx-cloud-client-sdk --save

3.在小程序中构建 npm

4.在小程序 app.js 中初始化环境

// app.js

App({

  globalData: {

    // 在这里提供全局变量 models 数据模型方法，方便给页面使用

    models: null

  },

  onLaunch: async function () {

    const {

      init

    } = require('@cloudbase/wx-cloud-client-sdk')

    // 指定云开发环境 ID

    wx.cloud.init({

      env: "ju-9g1guvph88886b02",

    });

    const client = init(wx.cloud);

    const models = client.models;

    // 可以取消注释查看效果

    // const { data } = await models.stapleFood.list({

    //   filter: {

    //     where: {}

    //   },

    //   pageSize: 10,

    //   pageNumber: 1,

    //   getCount: true,

    // });

    // console.log('当前的主食数据：');

    // console.log(data.records);

  }

});

二. 下单页面的实现

首先创建一个页面 goods-list 页面作为首页

顾客如果浏览下单页面，那么就需要看到当前可以选择的主食、配菜，还有他们分别的价格。所以首先我们需要把主食、配菜加载进来

// 加载主食

const stapleFood = (await models.stapleFood.list({

  filter: {

    where: {}

  },

  pageSize: 100, // 一次性加载完，

  pageNumber: 1,

  getCount: true,

})).data.records;



// 加载配菜

const sideDish = (await models.sideDish.list({

  filter: {

    where: {}

  },

  pageSize: 100, // 一次性加载完，

  pageNumber: 1,

  getCount: true,

})).data.records;

// pages/goods-list/index.js

Page({

  data: {

    // 总价格

    totalPrize: 0,

    // 选中的主食

    selectedStapleFoodName: '',

    // 选中的配菜

    selectedSideDishName: [],

    // 所有的主食

    stapleFood: [],

    // 所有的配菜

    sideDish: [],

以下是全部的js代码

// pages/goods-list/index.js

Page({

  data: {

    // 总价格

    totalPrize: 0,

    // 选中的主食

    selectedStapleFoodName: '',

    // 选中的配菜

    selectedSideDishName: [],

    // 所有的主食

    stapleFood: [],

    // 所有的配菜

    sideDish: [],

  },



  async onLoad(options) {

    const models = getApp().globalData.models;

    console.log('models', models)



    // 加载主食

    const stapleFood = (await models.stapleFood.list({

      filter: {

        where: {}

      },

      pageSize: 100, // 一次性加载完，

      pageNumber: 1,

      getCount: true,

    })).data.records;



    // 加载配菜

    const sideDish = (await models.sideDish.list({

      filter: {

        where: {}

      },

      pageSize: 100, // 一次性加载完，

      pageNumber: 1,

      getCount: true,

    })).data.records;



    console.log({

      stapleFood,

      sideDish

    });



    this.setData({

      stapleFood: stapleFood,

      sideDish: sideDish

    })

  },



  // 选中主食

  onSelectStapleFood(event) {

    this.setData({

      selectedStapleFoodName: event.currentTarget.dataset.data.name

    });



    this.computeTotalPrize();

  },



  // 选中配菜

  onSelectedSideDish(event) {

    console.log(event);

    // 选中配菜名字

    const sideDishName = event.currentTarget.dataset.data.name;



    // 如果已经选中，则取消选中

    if (this.data.selectedSideDishName.includes(sideDishName)) {

      this.setData({

        selectedSideDishName: this.data.selectedSideDishName.filter((name) => (name !== sideDishName))

      });

    } else {

      // 未选中，则选中

      this.setData({

        selectedSideDishName: this.data.selectedSideDishName.concat(sideDishName)

      });

    }



    this.computeTotalPrize();

  },



  // 重新计算价格

  computeTotalPrize() {

    // 主食价格

    let staplePrize = 0;

    if (this.data.selectedStapleFoodName) {

      staplePrize = this.data.stapleFood.find((staple) => staple.name === this.data.selectedStapleFoodName).prize;

    }



    // 配菜价格

    let sideDish = 0;

    this.data.selectedSideDishName.forEach((sideDishName) => {

      sideDish += this.data.sideDish.find((sideDishItem) => (

        sideDishItem.name === sideDishName

      )).prize;

    });



    // 总价格

    this.setData({

      totalPrize: staplePrize + sideDish

    })

  },



  // 提交

  async onSubmit() {

    // 提示正在加载中

    wx.showLoading({

      title: '正在提交订单',

    });



    const models = getApp().globalData.models;

    const { data } = await models.order.create({

      data: {

          served: false,  // 是否已出餐

          sideDish: this.data.selectedSideDishName,  // 配菜

          stapleFoodName: this.data.selectedStapleFoodName,  // 主食名称

          prize: this.data.totalPrize,  // 订单总价格

        }

    });



    console.log(data);

    wx.hideLoading();

  }

});

接着来实现页面

<!--pages/goods-list/index.wxml-->

<view>

  <view class="title">

    <image src='/asset/pancake.png'></image>

    <text class="title">请选择主食</text>

  </view>



  <!-- 主食展示 -->

  <view class="staple-food">

    <view wx:for="{{stapleFood}}" wx:key="_id">

      <view bindtap="onSelectStapleFood" data-data="{{item}}" class="staple-food-item {{selectedStapleFoodName === item.name ? 'selected' : ''}}">

        <image src="{{item.imageUrl}}"></image>

        <view class="prize">{{item.prize}}￥</view>

      </view>

    </view>

  </view>



  <!-- 选择配菜 -->

  <view class="title">

    <image src='/asset/sideDish.png'></image>

    请选择配菜

  </view>



  <!-- 配菜展示 -->

  <view class="side-dish">

    <view wx:for="{{sideDish}}" wx:key="_id">

      <!-- 使得class动态绑定支持 includes 语法 -->

      <wxs module="tool">

        var includes = function (array, text) {

          return array.indexOf(text) !== -1

        }

        module.exports.includes = includes;

      </wxs>

      <view class="side-dish-item {{tool.includes(selectedSideDishName, item.name) ? 'selected' : ''}}" bindtap="onSelectedSideDish" data-data="{{item}}">

        <image src="{{item.imageUrl}}"></image>

        <view class="prize">{{item.prize}}￥</view>

      </view>

    </view>

  </view>



  <!-- 底部菜单 -->

  <view class="bottom-content">

    <view class='bottom-info'>

      <view wx:if="{{!!selectedStapleFoodName}}">主食：{{selectedStapleFoodName}}</view>

      <view wx:if="{{selectedSideDishName.length !== 0}}">配菜：{{selectedSideDishName}}</view>

    </view>



    <view class="bottom-operate">

      <view class="total-prize">当前价格<text class="prize">{{totalPrize}}￥</text></view>

      <view class="submit-button {{!selectedStapleFoodName ? 'disabled' : ''}}" bind:tap="onSubmit">下单</view>

    </view>

  </view>

</view>

再添加一点点的样式

/* pages/goods-list/index.wxss */

.title {

  display: flex;

  align-items: center;

  gap: 16rpx;

  padding: 0 20rpx;

}



.title image {

  height: 46rpx;

  width: 46rpx;

}



.staple-food {

  display: flex;

  margin-bottom: 60rpx;

  overflow: auto;

}



.staple-food-item {

  margin: 20rpx 10rpx;

  display: flex;

  flex-direction: column;

  border: 1px solid #f3f0ee;

  box-shadow: 6rpx 6rpx 6rpx #dfdfdf, -6rpx -6rpx 6rpx #dfdfdf;

  border-radius: 6rpx;

  padding: 8rpx;

}



.staple-food-item.selected, .side-dish-item.selected {

  box-shadow: 6rpx 6rpx 6rpx #58b566, -6rpx -6rpx 6rpx #58b566, 6rpx -6rpx 6rpx #58b566, -6rpx 6rpx 6rpx #58b566;

}



.staple-food-item image {

  border-radius: 6rpx;

  width: 300rpx;

  height: 300rpx;

}



.prize {

  padding: 6rpx 6rpx 0;

  text-align: right;

  color: orangered

}



.side-dish {

  padding: 20rpx 12rpx;

  display: flex;

  gap: 12rpx;

  overflow: auto;

}



.side-dish image {

  height: 200rpx;

  width: 200rpx;

}



.side-dish-item {

  border-radius: 8px;

  padding: 16rpx;

  box-shadow: 6rpx 6rpx 6rpx #dfdfdf, -6rpx -6rpx 6rpx #dfdfdf;

}



.bottom-content {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}



.bottom-info {

  padding: 30rpx;

  display: flex;

  flex-direction: column;

  color: grey;

  font-size: 0.5em;

}



.bottom-content .total-prize {

  padding: 0 30rpx;

}



.bottom-operate {

  border-top: 1px solid #dfdfdf;

  display: flex;

  width: 100%;

  justify-content: space-between;

  align-items: center;

  height: 100rpx;

}



.submit-button {

  width: 350rpx;

  color: white;

  background: #22b85c;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.submit-button.disabled {

  background: grey;

  /* 注意，这里设置了当按钮置灰的时候，不可点击 */

  pointer-events: none;

}

于是，煎饼摊的小程序就大功告成了！

接着就可以在云后台管理订单了，在将订单完成之后，即可在云后台将订单的状态修改成已完成。

我们还可以做的更多…

是否可以在订单中新增一个点餐号，这样就知道是哪个顾客点的餐？是否可以使用数据模型的关联关系将配菜、主食和订单关联起来？

是否可以在小程序中创建一个管理订单的页面？是否可以添加优惠券数据表，来给客户一些限时优惠？

期待大家的体验反馈！

代码地址：github.com/vancece/qiL…

点击体验：tcb.cloud.tencent.com/cloud-admin…

运维打工人，周末兼职送外卖的一天

在那个不经意的周末，我决定尝试一份新的工作——为美团外卖做兼职配送员。这份工作对于一向规律生活的我来说，既是突破也是挑战。

早晨，城市的喧嚣还未完全苏醒，空气中带着几分凉意和宁静。准备好出发时，线上生产环境出现问题，协助处理。

收拾好后，戴上头盔，骑上踏板车，开始了自己的第一次外卖配送之旅。

刚开始，我的心情既紧张又兴奋。手机里的订单提示声是今日的任务号角。第一份订单来自一公里外的一家外卖便利店。我快速地在地图上规划路线，开启高德导航，发动踏板车，朝着目的地出发。

由于便利店在园区里面，转了两圈没找到，这是就慌张了，这找不到店咋办了，没办法赶紧问下旁边的老手骑手，也就顺利找到了，便利店，进门问老板，美团104号好了嘛？老板手一指，在架子上自己看。核对没问题，点击已达到店，然后在点击已取货。

然后在导航去收获目的地，找到C栋，找到107门牌号，紧接敲门，说您好，美团外卖到了，并顺利的送达，然后点击已送达，第一单顺利完成，4.8元顺利到手。

其中的小插曲，送给一个顾客时，手机导航提示目的地，结果一看，周围都拆了。没办法给顾客打电话，加微信确认位置具体在哪里，送达时，还差三分钟，这单就要超时了。

配送过程中，我遇到了第一个难题：找不到店家在哪里，我的内心不禁生出些许焦虑。但很快，我调整心态，不懂不知道的地方，需要多多问人。

紧接着，第二份、第三份订单接踵而至。每一次出发和到达，每一条街道和巷弄，我开始逐渐熟悉。

日落时分，我结束了一天的工作。虽然身体有些疲惫，但内心充满了前所未有的充实感。这份工作让我体验到了不一样的人生角色，感受到了城市节奏背后的种种辛劳与甘甜。

周末的兼职跑美团外卖，对我来说不仅是一份简单的工作，更是一段特别的人生经历。它教会了我坚持与责任，让我在忙碌中找到了属于自己的节奏，在逆风中学会了更加珍惜每一次到达。

最后实际周六跑了4个小时，周天跑了7个小时，一共跑了71公里，合计收获了137.80，已提现到账。

前言

最近在开发新需求，按照蓝湖的ui图进行开发，但是在开发完部署后发现做出来的页面部分元素的颜色和设计图有出入，有色差！经过一步步的排查最终破案，解决。仅以此篇记录自己踩坑、学习的过程，也希望可以帮助到其他同学。

发现问题

事情是这样的，那是一个愉快的周五的下午，和往常一样我开心的提交了代码后进行打包发版，然后通知负责人查看我的工作成果。

但是，过了不久后，负责人找到了我，说我做出来的效果和ui有点出入，有的颜色有点不一样。我一脸懵逼，心想怎么可能呢，我是根据ui图来的，ui的颜色可是手把手从蓝湖复制到代码中的啊。

随后他就把页面和ui的对比效果图发了出来:

上图中左侧是蓝湖ui图，右侧是页面效果图。我定睛一看，哇趣！！！好像是有点不一样啊。 感觉右侧的比左侧的更亮一些。于是我赶紧本地查看我的页面和ui，果然也是同样问题！ 开发时真的没注意，没发现这个问题！！！

排查问题

于是，我迅速开始进行问题排查，看看到底是什么问题，是值写错了？还是那里的问题。

ui、页面、代码对比

下图中：最上面部分是蓝湖ui图、下面左侧是我的页面、右侧是我的页面代码样式

仔细检查后发现颜色的值没错啊，我的代码中背景颜色、边框颜色的值都和ui的颜色值是一致的！ 但这是什么问题呢？？？ 值都一样为什么渲染到页面会出现色差？

起初，我想到的是屏幕的问题，因为不同分辨率下展示出来的页面效果是会有差距的。但是经过查看发现同事的win10笔记本、我的mac笔记本、外接显示器上都存在颜色有色差这个问题！！！

ui、页面、源文件对比

通过对比ui、页面、颜色值，不同设备展示效果可以初步确认：和显示器关系不大。当我在百思不解的时候，我突然想到了ui设计师！ui提供的ui图是蓝湖上切出来的，那么她的源文件颜色是什么呢？

于是我火急火燎的联系到了公司ui小姐姐，让她发我源文件该元素的颜色值，结果值确实是一样的，但是！！！ 源文件展示出来的效果好像和蓝湖上的不太一样！

然后我进行了对比(左侧蓝湖、右上页面、右下源文件)：

可以看到源文件和我页面的效果基本一致！到这一步基本可以确定我的代码是没问题的！

尝试解决

首先去网上找了半天没有找到想要的答案，于是我灵光一现，想到了蓝湖客服！然后就询问了客服，为什么上传后的ui图内容和源文件有色差？

沟通了很久，期间我又和ui小姐姐在询问她的软件版本、电脑版本、源文件效果、设置等内容就不贴了，最终得到如下解答：

解决方式

下载最新版蓝湖插件，由于我们的ui小姐姐用的 sketch 切图工具，然后操作如下：

1.下载安装最新版蓝湖插件： lanhuapp.com/mac?formHea…

2.安装新版插件后--插件重置

3.后台程序退出 sketch，重新启动再次尝试打开蓝湖插件.

4.插件设置打开高清导出上传（重要！）

5.重新切图上传蓝湖

最终效果

左侧ui源文件、右侧蓝湖ui：

页面效果：

可以看到我的页面元素的border好像比ui粗一些，感觉设置0.5px就可以了，字体效果的话是因为我还没来得及下载ui对应的字体文件。

但是走到这一步发现整体效果已经和ui图到达了95%以上相似了，不至于和开始有那么明显的色差。

总结

至此，问题已经基本是解决。遇到问题不能怕，多想一想，然后有思路后就一步一步排查、尝试解决问题。当解决完问题后会发现心情舒畅！整个人都好起来了，也会增加自信心！

今天就让我们来使用 Vue.js 和高德地图开放平台提供的 API，实现一个关于天气预报的小demo，实时查询当前城市的天气以及未来三天的天气预测，且实现切换城市查询。实现效果如下；

准备工作

既然要使用真实的数据，那么就需要用到高德地图开放平台提供的天气查询 API，先高德地图api注册为开发者。然后点击文档与支持，选择JS API。

然后登录到控制台创建一个应用并且添加一个key，服务平台为Web端（JS API）。

终端npm create vite@latest使用vite创建项目，npm install下载该项目需要用的包，npm run dev运行项目。

将天气预报的功能全部开发在weather.vue里面，再将这个组件import weather from "./components/weather.vue"引入到app.vue中。

js代码概览

具体代码步骤实现

开始weather.vue里面的代码了。

html 部分；

<div>

    // 头部

    <div class="head">

      <div class="city-name">

        <i class="iconfont icon-dingwei"></i>

        {{ state.city }}

      </div>

      <div @click="toggle" class="city-change">

        <i class="iconfont icon-24gf-city3"></i>

        切换城市

      </div>

    </div>

    

    // 中间部分实时温度

    <div class="main">

      <div class="weather-info">

        <p class="temp">{{ state.weather.temperature }}℃</p>

        <div class="info">{{ state.weather.weather }}</div>

        <div class="detail">

          <div class="item">

            <i class="iconfont icon-shuidi"></i>

            <span>湿度</span>

            <span>{{ state.weather.humidity }}</span>

          </div>

          <div class="item">

            <i class="iconfont icon-feng"></i>

            <span>风向</span>

            <span>{{ state.weather.windDirection }}</span>

          </div>

          <div class="item">

            <i class="iconfont icon-fengli"></i>

            <span>风力</span>

            <span>{{ state.weather.windPower }}</span>

          </div>

        </div>

      </div>

      

      // 未来三日的天气预报

      <div class="future">

        <div class="future-title">三日天气预报</div>

        <div class="future-content">

          <div v-for="(item,i) in state.future" class="forecast">

            <p class="week">周{{ chinese[Number(item.week)-1] }}</p>

            <i :class="getWeatherIcon(item.dayWeather)"></i>

            <p><span class="left">{{ item.dayTemp }}℃</span>  <span class="right"> / {{ item.nightTemp }}℃</span></p>

          </div>

        </div>

      </div>

    </div>

    

     // 切换城市input框

    <div v-show="state.isVisible" >

      <input id="newCity" @keydown.enter="handle" type="text" v-model="state.newCity" placeholder="请输入你要查询的城市">

    </div>

  </div>

然后使用css样式美化成如下界面；

js部分

接下来就是渲染其中的数据了，首先使用高德 api 来获取定位数据，查看官方文档，JS API结合 Vue 使用，首先安装Loader，如下所示，复制到当前文件终端安装。

然后复制代码粘贴；

AMapLoader 是高德地图 js API 的加载器，它可以在前端项目中加载和初始化高德地图的 js API。

import AMapLoader from '@amap/amap-jsapi-loader';

import { onMounted, reactive } from 'vue'

onMounted(() => {   // 在浏览器上出现内容时候触发

  // 加载官方提供的方法

  window._AMapSecurityConfig = {

    securityJsCode: "", // 密钥

  };

  AMapLoader.load({

    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填

    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']

  })

  

    // 加载完上面代码高德提供的服务后，执行then后面的操作

    .then((AMap) => {

      // 获取定位

      getLocalCity(AMap)  // 使用一个函数，将获取地址信息放到这个函数中

    })

})

获取城市信息

官方文档：

const getLocalCity = (AMap) => {

  AMap.plugin('AMap.CitySearch', function () {

    var citySearch = new AMap.CitySearch()

    citySearch.getLocalCity(function (status, result) {

      if (status === 'complete' && result.info === 'OK') {

        // 查询成功，result即为当前所在城市信息

        console.log(result.city);  // 会打印当前城市

        state.city = result.city  //将城市改为定位获取到的城市

        getWeather(AMap)   // 获取天气

      }

    })

  })

}

利用该地址获取实时天气数据

const getWeather = (AMap) => {

  //加载天气查询插件

  AMap.plugin("AMap.Weather", function () {

    //创建天气查询实例

    var weather = new AMap.Weather();

    //执行实时天气信息查询

    weather.getLive(state.city, function (err, data) {  // 将城市替换成state.city

      console.log(err, data);  // 获取天气数据，详情见下表

      state.weather = data     // 将数据赋值给 state.weather

      getForecast(AMap)     //  后面用来获取未来三天的天气

    });

  });

}

将这一整个对象赋值给state.weather然后再state.weather.渲染到页面上。

获取未来三天天气

const getForecast = (AMap) => {

  AMap.plugin("AMap.Weather", function () {

  //创建天气查询实例

  var weather = new AMap.Weather();

  //执行实时天气信息查询

  weather.getForecast(state.city, function (err, data) {

    console.log(err, data);  

    state.future = data.forecasts // 获取天气预报数据

    

    //err 正确时返回 null

    //data 返回天气预报数据，返回数据见下表

  });

});

}

最后就是切换城市中的input框的实现；

<div v-show="state.isVisible" >

      <input id="newCity" @keydown.enter="handle" type="text" v-model="state.newCity" placeholder="请输入你要查询的城市">

</div>

添加以一个v-show方法，然后绑定一个键盘敲击事件触发handle，并用v-model获取输入的数据并将其存储到state.newCity。

const handle = () => {

  state.isVisible =!state.isVisible    // 回车键将框不显示

  state.city = state.newCity    // 城市变为输入的城市

  getWeather(AMap)   // 重新获取该城市天气以及该城市未来天气

}



const toggle = () => {

  state.isVisible =!state.isVisible   // 使得点击切换城市框会显示和消失

}

以上就是实现获取定位城市，该城市的实时天气，以及未来三天的天气预测，切换查询其它城市的功能具体代码了。

总结

以上使用了Vue.js 组件化的方式来构建界面，利用高德地图 API 获取定位和天气数据，利用 Vue 的响应式机制来实时更新页面数据，通过使用官方文档中 AMapLoader 加载高德地图的JS API，使得我们能高效处理地图相关功能，希望这个小 demo 能够对你的前端开发有所帮助，同时记得给文章点点赞哦🤗。

致工作三年即将27岁的自己

这是一篇自己的碎碎念、即回顾自己以前的成长经历、也小小的持有一下对未来的期待。

我是一个双非本科从事于Java开发的一名普普通通的码农、不同于大多数人的27岁、大部分人在这个年龄都已经工作了4/5年、而我也恰恰刚刚满三年而已。

读书

小时候的记忆很模糊、很少关于有父母的记忆、从小的印象就是他们在很远的地方打工、那边还有一个从未谋面的哥哥、小时候的记忆更多是和爷爷奶奶在一起，爷爷在我记事起、他就很忙、很少在家里也或许是我不记事或者缺少了这部分的记忆。

在小时候的记忆里、住在茅草屋里面、那个时候家里还没有完全通电、印象里经常点煤油灯、这个时间段应该是02/03年的时候、记忆里这个时候家里养了一头牛、是一头老黄牛。家里在需要耕田播种的时候、不管风吹日晒、都能看见爷爷在田里一边驾驭着黄牛、嘴边一直在说什么、应该是教导牛牛该怎么走以便使的犁田犁的更好。记不清了、只知道每次遇到下雨的时候、爷爷披着蓑衣带着一个草帽、颇有一些武林大侠的气息。

那个时候家里有一条很凶很凶的狗、幺爷爷家里还是一条白猫、年龄比我那个时候都大。这条很凶的狗已经不记得长啥样了、甚至什么时候去世的都没有印象。

关于这条狗不多的记忆就是、它很凶、但凡看见我们在地坝(四川话：门前小院的意思、通常用于晒一些农作物的地方、或者夜晚乘凉的地方)里面打闹。它都会狂吠不止、这是对它的一个记忆。

还有一个记忆就是，记得是在某一个夏天、在屋后发现了一只野兔、这个时候不记得是不是爸妈在家了、全家都在追这个野兔、追了好久、这条狗也在追、有一个画面就是在我小时候的眼里那个农田的岸边很高、这个直接就从岸边往下面的田里跳下去、连续跳了好几个这样的梯田、那个姿势在我眼里好帅好帅、现在都记得很清楚。最后这个野兔是被抓住了、炸了酥肉、那个味道真的很香、现在都记忆深刻。毕竟小时候家里都是吃猪油、用很小很小的一块、煎出油炒菜。

幺爷爷在的猫是条白猫，印象里是一条抓老鼠的好手、但是不知道它什么死的、只记得大概有十三岁左右。

奶奶有风湿心脏病、那个时候总会吃一些药和一些偏方、记忆里有这么一幕、爷爷把刚出生的小狗狗杀掉、给奶奶治病、嘴馋的我也要吃、结果吃了一口就闷住了。

奶奶在我的记忆里有个画面就是我不想去读书、在上学的路上跑到了一个斜坡上、就如同那个时候黑白电视机上播放的游击战争片一样、以为自己躲在这里他们指定找不到、当然了最后肯定少不了一顿打。印象里只被奶奶打了这一次。

奶奶是在06年走的、不到六十岁。记忆特别深，当时哥哥从东北回老家也快一年了、那是在一个夜晚、哥哥先去睡了、我和其他堂哥堂姐在家里看电视、电视里播放的是洪金宝主演的、是一部战争片、大概就是他们去越南救什么人、有一个人在飞机上跳伞的时候说要倒数十个数、然后打开伞、结果这个嘴吃的人没数到就摔死了。里面有个画面用草杀人、后面还依葫芦画瓢学过这个东西。

奶奶走的时候、爷爷是第一个发现的、我记得爷爷发现之后、我去把哥哥喊醒了、然后我就一直在哭。虽然当时不知道死亡意味着什么、就是在哭、那个时候我上三年级了。奶奶走的那天的天气很好、我还记得我捡了一个螺母回家、后来我把这个螺母扔掉了、当时就想如果不捡这个螺母就好了、奶奶就不会走了。

第一次见哥哥的时候是在一个夏天、爸妈把他从东北送了回来、打算让他家里面读书、当然读书的地方现在已经垮掉了。那个时候家里的公路还是泥巴路、泥巴路大概还是前一年挖机采挖的、挖坏了几个秧田。他们在回来的前一年、写了一封信寄回来、内容是什么记不住了、只记得有一封信、分别向爷爷奶奶以及我都写了点东西。初次见面的时候很陌生、眼前这个和我差不多高有点黑的就是我哥、我的关注并没有在他的身上、更多的是他们提的袋子里面、因为有一袋子糖。

当然了小时候的记忆还有几个画面、就埋藏在心里吧、为什么说上面的狗狗很凶、因为他在我堂姐的脸上留下了印子、现在都能看见。

奶奶走掉之后、我和我哥就去了东北、因为家里没人会做饭了。就去东北读书、东北的记忆说不上多好、校园霸凌是一个很常见的事情。

在东北这三年、父母总是在吵架打架、住在平房里面、附近都是和父母一样的体力劳动者、他们一闹附近的人都会知道。我们的右边住了一个也是一个外出务工者、他们的有个女儿、比我和我哥都大、长得很白。在我们的左边也是一户外地务工者、不过是东三省的、不是四川的、这家的女主人好像很贤惠很好看、长得也很白。

在这期间、四川发生了很大的一件事、汶川地震、当时我记得我和附近的小孩偷偷跑去上网、结果附近的网吧都没网、然后回家就看到电视上到处都在播放新闻、去上学的时候、学校组织了捐款、我捐了五块钱。

小学结束之后、过完了六年级的暑假我就被送回到了老家、走的时候是和爸爸在工地上的工友一路的、正好他要回家。他和我们是一个地方的，记得大概是午饭后、叫了一辆出租车、我就和这个工友上了车、爸爸的这个工友坐在了副驾、我坐在了后排、送行的人有几个、车窗升起、行驶了一段路后、眼泪就落下了、大概知道了以后又不会在爸妈身边了、也不知道为什么没有哭出声、就和电视里面一样。这就是小学的记忆。

大概走了三四天、回到家了、就开始上初中了。

报名的时候见到了很多小学同学、他们很容易就认出我来了、然而我并没有很快的认出他们、他们说我五官没什么变化、很好认。

初中是在一所民办初中读的、我们这边的公立学校很水、很乱、上课打牌抽烟都存在、老师也不会管。而且离我们也很远。民办学校离我家很近、这里的校长和附近的家长都很熟悉、自然而然的就去读了、自然而然的也会听到这样的交代、娃儿不听话不好好读书就整哦。初中的算是目前为止的小高光、因为那个时候自己还算聪明、成绩也还算可以、被当着升学的苗子重点关注。当然最后也还算争气、以A+1的成绩考进县一中、我们这一届也还算争气、有一个去了同济大学、算是历史最好的一届了，当然这个学校现在也垮了。

高中的时候流传出了一个梗、你的数学不会是体育老师教的吧、那个时候会自嘲、我初中的时候、不止是数学是体育老师教的、历史和物理也是体育老师教的、这个老师还没上过高中。

高中是lol很火的时候、那个时候脱离了棍棒教育的我、理所当然的沉迷了进去、高一上学期还好、棍棒教育的习惯还在、期末考试全年级2000多人我考了200名左右、班上第五名好像。

学习态度的变化不止是因为lol、还记得当时班上有个人说我很努力、所以成绩这样、当时不知道是脑子抽了还是咋了就认为别人在说我笨、然后就慢慢放弃了之前的学习方式、再加上联盟的影响、自然而然的成绩一落千丈、后来也就去复读了。

复读这一年没什么特别的记忆、涨了几十分、去了一所双非学校。还是没有做到高一班主任说的那样、你好好读上个一本不成问题。当时学校的升学率是前60名可以上川大的程度、200名左右上一个一本好像确实不是什么问题。但也确实没做到。

上了大学就和大部分人一样、加部门、当班干部、实际上就是混吃等死。不同的是大二那年、由于初中埋下的病因、做了双侧股骨头置换手术、这一下就把家里面掏空了、手术是在北京做的、花了20+、是在18年、三月一号做的左腿三月14号下午14:17做的右腿、刚检测出来的时候很崩溃、出了诊室就哭了、因为知道这么大笔钱家里出不起、当时借住在北京的姐姐家，在十五楼窗口处、恐惧战胜了勇气、没有跳下去。

查出来的时候就告知了父母、父母当时在深圳上班、我一个人去的北京找的姐姐、父亲先赶过来、看见父亲憔悴的面庞、自己也彻底取消了跳下去的想法、太憔悴了、没见过这个样子的父亲、也无法去想象如果跳了父亲会咋样、只知道那个时候父亲的头发白了很多、然后开始秃头了。

做手术的那几天恰逢过年期间、医院的人很多、见识了人生百态、有的人痛苦呻吟着想活下去，有的人沉默不语想离开人世，坐在轮椅上的时候、被推出去透透风、看见了一个和我一般大的人、少了一条腿，那个时候心里想着都是苦命人。不同于大一暑假工被晒的黢黑的我，在学校看到一个老外、老外的黑衬托出我的白，那个时候由于被晒的黢黑心情很糟糕，见到这个交换生之后得到了极大的安慰。

因为这个手术需要人照顾、学校是上下铺、因此休学一年、手术很顺利、在我们眼里是一个天大的事情、在医生眼里如果一个小手术一般、就和普通的感冒差不多。术后也会恢复的很好、有一段时间是长短腿、走路一瘸一拐的、过了两个多月吧就彻底正常了。到目前为止至少没什么问题。唱跳rap不打篮球。

后面的大学时光就很平平无奇、本以为就和之前的师兄师姐一样正常大学然后毕业、后面就遇到了口罩事件、在学校都没有好好学习、在家里怎么可能会好好学习、真的是在混吃等死、大学期间没有什么特别的记忆、唯一的印象就是大一老校区是一群室友、大二搬到新校区、又换了一批室友、寝室从原来和其他专业的混寝、变成了同专业的混寝、但是由于休学一年、复学的时候又被安排到新的寝室、又换了一批室友、读了一年这一批室友毕业了、我大四的时候又换了一批室友。也就是一年一批室友。也算是独一份了。不过后面的都没怎么联系了。

这就是整个读书生涯了。还有很多画面就埋藏在心底吧。

工作

毕业之后、第一年认识了一个老师、养鱼达人、第一次约她出来玩、就问我用什么去接他、给了刚毕业的我一个暴击。于是呼在工作上加把力，从刚毕业的几千块不到一年的时间就破万了。也就是在22年左右吧。这个时候总觉得自己谈恋爱应该有点底气了。可在24年又给了我一个暴击。也就是今年。

在整个22年里面、由于工作还行、有大量的自由时间、在b上学习了尚硅谷的mysql和jvm课程、在慕课网上学习Java高并发课程、还算充实、虽然工作上用到的不多。

在22年、养了一只猫取名壹贰、是只三花、很粘人，也很喜欢、但我把它放在老家了。我的头像就是它很可爱吧。

在23年里、由于之前的学习累积、总觉得要记录一下、避免用的时候又到处找、就开始了写博客这个过程、博客更新的速度很稳定、生活节奏也很稳定、每天下班之后、买菜回家做晚饭和第二天中午的午餐、厨艺和刀工得到了大涨，每天晚上还能学习两小时、从周末开始选题、工作日开始编码、验证写博客、一切都有条不紊的进行着，生活节奏很稳定、窗外的阳光也很温暖。

23年发生了一件事、就是爷爷走了、遗憾的是没有带个孙媳妇回去让他看一眼、爷爷是五月份走的、守灵的那个晚上、睡在爷爷旁边、没有丝毫的害怕、下葬的那一天、没有哭但全是遗憾。至此带我长大的两个人都离开了人世。

在23年11月份的时候、认识了一个菇凉、她的名字很好听、长得也很好看、她的生活多姿多彩、现在都觉得她活得很多姿多彩。就和大家想的那样、慢慢的喜欢上了这个人、好巧不巧的是她对我也有点点意思吧、然后就约着出来玩、一起看电影、一起跨年等等、初期总是美好的、回忆也是。她不会做饭、总是吃外卖、我会让她点菜然后我做好了带给她吃、无论什么时候会送她回家然后自己再回家、每次见面都会给她准备一点零食或者小惊喜、理所当然的我们在一起了、直到过完年之后的某一个周末、我朋友约我们出去玩、在晚上回来的时候、我朋友买了房子(和女朋友一起买的)、刚好又说到这个问题、我就说了一句以后我们也一起买、用公积金带款、然后就因为这个问题讨论了一周、直到最后的分手。

具体的细节问题就不说了。我工作三年攒了一些钱、家里修房子我出了一点钱。一时间我家肯定是拿不出来的、我想让他给我点时间、结果不愿意、她之前有过很长一段时间的恋情被分手、大概是害怕再浪费时间、也能理解。

刚分手那段时间、感觉像是丢了半条命。心态很崩溃、觉得自己很差劲、一眼望到了头、好像也成不了家。掘金的更新速度就能看出来影响，虽然在一起的时间不长、三月份分的手、到现在为止有些时候都会因为这件事emo。

分手之前很喜欢做饭、分手之后再也没做过饭、看着那些为了给她做菜买的调味品以及打包盒、总是别有一番滋味、有时候总觉得自己要是当时做的再好一点就好了。在这期间看了一些心理学相关的书、也学会了一些调整自己的方法。

分手这段时间里、激情消费买了辆车、自驾去了一趟若尔盖大草原、草原很好看、自此身上的积蓄被自己花得差不多了。不止如此、由于工作上没有任何发展、总是干一些和Java无关的事情、甚至打算让我做嵌入式开发和大模型这一类工作，职业发展也看到了头。

整理生活这段时间丢了很多东西、总感觉自己也把自己丢了、好在慢慢的把自己拼好重新捡起来了。

下一个月也就马上27岁了、看着身边同龄的人要么成家、要么即将成家、要么事业有成、自己还是孤家寡人，多多少少也很羡慕。

站在生活这条十字路口、迷茫、彷徨、不安、焦虑每隔一段时间都会出现在自己身边、好在自己的调整能力得到了极大的提升、看书总归是有用的。

古人云：三十而立、至少现在看来、在这有限的时间里很难立起来了、但总要去试试、说不定就成了呢。

未来会是什么样子的呢？不知道，能把自己的生活过好就已经很不错了。感知幸福是一种能力、感知焦虑也是。

对生活的感悟如同总有千言万语、却有一种如鲠在喉的感觉。不知道命运会给我带来什么样的生活？不管怎么样都坦然接受吧。期待吗？期待吧。

写到这里、感受万千、内心细腻的人总是容易伤春悲秋。

回顾过往、就如同这篇文字一样、普普通通平平无奇、都无法用鸡肋来形容。但相信生活不会辜负每一个好好生活的人、始终对未来抱有期待与憧憬。不管最终如何、终将相信我们都会过上自己想要的生活。

最后给自己定一个目标吧：

• 坚持写博客、写到35岁，我相信自己会一直从事计算机行业的！


• 健健康康的活到退休。

窗外的天空很蓝、阳光很温暖、最近的心情也很好、希望您也是。

谢谢您能看到这里，祝君心想事成、万事顺遂。

大家好，我是凌览 。

同样是程序员靠手艺吃饭，为啥外包却是过街老鼠人人喊打，这里我精选了几位网友的回答让我们一起来看看。

第一位网友

其实我觉得，国家应当立法禁止外包驻场。应当规定只有在外包公司所在办公场所工作才能算外包，驻场外包一律必须与目标公司签订劳务合同。否则，驻场外包本质上相当于公司钻劳动法漏洞雇人。

你请外包公司开发软件，给需求给预算给时间给报酬，对方开发了给你验收，这叫外包。没毛病。

你给外包公司钱，人家直接把人派到你办公室，这叫什么玩意的外包？这不就是逃避责任，规避劳动法么？——你是个公司，又不是个人。

当然了，其实确实有些情况，需要不同公司去同一个办公地点合作做项目的，大家觉得说不清楚这与外包的区别。但其实区别还是很明显，区别在于，这些员工遵守谁家的工作制度。

我是A公司人，去客户B那里出差，帮客户B解决问题，这段时间虽然在客户B公司上班，但我不用打他们的卡，不用给他们汇报工作，不用交他们周报，我只对自己公司负责，这是出差，因为我还是A公司员工。

如果我在A公司签订合同然后去B公司工作，由他们（B公司）给分配任务，由他们考核计划完成情况，由他们收我周报，由他们定我KPI，我向他们汇报工作，这性质就完全变了。

这除了劳务关系以外，难道不是实质上B公司员工么？如果允许这样的形态存在，那不就等于是B公司的金蝉脱壳方式规避劳动法么？

所以我的看法是这样：外包可以，B公司写好需求人力时间，签合同，包项目，A公司直接交付最终成果，A公司的员工不受B公司管理，这是外包，这样的外包我觉得很合理。——A公司直接把人派出去给B公司，让B公司管理A公司的人，这不叫外包，这叫买卖人口，这叫A公司帮B公司规避劳动法，这是对外包的侮辱。

第二位网友

我其实一直本着给钱做事的风格，所以外包我并不歧视，直到有一天。

今年我面试了一个外包，行情不好，所以不怎么敢开薪资，比离职前低了一丢丢的样子，喊了12K

甲方面试，问的那一个细，从日常工作到项目数据流，到接口全问了一个遍，还好大差不多，聊了半个多小时。

面试结果是过的。

但是但是面试官和我介绍项目时候就说了，上半个月加班会少一点，可能到8点9点，下半个月可能会到1点2点，偶尔周六还要加班，是一个新项目。

我懂了。

我就问外包公司有加班费吗？他们说没有，只能调休，我算了一下按照面试官介绍，这加班一个月得加班120个小时打底，这没加班费，还只能调休，我直接裂开。

五险一金有，最低的

试用期全薪，这个除了小公司基本上是全的。

剩下啥福利没有，没餐补，没车补，啥也没有。

我直接就拒了。。

第三位网友

外包的活尽量别干，比如培训班入行，或换城市发展着急找工作，或者刚毕业想积累经验，这些情况下可能不得不找外包积累经验，但外包的活尽量别超过2年，干3年都嫌多，原因如下：

总之，甲方人员对外包员工可能真是客客气气的，但在各种工作中，总不免会想，我是甲方，他是外包，也就是说，甲方和外包之间的鸿沟是天然存在的。

引言

在流程图中，边（Edge） 的主要作用是连接两个节点，表示从一个节点到另一个节点的关系或流程。在业务系统中，边通常代表某种逻辑连接，比如状态转移、事件触发、任务流动等。对于复杂的流程图，边不仅仅是两点之间的连接，它还可以传递信息、约束流程的顺序，并通过不同的样式或标记来表达不同的含义。

不同的场景下，边可能需要具备丰富的样式或交互，比如箭头表示方向、虚线表示条件判断、动画表示动态效果等。因此，灵活定义和实现自定义边对于流程图的可视化设计尤为重要。

LogicFlow的边

为了灵活适配不同场景下的需求，LogicFlow的边模型是由 线条、箭头、文本、调整点五个模块组成。用户可以继承基础边类，对边的线条、箭头、文本和调整点进行自定义。

在技术实现上，LogicFlow设计了一个基础边模型BaseEdge，它定义了LogicFlow边的基本属性，如起点、终点、路径、样式等，并提供了操作这些属性的基本方法，提供逻辑处理和渲染的基础，通过继承基础边的数据类BaseEdgeModel和视图类BaseEdge，可以实现自定义边的逻辑和交互。

基础边：BaseEdge

属性方法简介

BaseEdgeModel中定义了一些核心属性，用于描述边的几何结构和样式。

围绕着这些核心属性，LogicFlow设计了支撑边运转的核心方法

还有一些渲染使用的样式方法

运转过程

边实例化时，数据层Model类内部会先调用initeEdgeData方法，将无需处理的属性直接存储下来，设置为监听属性然后触发setAnchors、initPoints和formatText方法，生成边起终点、路径和文本信息存储并监听。

视图层渲染时，Model中存储的数据会以外部参数的形式传给组件，由不同渲染方法消费。每个渲染方法都是从Model存储的核心数据中获取图形信息、从样式方法中获取图形渲染样式，组装到svg图形上。最终由render函数将不同模块方法返回的内容呈现出来。

内置衍生边

LogicFlow内部基于基础边衍生提供三种边：直线边、折线边和曲线边。

直线边

在基础边的之上做简单的定制：

View	Model

直线边数据层和视图层源码逻辑

折线边

折线边在Model类的实现上针对边路径计算做了比较多的处理，会根据两个节点的位置、重叠情况，使用 A*查找 结合 曼哈顿距离 计算路径，实时自动生成pointsList数据。在View类中则重写了getEdge方法，使用svg polyline元素渲染路径。

曲线边

曲线边和折线边类似，Model类针对边路径计算做了较多处理，不一样的是，为了调整曲线边的弧度，曲线边额外还提供了两个调整点，边路径也是根据边起终点和两个调整点的位置和距离计算得出，View类里使用svg的path元素渲染路径。

一起实现一条自定义动画边

自定义边的实现思路和内置边的实现类似：继承基础边 → 重写Model类/View类的方法 → 按需增加自定义方法 → 命名并导出成模块

今天就带大家一起实现一条复杂动画边，话不多说，先看效果：

要实现这样效果的边，我们核心只需要做一件事：重新定义边的渲染内容。

在实际写代码时，主要需要继承视图类，重写getEdge方法。

实现基础边

那我们先声明自定义边，并向getEdge方法中增加逻辑，让它返回基础的折线边。

为了方便预览效果，我们在画布上增加节点和边数据。

自定义边实现

import { h, PolylineEdge, PolylineEdgeModel } from '@logicflow/core'



class CustomAnimateEdge extends PolylineEdge {

  // 重写 getEdge 方法，定义边的渲染

  getEdge() {

    const { model } = this.props

    const { points, arrowConfig } = model

    const style = model.getEdgeStyle()

    return h('g', {}, [

      h('polyline', {

        points,

        ...style,

        ...arrowConfig,

        fill: 'none',

        strokeLinecap: 'round',

      }),

    ])

  }

}



class CustomAnimateEdgeModel extends PolylineEdgeModel {}



export default {

  type: 'customAnimatePolyline',

  model: CustomAnimateEdgeModel,

  view: CustomAnimateEdge,

}

定义画布渲染内容

lf.render({

  nodes: [

    {

      id: '1',

      type: 'rect',

      x: 150,

      y: 320,

      properties: {},

    },

    {

      id: '2',

      type: 'rect',

      x: 630,

      y: 320,

      properties: {},

    },

  ],

  edges: [

    {

      id: '1-2-1',

      type: 'customPolyline',

      sourceNodeId: '1',

      targetNodeId: '2',

      startPoint: { x: 200, y: 320 },

      endPoint: { x: 580, y: 320 },

      properties: {

        textPosition: 'center',

        style: {

          strokeWidth: 10,

        },

      },

      text: { x: 390, y: 320, value: '边文本3' },

      pointsList: [

        { x: 200, y: 320 },

        { x: 580, y: 320 },

      ],

    },

    {

      id: '1-2-2',

      type: 'customPolyline',

      sourceNodeId: '1',

      targetNodeId: '2',

      startPoint: { x: 150, y: 280 },

      endPoint: { x: 630, y: 280 },

      properties: {

        textPosition: 'center',

        style: {

          strokeWidth: 10,

        },

      },

      text: { x: 390, y: 197, value: '边文本2' },

      pointsList: [

        { x: 150, y: 280 },

        { x: 150, y: 197 },

        { x: 630, y: 197 },

        { x: 630, y: 280 },

      ],

    },

    {

      id: '1-2-3',

      type: 'customPolyline',

      sourceNodeId: '2',

      targetNodeId: '1',

      startPoint: { x: 630, y: 360 },

      endPoint: { x: 150, y: 360 },

      properties: {

        textPosition: 'center',

        style: {

          strokeWidth: 10,

        },

      },

      text: { x: 390, y: 458, value: '边文本4' },

      pointsList: [

        { x: 630, y: 360 },

        { x: 630, y: 458 },

        { x: 150, y: 458 },

        { x: 150, y: 360 },

      ],

    },

    {

      id: '1-2-4',

      type: 'customPolyline',

      sourceNodeId: '1',

      targetNodeId: '2',

      startPoint: { x: 100, y: 320 },

      endPoint: { x: 680, y: 320 },

      properties: {

        textPosition: 'center',

        style: {

          strokeWidth: 10,

        },

      },

      text: { x: 390, y: 114, value: '边文本1' },

      pointsList: [

        { x: 100, y: 320 },

        { x: 70, y: 320 },

        { x: 70, y: 114 },

        { x: 760, y: 114 },

        { x: 760, y: 320 },

        { x: 680, y: 320 },

      ],

    },

  ],

})

然后我们就能获得一个这样内容的画布：

添加动画

LogicFlow提供的边动画能力其实是svg 属性和css属性的集合，目前主要支持了下述这些属性。

type EdgeAnimation = {

    stroke?: Color; // 边颜色, 本质是svg stroke属性

    strokeDasharray?: string; // 虚线长度与间隔设置, 本质是svg strokeDasharray属性

    strokeDashoffset?: NumberOrPercent; // 虚线偏移量, 本质是svg strokeDashoffset属性

    animationName?: string; // 动画名称，能力等同于css animation-name

    animationDuration?: `${number}s` | `${number}ms`; // 动画周期时间，能力等同于css animation-duration

    animationIterationCount?: 'infinite' | number; // 动画播放次数，能力等同于css animation-iteration-count

    animationTimingFunction?: string; // 动画在周期内的执行方式，能力等同于css animation-timing-function

    animationDirection?: string; // 动画播放顺序，能力等同于css animation-direction

};

接下来我们就使用这些属性实现虚线滚动效果。

边的动画样式是取的 model.getEdgeAnimationStyle() 方法的返回值，在内部这个方法是取全局主题的edgeAnimation属性的值作为返回的，默认情况下默认的动画是这样的效果：

开发者可以通过修改全局样式来设置边动画样式；但如果是只是指定类型边需要设置动画部分，则需要重写getEdgeAnimationStyle方法做自定义，就像下面这样：

class ConveyorBeltEdgeModel extends PolylineEdgeModel {

  // 自定义动画

  getEdgeAnimationStyle() {

    const style = super.getEdgeAnimationStyle()

    style.strokeDasharray = '40 160' // 虚线长度和间隔

    style.animationDuration = '10s' // 动画时长

    style.stroke = 'rgb(130, 179, 102)' // 边颜色

    return style

  }

}

然后在getEdge方法中加上各个动画属性

// 改写getEdge方法内容

const animationStyle = model.getEdgeAnimationStyle()

const {

  stroke,

  strokeDasharray,

  strokeDashoffset,

  animationName,

  animationDuration,

  animationIterationCount,

  animationTimingFunction,

  animationDirection,

} = animationStyle



return h('g', {}, [

  h('polyline', {

    // ...

    strokeDasharray,

    stroke,

    style: {

      strokeDashoffset: strokeDashoffset,

      animationName,

      animationDuration,

      animationIterationCount,

      animationTimingFunction,

      animationDirection,

    },

  }),

])

我们就得到了定制样式的动画边：

添加渐变颜色和阴影

最后来增加样式效果，我们需要给这些边增加渐变颜色和阴影。
SVG提供了元素linearGradient定义线性渐变，我们只需要在getEdge返回的内容里增加linearGradient元素，就能实现边颜色线性变化的效果。
实现阴影则是使用了SVG的滤镜能力实现。

// 继续改写getEdge方法内容

return h('g', {}, [

  h('linearGradient', { // svg 线性渐变元素

    id: 'linearGradient-1',

    x1: '0%',

    y1: '0%',

    x2: '100%',

    y2: '100%',

    spreadMethod: 'repeat',

  }, [

    h('stop', { // 坡度1，0%颜色为#36bbce

      offset: '0%',

      stopColor: '#36bbce'

    }),

    h('stop', { // 坡度2，100%颜色为#e6399b

      offset: '100%',

      stopColor: '#e6399b'

    })

  ]),

  h('defs', {}, [

    h('filter', { // 定义滤镜

      id: 'filter-1',

      x: '-0.2',

      y: '-0.2',

      width: '200%',

      height: '200%',

    }, [

      h('feOffset', { // 定义输入图像和偏移量

        result: 'offOut',

        in: 'SourceGraphic',

        dx: 0,

        dy: 10,

      }),

      h('feGaussianBlur', { // 设置高斯模糊

        result: 'blurOut',

        in: 'offOut',

        stdDeviation: 10,

      }),

      h('feBlend', { // 设置图像和阴影的混合模式

        mode: 'normal',

        in: 'SourceGraphic',

        in2: 'blurOut',

      }),

    ]),

  ]),

  h('polyline', {

    points,

    ...style,

    ...arrowConfig,

    strokeDasharray,

    stroke: 'url(#linearGradient-1)', // 边颜色指向渐变元素

    filter: 'url(#filter-1)', // 滤镜指向前面定义的滤镜内容

    fill: 'none',

    strokeLinecap: 'round',

    style: {

      strokeDashoffset: strokeDashoffset,

      animationName,

      animationDuration,

      animationIterationCount,

      animationTimingFunction,

      animationDirection,

    },

  }),

])

就得到了我们的自定义动画边

结尾

在流程图中，边不仅仅是节点之间的连接，更是传递信息、表达逻辑关系的重要工具。通过 LogicFlow，开发者可以轻松地创建和自定义边，以满足不同的业务场景需求。从基础的直线边到复杂的曲线边，甚至动画边，LogicFlow 都为开发者提供了高度的灵活性和定制能力。

希望能通过这篇文章抛砖引玉，帮助你了解在 LogicFlow 中创建和定制边的核心技巧，打造出符合你业务需求的流程图效果。

如果这篇文章对你有帮助，请为我们的项目点上star，非常感谢ღ( ´･ᴗ･` )

项目传送门：github.com/didi/LogicF…

作为程序员，肯定都深受加班的痛苦。

❝那每天加班很晚的情况下，该通过怎样的锻炼来保持身体健康呢？

我觉得还是得先把觉睡够，然后才是锻炼。

❝睡眠不足情况下高强度锻炼，容易猝死。

如果睡觉的时间都不够，建议辞，换个不太卷的地方。

把特别卷的岗位，留给那些更年轻的，特别需要钱买房结婚的，拼几年，把生存问题解决掉之后，就不要再用命赚钱了。

人生几十年，钱是赚不完的，基本生活需求之外，多赚到的钱，对生活质量提升作用有限。

睡眠的优先级，不但高于锻炼，甚至高于洗脸洗澡。

❝而且睡前三小时不要吃太多东西。

对于经常晚上加班很晚的人来说，戒掉睡觉前玩手机的不良习惯，尽量减少晚上的一切活动，争分夺秒地保证睡眠。

健身，足够的营养和休息，都比身体锻炼本身更重要。

❝所以如果长期生活不规律，饮食习惯不好，休息睡眠不能保证。

如果已经很累了，就不要考虑上高强度的训练了，夸张一点有可能做个俯卧撑都有可能把人送进医院。

有位网友总结得好：

❝去健身，你会得到强壮的身体，过度劳累，你会得到猝死的尸体，过度劳累还去健身，你会得到强壮的尸体。

所以：下班晚，好好休息就是你最好的健身！

程序员在工作空闲之余也可以通过以下方式来锻炼身体：

❝通过走路或骑自行车的方式出门活动，可以锻炼身体的同时享受户外的新鲜空气。

在家里可以做一些简单的，如俯卧撑、仰卧起坐等，这些操作都可以锻炼身体的同时不需要太多的器材。

每日一题

题目描述

❝

给你一个二叉树的根节点 root ， 检查它是否轴对称。

解题思路

❝递归实现

递归结束条件：

• 都为空指针则返回 true


• 只有一个为空则返回 false

递归过程：

• 判断两个指针当前节点值是否相等


• 判断 A 的右子树与 B 的左子树是否对称


• 判断 A 的左子树与 B 的右子树是否对称

代码实现

Java代码：

 class Solution {

     public boolean isSymmetric(TreeNode root) {

         if(root == null) {

           return true;

         }

         return dfs(root.left,root.right);

     }

     public boolean dfs(TreeNode p,TreeNode q){

         if (p == null && q == null) {

           return true;

         } else if (p == null||q == null) {

           return false; //只有一个为空

         }

         if(p.val != q.val) {

           return false;

         }

         //第一棵子树的左子树和第二棵子树的右子树对称，且第一棵子树的右子树和第二棵子树的左子树对称

         return dfs(p.left,q.right) && dfs(p.right,q.left);

     }

 }

Python代码：

class Solution(object):

 def isSymmetric(self, root):

  """

  :type root: TreeNode

  :rtype: bool

  """

  if not root:

   return True

  def dfs(left,right):

   # 递归的终止条件是两个节点都为空

   # 或者两个节点中有一个为空

   # 或者两个节点的值不相等

   if not (left or right):

    return True

   if not (left and right):

    return False

   if left.val!=right.val:

    return False

   return dfs(left.left,right.right) and dfs(left.right,right.left)

  # 用递归函数，比较左节点，右节点

  return dfs(root.left,root.right)

Go代码：

func isSymmetric(root *TreeNode) bool {

 // 递归-对称二叉树

 var dfs func(left, right *TreeNode) bool

 dfs = func(left, right *TreeNode) bool {

  if left == nil && right == nil {

   return true

  }

  if left ==nil || right == nil || left.Val != right.Val {

   return false

  }

  // 左右子节点都存在且val等，递归其子树

  return dfs(left.Left, right.Right) && dfs(left.Right, right.Left)

 }

 return dfs(root.Left, root.Right)

}

复杂度分析

❝假设树上一共 n 个节点。

时间复杂度：

• 这里遍历了这棵树，时间复杂度为 O(n)。

空间复杂度：

• 这里的空间复杂度和递归使用的栈空间有关，这里递归层数不超过 n，故空间复杂度为 O(n)。

简介

最近学习了svg,想着使用svg实现地铁线路图

 其中黄色是1号线，蓝色是2号线，橙色是3号线

实现：react+svg+数据结构-图。

考虑范围包括了每站时间，但未包括了换站时间。考虑到换站时间可以加到每2个交换站的路程里

功能

功能：选择2个地铁站，标出最短路程。

求最少换站路线，暂未做

实现思路

1. 简化问题，先将所有地铁站分2类，交换站和非交换站。那么交换站可以充当图中的。那么从a=>b, 变成a=>交换站=>交换站=>b的问题,需要写死的是非交换站（a,b）能到达的交换站（下面的adjcent数组）, 其中a=>交换站 和b=>交换站 相对静止,但是我这里也考虑到了非交换站到交换站需要的时间（time）

地铁线路图

图

2. 首先根据每条地铁图数据绘制出地铁线路图，并添加上点击事件，这里要处理好地铁线路图的数据，数据需要相对准确，因为后面需要计算出最短路径。

3. 求最短距离，使用的是Floyd最短路算法（全局/多源最短路）。 其中原理：计算a->b的最短路径，遍历所有，查找是否有最捷径路径 a->x x->b

for(k=1;k<=n;k++) 

    for(i=1;i<=n;i++) 

        for(j=1;j<=n;j++) 

        if(e[i][j]>e[i][k]+e[k][j]) // i->j  i->k  k->j

            e[i][j]=e[i][k]+e[k][j]; 

然而拿到最短路程后，但是并未拿到路程，拿到的是比如，a点到所有点的最短路程。你们可以思考一下如果获取最短路径。

大概长这样

4. 求最短路径 使用一个对象，存储每次找到较短路径。 changeRodePath[${is}to${js}] = [ [is, ks], [ks, js], ]

  function getAllPointShortest(n, e) {

    let changeRodePath = {};

    for (let k = 0; k < n; k++) {

      for (let i = 0; i < n; i++) {

        for (let j = 0; j < n; j++) {

          if (e[i][j] > e[i][k] + e[k][j]) {

            e[i][j] = e[i][k] + e[k][j];

            console.log("-------------------------");

            const is = changeStation[i];

            const ks = changeStation[k];

            const js = changeStation[j];

            changeRodePath[`${is}to${js}`] = [

              [is, ks],

              [ks, js],

            ];

            console.log(changeStation[i], changeStation[j]);

            console.log(changeStation[i], changeStation[k]);

            console.log(changeStation[k], changeStation[j]);

                // 2_2 2_5

                 //2_2 1_2

                   //1_2 2_5

          }

        }

      }

    }

    setChangeRodePath(changeRodePath);

    return e;

  }

当选中2个站时，先取出adjacent，然后求出最短路程，

         let path = {};

        adjacent0.forEach((p0,i1) => {

          adjacent1.forEach((p1,i2) => {

            const index0 = changeStation.indexOf(p0);

            const index1 = changeStation.indexOf(p1);

            let t=time0[i1]+time1[i2]

            if ((rodePath[index0][index1]+t) < minPath) {

              minPath = rodePath[index0][index1];

              path = { p0, p1};

            }

          });

        });

具体多少不重要，重要的是通过 let pathm = changeRodePath[${path.p0}to${path.p1}]，递归查找是否有更短的捷径，因为，2_1 =>3_9 的路径是：2_1 =>1_3=>1_5=>1_8，所以不一定有捷径a->c c—b, 可能是 a->c c->b， 然后发现有更短路径，c->d d->b,那么a-b 路程就变成了a->c->d->b。回到正题，递归之后就能取到最短路径了，然后通过2个交换点取得路径。

没有就更简单了

5.取对应的line,去渲染，这里分2类，交换站之间的路径（最短路径），头和尾。然后分别渲染polyline（使用对应line 的颜色）

function getPl(item, attr, listen) {

    return (

      <g {...attr} {...listen}>  

        <polyline   //绘制line

          {...item}

          fill="none"

          color={item.colorH}

          strokeWidth="5"

          strokeLinecap="round"

          strokeLinejoin="round"

        />

        {item.usePointn.map((point) => { // line 上的站

          return (

            <use

              x={point.x}

              onClick={() => choosePoint(point)}

              y={point.y}

              fill={point.color}

              href="#point"

            >use>

          );

        })}

      g>

    );

  }

代码准备

// 上图所示，数据随便造，需要合理时间，不然得到的路程奇奇怪怪的

代码部分

html

  
width: "80vw", height: "100vh" }}>

        <svg

          id="passWay"

          viewBox="0 0 800 600"

          xmlns="http://www.w3.org/2000/svg"

        >

          <defs>

            <g id="point">

              <circle r="4">circle>

              <circle r="3" fill="#fff">circle>

            g>          

          defs>

        // 所有地铁线路图

          {polyline.map((item) => {

            return getPl(

              item,

              {},

              {

                onMouseEnter: (e) => onMouseEnterShow(e, item),

                onMouseOut: () => {

                  clearTimeout(t1.current);

                  t1.current = null;

                },

              }

            );

          })}

          // mask

          { choosePoints.length==2 && (

            <rect

              x="0"

              y="0"

              width={"100%"}

              height={"100%"}

              fillOpacity={0.9}

              fill="white"

            >rect>

          )}

              // 最短路程

          {choosePoints && choosePoints.length==2 && showReduLine.map(line=>{

            return  getPl(line, {}, {})

          })

         }

        svg>

      

通过line 获取 polyline

  function getLineP(line) {

    const usePointn = [];

    let path = "";

    line.points.forEach((item, index) => {

      const { x, y, isStart, isChange, isEnd } = item;



      usePointn.push({ ...item, color: line.color });

      if (index == 0) {

        path = `${x},${y} `;

      } else {

        path += `${x},${y} `;

      }

    });

    const polylinen = {

      usePointn,

      stroke: line.color,

      ...line,

      pointStation: line.points,

      points: path,

    };

    return polylinen;

  }

选出2站绘制路程

  function comfirPath(point0, point1, p0, p1, pathm) {

   

    let pShow0= getLines(point0,p0)

    let pShow1= getLines(point1,p1)

    let pathsCenter=[]

    if (pathm) {

      function recursion(pathm){

         pathm.map(([p0,p1])=>{

          let pathn = changeRodePath[`${p0}to${p1}`];

          if(pathn){

            recursion(pathn)

          }else{

            // 中间的line 不用按顺序

            pathsCenter.push(getChangeStationLine(p0,p1))

          }

       })

      }

      recursion(pathm)

    }else{

      pathsCenter=[getChangeStationLine(p0,p1)]

    }

    const pyAll= [pShow0,pShow1,...pathsCenter].map(line=>{

      const py= getLineP({

        points:line,

      })

      py.stroke=line.color

      return py

    })

    setShowReduLine(pyAll); // 绘制

  }

参考： 1.# [数据结构拾遗]图的最短路径算法

作者：无名小兵
来源：juejin.cn/post/7445208959151767604

前言

还是和上篇一样，是关于导出excel的问题。好像是生产上导出的excel有问题，具体是啥没和我说，当然和我上篇写的没有什么关系，这是另一个模块历史遗留的问题。反正到我手里的任务就是更改导出的接口让后端去做表格。

原来的写法

原来的写法很粗暴，直接用window.location去跳转下载链接就把excel下载了，后端具体怎么做我的不清楚，前端的逻辑就是有一个固定的地址，然后通过query去传参让后端知道该导出什么样的excel表格。

function exportExcel(params){

    const url = 'xxxxx/exportExcel?id=params.id&type=params.type'

    window.location = url

}

content-disposition

基础没学好应该也是会这样的一个疑问，为什么我在浏览器中输入一个地址就会下载文件，是的我也是，所以我去查了一下，主要是由于Content-Disposition 这个响应头字段。它告诉浏览器该文件是作为附件下载，还是在浏览器中直接打开。如果该字段的值为 attachment，则浏览器会将文件下载到本地；如果该字段的值为inline，则浏览器会尝试在浏览器中直接打开文件。

语法格式

• 其基本语法格式为：Content-Disposition: attachment; filename="filename.ext" 或 Content-Disposition: inline; filename="filename.ext"。


• 其中，attachment表示将内容作为附件下载，这是最常见的用于文件下载的设置；而inline则表示在浏览器中内联显示内容，即直接在浏览器窗口中展示，而不是下载。


• filename参数用于指定下载文件的名称，若不指定，浏览器可能会根据服务器返回的其他信息或自身的默认规则来确定文件名。

标题党？

才不是啊，因为我要对接的接口变成post请求，用原来这种方式肯定是不行的，这个时候我就想到了我之前写过的类似需求，就是用fetch。但是一直请求不成功，后端一直报请求参数异常。

fetch

function exportExcel(data){

    fetch(`xxxxxxx/ExportExcel`, {

        method: 'POST',

        body: JSON.stringify(data),

        headers: {

          'Authorization': 'xxxxxxxxxxxxxxxxxxxxxxxxxx'

        }

      }).then(res => {

        const readableStream = res.body

        if (readableStream) {

          return new Response(readableStream).blob()

        } else {

          console.error('No readable stream available.')

        }

      }).then(blob => {

        // 创建一个下载链接

        const downloadLink = document.createElement('a')

        downloadLink.href = URL.createObjectURL(blob)

        // 设置下载属性，指定文件名

        downloadLink.download = '测试.xlsx'

        // 模拟点击下载链接

        downloadLink.click()

        // 释放 URL 对象

        URL.revokeObjectURL(downloadLink.href)

      })

}

我感觉我写的没有什么毛病啊，fetch第一个then回调转成blob数据类型，第二个then模拟a标签点击下载。但是后端老给报参数类型异常。

我本来想让后端给我看看什么原因的，是什么参数没传对，还是什么请求头不对，但是他就老给甩一张swagger的请求成功的截图，根本不会帮你去看日志是因为什么原因。当然，swagger能调成功，说明接口肯定是没问题的，肯定是我没有传对东西，但是就挺烦的，都没有沟通欲望了，想着自己去换种方式去解决，然后我就想着用axios去试一下，没想到成功了

axios

function exportExcel(data) {

  axios({

    method: 'post',

    url: `xxxxx/ExportExcel`,

    data,

    responseType: 'blob'// 这里就是转化为blob文件流

  }).then(res => {

    console.log(res, 'res')

      // 创建一个下载链接

    const downloadLink = document.createElement('a')

    downloadLink.href = URL.createObjectURL(res.data)

    // 设置下载属性，指定文件名

    downloadLink.download = '测试.xlsx'

    // 模拟点击下载链接

    downloadLink.click()

    // 释放 URL 对象

    URL.revokeObjectURL(downloadLink.href)

  })

}

这里通过responseType设置blob值，就会自动将响应的东西转成blob二进制的格式内容，然后还是通过模拟a标签下载。相比于fetch，我们要在第二个then中对数据进行转换，而axios配置一个参数就行了。

总结

现在大部分的项目中，基本都是使用axios封装的交互方法，所以我们其实用axios是最好的，只需要配置一个参数就可以下载excel，相较于fetch来说，代码是比较简洁一点。虽然我这里fetch是没有成功的，但是放心，肯定是没有问题，是可以这样下载excel的，我估摸着应该是请求头的原因吧，可能是后端做了什么对请求头的处理，我也不知道，但是我之前做这个需求都是用fetch肯定没问题。

前言

本文开发的工具，是vue3 element-plus ui库专用的，需要对vue3指令概念有一定的了解

​ 最近开发的项目中,需要对项目中大量的列表实现轮播效果,经过一番折腾.最终决定不使用第三方插件,手搓一个滚动指令.

效果展示

实现思路

第一步先确定功能

• 列表自动滚动


• 鼠标移入停止滚动


• 鼠标移出继续滚动


• 滚轮滚动完成，还可以继续在当前位置滚动


• 元素少于一定条数时，不滚动

滚动思路

通过观察el-table的结构可以发现el-scrollbar__view里面放着所有的元素，而el-scrollbar__wrap是一个固定高度的容器，那么只需要获取到el-scrollbar__wrap这个DOM，并且再给一个定时器，不断的改变它的scrollTop值，就可以实现自动滚动的效果，这个值必须要用一个变量来存储，不然会失效

停止和继续滚动思路

设置一个boolean类型变量，每次执行定时器的时候判断一下,true就滚动，否则就不滚动

滚轮事件思路

为了每次鼠标在列表中滚动之后，我们的轮播还可以在当前滚动的位置，继续轮播，只需要在鼠标移出的时候，将当前el-scrollbar__wrap的scrollTop赋给前面存储的变量，这样执行定时器的时候，就可以继续在当前位置滚动

不滚动的思路

​ 只需要判断el-scrollbar__view这个容器的高度，是否大于el-scrollbar__wrap的高度，是就可以滚动，不是就不滚动。

大致的思路是这样的，下面上源码

实现代码

文件名：tableAutoScroll.ts

interface ElType extends HTMLElement {

  timer: number | null

  isScroll: boolean

  curTableTopValue: number

}

export default {

  created(el: ElType) {

    el.timer = null

    el.isScroll = true

    el.curTableTopValue = 0

  },

  mounted(el: ElType, binding: { value?: { delay?: number } }) {

    const { delay = 15 } = binding.value || {}

    const tableDom = el.getElementsByClassName(

      'el-scrollbar__wrap'

    )[0] as HTMLElement

    const viewDom = el.getElementsByClassName(

      'el-scrollbar__view'

    )[0] as HTMLElement



    const onMouseOver = () => (el.isScroll = false)

    const onMouseOut = () => {

      el.curTableTopValue = tableDom.scrollTop

      el.isScroll = true

    }



    tableDom.addEventListener('mouseover', onMouseOver)

    tableDom.addEventListener('mouseout', onMouseOut)



    el.timer = window.setInterval(() => {

      const viewDomClientHeight = viewDom.scrollHeight

      const tableDomClientHeight = el.clientHeight



      if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {

        const curScrollPosition = tableDom.clientHeight + el.curTableTopValue

        el.curTableTopValue =

          curScrollPosition === tableDom.scrollHeight

            ? 0

            : el.curTableTopValue + 1

        tableDom.scrollTop = el.curTableTopValue

      }

    }, delay)

  },

  unmounted(el: ElType) {

    if (el.timer !== null) {

      clearInterval(el.timer)

    }

    el.timer = null



    const tableDom = el.getElementsByClassName(

      'el-scrollbar__wrap'

    )[0] as HTMLElement

    tableDom.removeEventListener('mouseover', () => (el.isScroll = false))

    tableDom.removeEventListener('mouseout', () => {

      el.curTableTopValue = tableDom.scrollTop

      el.isScroll = true

    })

  },

}

上面代码中，我在 created中初始化了三个变量，分别用于存储，定时器对象 、是否滚动判断、滚动当前位置。

在 mounted中我还获取了一个options，主要是为了可以定制滚动速度

用法

我这边是将自己的弄了一个批量注册，正常使用就像官网里面注册指令就可以了

在需要滚动的el-table上使用这个指令就可以

<!-- element 列表滚动指令插件 -->

<template>

  <div class="container">

    <el-table v-tableAutoScroll :data="tableData" height="300">

      <el-table-column prop="date" label="时间" />

      <el-table-column prop="name" label="名称" />

      <el-table-column prop="address" label="Address" />

    </el-table>

    <!-- delay：多少毫秒滚动一次 -->

    <el-table

      v-tableAutoScroll="{

        delay: 50,

      }"

      :data="tableData"

      height="300"

    >

      <el-table-column prop="date" label="时间" />

      <el-table-column prop="name" label="名称" />

      <el-table-column prop="address" label="Address" />

    </el-table>

  </div>

</template>



<script setup lang="ts">

import { ref, onMounted } from 'vue'

const tableData = ref<any>([])

onMounted(() => {

  tableData.value = Array.from(Array(100), (item, index) => ({

    date: '时间' + index,

    name: '名称' + index,

    address: '地点' + index,

  }))

  console.log('👉 ~ tableData.value=Array.from ~ tableData:', tableData)

})

</script>



<style lang="scss" scoped>

.container {

  height: 100%;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  gap: 100px;

  .el-table {

    width: 500px;

  }

}

</style>

上面这个例子，分别演示两种调用方法，带参数和不带参数

最后

做了这个工具之后，突然有很多思路，打算后面再做几个，做成一个开源项目，一个开源的vue3指令集

闲言少叙，直切正题。因为我喜欢命令式弹窗，所以就封装了它做为了业务代码的插件！如今在实际项目中跑了大半年，挺方便也挺灵活的！

如何使用

// vue2

npm install @e-dialog/v2



// main.js 入口文件

import Vue from 'vue'

import App from './App'



//导包

import eDialog from '@e-dialog/v2'

//注册插件

Vue.use(eDialog, {

 width:'50%',//全局配置

 top:'15vh',

 //...省略

})



new Vue({

  el: '#app',

  render: h => h(App)

})

// vue3

npm install @e-dialog/v3



// main.js 入口文件

import { createApp } from 'vue'

import App from './App.vue'

//导包

import eDialog from '@e-dialog/v3'



// 创建实例

const setupAll = async () => {

  const app = createApp(App)

  app.use(eDialog,{

     width:'50%',//全局配置

     top:'15vh',

     //...省略

  })

  app.mount('#app')

}



setupAll()

插件简介

vue2是基于element ui elDialog组件做的二次封装，vue3则是基于element-plus elDialog组件做的二次封装，属性配置这一块可以全部参考element UI文档！

扩展的属性配置

底部插槽用法

// index.vue

<template>

   <!-- vue2示例 -->

  <div>

    <el-button @click="handleDialog">弹窗</el-button>

  </div>

</template>



<script>

//弹窗内容

import Edit form './edit.vue'

export default {

  methods: {

    handleDialog() { 

      this.$Dialog(Edit, props,function(vm,next){

          //vm可以通过vm.formData拿到数据

      },{

        isBtn:false //如果定义了插槽，建议关闭底部操作按钮，不然会出现布局问题

        footer:function(h,next){

            return (

                <el-button onClick={()=>{this.handleCheck(next)}}>按钮</el-button>

            )

        }

      })

    },

    

    //按钮点击触发

    handleCheck(next){

        //next是一个手动关闭函数

        console.log('业务逻辑')

    }

  }

}

</script>

页面使用：vue2

// index.vue

<template>

   <!-- vue2示例 -->

  <div>

    <el-button @click="handleDialog">弹窗</el-button>

  </div>

</template>



<script>

//弹窗内容

import Edit form './edit.vue'

export default {

  methods: {

    handleDialog() { 

      /**

        * @function $Dialog是一个全局方法，自动挂载到了vue的原型

        * @description 它总共接收4个参数

        * @param 组件实例 | html字符串 

        * @param props要传递到组件的参数对象。

        * @param 点击确定按钮的回调，回调里面的第一个参数是弹窗内容的组件实例，第二个参数是关闭弹窗的执行函数

        * @param 配置对象，可以覆盖全局的配置

        * @return void

        */



      this.$Dialog(Edit, props,function(vm,next){

          //vm可以通过vm.formData拿到数据

      },{

          //配置对象

      })

    }

  

  }

}

</script>



//edit.vue

<template>

  <div>弹窗内容！</div>

</template>



<script>

export default {

  props:[/*这里可以接收$Dialog第二个参数props的数据*/]

  data() {

    return {

        formData:{

            a:'',

            b:'',

            c:''

        }

    }

  },

 

}

</script>

页面使用：vue3

// index.vue

<template>

   <!-- vue2示例 -->

  <div>

    <el-button @click="handleDialog">弹窗</el-button>

  </div>

</template>



<script setup>

//弹窗内容

import Edit form './edit.vue'

const { proxy } = getCurrentInstance();

const $Dialog = proxy.useDialog()



function handleDialog() {

      /**

        * @function $Dialog是一个全局方法，自动挂载到了vue的原型

        * @description 它总共接收4个参数

        * @param 组件实例 | html字符串 

        * @param props要传递到组件的参数对象。

        * @param 点击确定按钮的回调，回调里面的第一个参数是弹窗内容的组件实例，第二个参数是关闭弹窗的执行函数

        * @param 配置对象，可以覆盖全局的配置

        * @return void

        */



      $Dialog(Edit, props,function(vm,next){

          //vm可以通过vm.formData拿到数据

      },{

          //配置对象

      })

    }

</script>



//edit.vue

<template>

  <div>弹窗内容！</div>

</template>

<script setup>

const formData = reactive({

     a:'',

     b:'',

     c:''

})

defineExpose({ formData }) //这里注意一点要把外部要用的抛出去，如果不抛，则$Dialog回调将拿不到任何数据

</script>