跳至主要內容
Vue echarts封装

做大屏的时候经常会遇到 echarts 展示,下面展示在 Vue2.7 / Vue3 中对 echarts (^5.4.0) 的简单封装。

样例查看

echarts 封装使用

props 说明

参数 说明 类型 可选值 默认值
opts 初始化传入的 opts https://echarts.apache.org/zh/api.html#echarts.init Object - {renderer: 'svg'}
options 配置项,对应 https://echarts.apache.org/zh/option.html#title Object - {}
seriesData series 数据配置内容https://echarts.apache.org/zh/option.html#series,数据变更自动更新 Array - []
intervalTime 自动切换的时间跨度,指自动切换 高亮 + tooltip 展示,例子 Number - 1500
autoPlay 是否自动播放,指的是是否自动添加切换 高亮 + tooltip 展示 Boolean - true
isAddOn 是否自动添加鼠标上移事件,切换 高亮 + tooltip 展示的时候,鼠标再移动到其他需要高亮显示上时,自动停止切换动画,鼠标移开自动继续播放 Boolean - true

fxss原创大约 8 分钟Vueecharts
web 签字板实现

签字板 主要适用于 电子签名,比如购买贵重物品的时候,可能就需要使用电子签名。使用效果可点击查看,可以直接在上面进行手动签名,拿到签名信息后保存到服务器端。

签字板组件主要是基于 signature_pad 封装的,canvas 去除周边留白是基于 trim-canvas


fxss原创大约 5 分钟Vue签字板
微前端qiankun Vue应用间通信的思考

注意:文中的父应用和主应用只是名称不同,但都指主应用基座。

之所以会有这个思考,是因为看了一篇文章 基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇 ,其中有介绍使用 Shared 通信,精辟之处在于

// micro-app-vue/src/main.js
//...

/**
 * 渲染函数
 * 主应用生命周期钩子中运行/子应用单独启动时运行
 */
function render(props = {}) {
  // 当传入的 shared 为空时,使用子应用自身的 shared
  // 当传入的 shared 不为空时,主应用传入的 shared 将会重载子应用的 shared
  const { shared = SharedModule.getShared() } = props;
  SharedModule.overloadShared(shared);

  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",
    mode: "history",
    routes,
  });

  // 挂载应用
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount("#app");
}

fxss原创大约 14 分钟Vueqiankun
ant-design-vue select 使用汇总

最近使用ant-design-vue,在使用select的时候遇到一些特殊情况,特此做一下整理汇总。

首先实例中的下拉选中为:

const options = [
  {
    name: '北京',
    id: '00001',
    spell: 'beijing',
    simpleSpell: 'bj'
  },
  {
    name: '上海',
    id: '00002',
    spell: 'shanghai',
    simpleSpell: 'sh'
  },
  {
    name: '广东',
    id: '00003',
    spell: 'guangdong',
    simpleSpell: 'gd'
  },
  {
    name: '深圳',
    id: '00004',
    spell: 'shenzhen',
    simpleSpell: 'sz'
  },
  {
    name: '重庆',
    id: '00005',
    spell: 'chongqing',
    simpleSpell: 'cq'
  },
  {
    name: '西安',
    id: '00006',
    spell: 'xian',
    simpleSpell: 'xa'
  }
]

fxss原创大约 2 分钟Vueant-design-vue
Vue Sentry 搭建前端异常监控系统

Sentry账号及SDK语言选择

  1. 注册账号:https://sentry.io/for/vue/
  2. 选择平台:Sentry通过官方的Sentry SDK与许多不同的语言和平台集成。本项目选择 Vue 。

安装Sentry SDK

  1. 安装Sentry的浏览器JavaScript SDK:@sentry/browser : yarn add @sentry/browser 或者 npm install @sentry/browser ,之后@sentry/browser 将报告通过应用程序捕获触发的任何异常,Vue 主要 config.errorHandler 钩子报告的。

  2. 还需要安装 @sentry/integrations: yarn add @sentry/integrations 或者 npm install @sentry/integrations


fxss原创大约 2 分钟VueSentry
Nuxt.js 部署

本篇文章主要用于记录一次 Nuxt.js 部署失败的问题,原来本博客系统的移动端 樊小书生的博客 部署在 9000 端口,这次打算更换为 8088 端口,结果按照官方的 服务端渲染应用部署 一直报 This page could not be found 的问题,试了好多次重新部署都没有作用。


fxss原创小于 1 分钟VueNuxt
2
3