vue 系列 - 随笔分类 - pleaseAnswer

11｜使用 canvs 实现分离饼图

摘要：关键设计思想分离式饼图实现原理每个扇形沿中间角度方向外移用 progress 控制动画过渡（0→1 = 合并 → 分离）通过深度排序解决视觉重叠问题响应式设计尺寸基于画布大小动态计算支持设备像素比适配（Retina 屏优化）交互反馈机制扇形悬停：放大+变亮图例阅读全文

posted @ 2025-07-22 10:16 pleaseAnswer 阅读(31) 评论(0) 推荐(0)

10｜使用 three.js 实现立体饼图和分离立体饼图

摘要：认识 three.js Q：什么是 Three.js？ Three.js 是一个用于在浏览器中创建和渲染 3D 图形的 js 库。它建立在 WebGL 之上，提供了更易于理解和操作的 API，大大降低了创建复杂 3D 应用的难度。 Three.js 的主要功能： 3D 模型：创建、导入和操作复杂的阅读全文

posted @ 2025-07-22 10:14 pleaseAnswer 阅读(134) 评论(0) 推荐(0)

17_纯前端实现导出功能

摘要：js-xlsx 中文文档由 SheetJS 出品的 js-xlsx 是一款非常方便的只需要纯 JS 即可读取和导出 excel 的工具库，功能强大，支持格式众多，支持 xls、xlsx 等十几种格式工作类 1. 从数组（数组项为数组）创建工作表 const worksheet = XLSX.ut 阅读全文

posted @ 2024-06-11 11:30 pleaseAnswer 阅读(285) 评论(0) 推荐(0)

16_模板字符替换

摘要：实现效果选择对应模板，文案会自动填充到多行文本框，且可替换占位字符会高亮在替换编辑里，编辑替换占位字符可添加、编辑、删除模板具体操作流程及规则：点击活动公告-添加或某个活动编辑处；找到添加模板在模板界面可以随意添加或修改公告模板；也可以删除不再需要的模板或者在【具体模板】输入要添加的模阅读全文

posted @ 2024-01-08 10:36 pleaseAnswer 阅读(56) 评论(0) 推荐(0)

15_通过指令实现table行合并

摘要：实现效果组件前提 iview 3.x版本的 table 组件并没有实现表格合并的功能；模拟4.x版本通过表格配置实现本文通过指令实现 dom 操作字段说明 ld：表格数据来源 columns：表头 showData：展示列表 spanMsg：对象数组 [{ 0: 5, 5: 3 }, { 0: 阅读全文

posted @ 2024-01-08 10:34 pleaseAnswer 阅读(43) 评论(0) 推荐(0)

14_穿梭框决定下拉列表

摘要：实现效果需求说明客服分配设置-客服分组设置接待客服：选择客服为穿梭框样式左侧为系统账号 | 渠道主号下的所有子账号右侧为被分配到该分组的客服个别客服接待上限可多选客服，可选的范围为【接待客服】中右侧列表里的客服点击 “+ 添加” 添加一行数据选项互斥代码实现 <Form :mod 阅读全文

posted @ 2024-01-08 10:33 pleaseAnswer 阅读(52) 评论(0) 推荐(0)

13-点击页面其它地方触发某个事件

摘要：自定义指令实现（通过自定义指令实现对操作dom） <div class="ml-5 select-wrap"> <Button class="select-button" type="primary" icon="md-arrow-dropdown" v-click-outside="handdle 阅读全文

posted @ 2024-01-02 10:54 pleaseAnswer 阅读(27) 评论(0) 推荐(0)

12_v-html实现图片放大

摘要：1. 安装依赖 ```bash npm install v-viewer -S ``` 2. 全局引入 ```js // main.js import Viewer from 'v-viewer'; import 'viewerjs/dist/viewer.css'; Vue.use(Viewer) 阅读全文

posted @ 2023-07-14 17:52 pleaseAnswer 阅读(185) 评论(0) 推荐(0)

11_父组件调用子组件方法

摘要：父组件调用子组件的方法使用ref 使用变量+watch 使用中间class 使用中间class base-on-controller function receiveController(to, from) { Object.assign(to, from); } /* vue 混入模式 */ r 阅读全文

posted @ 2023-05-09 10:28 pleaseAnswer 阅读(65) 评论(0) 推荐(0)

⑦ 对话框类

摘要：对话框类 1 构造者函数+基本功能 class ListDataCls { /** 公共字段... **/ constructor(props) { Object.assign(this, props) } closeModal() {} resetData() {} openEditHandle( 阅读全文

posted @ 2023-02-09 14:27 pleaseAnswer 阅读(36) 评论(0) 推荐(0)

⑥ 表格类

摘要：表格类 1 构造者函数+基本功能 class ListDataCls { /** 公共字段... **/ constructor(config) { if (Reflect.has(config, 'isChart')) { this.isChart = false; // 是否有 chart th 阅读全文

posted @ 2023-02-09 14:26 pleaseAnswer 阅读(32) 评论(0) 推荐(0)

⑤ 查询条件动态生成

摘要：1 实现效果 2 单个查询框组件根据接口返回的 conditions_configs 字段动态生成查询框 ConditionOne 2.1 模板 <template>  <DatePicker2 v-if="data.type.includes('date')" v-mode 阅读全文

posted @ 2023-02-09 14:23 pleaseAnswer 阅读(65) 评论(0) 推荐(0)

⑩ 添加筛选条件

摘要：1 实现效果 2 应用 2.1 父组件调用模板 <template> <Row> <Form label-position="right" :label-width="80"> <Col span="24" v-for="(conditionItem, key, index) in otherCon 阅读全文

posted @ 2023-02-09 14:14 pleaseAnswer 阅读(68) 评论(0) 推荐(0)

⑨ 邮件预览效果

摘要：1 实现效果 2 组件代码 1. 模板代码 template <template> <template v-if="!noColor"> <ColorPicker v-model="colorData.color" size="small" :colors="colorData.colors"/> 阅读全文

posted @ 2023-02-09 11:58 pleaseAnswer 阅读(145) 评论(0) 推荐(0)

④ 版本② axios 封装

摘要：HttpRequestBase 类 1 构造函数 constructor(baseUrl) { const basePort = getUrlPort(baseUrl); this.baseUrl = baseUrl; this.baseUrlWithPort2 = baseUrl.replace( 阅读全文

posted @ 2023-02-09 11:48 pleaseAnswer 阅读(37) 评论(0) 推荐(0)

⑧ vue+echarts实现热词分析

摘要：1 依赖 "dependencies": { "echarts": "^4.0.4", "echarts-wordcloud": "^1.1.3", }, tip: echarts-wordcloud 现在有 2.0 和 1.x 两个版本，2.0 对应 echarts 5.x 版本 2 效果 3 实阅读全文

posted @ 2022-11-22 11:49 pleaseAnswer 阅读(1120) 评论(0) 推荐(0)

③ vue+ts 实现模拟知乎后台

摘要：第1章项目起航 1 项目起航需求分析 1.1 完美的 vue 实践项目是怎样的数据的展示 -- 最好是有多级复杂数据的展示数据的创建 -- 验证 | 上传 | 创建 & 编辑共享组件的抽象 -- 循序渐进的组件开发整体状态数据结构的设计和实现权限管理和控制真实的后端 api 1.2 阅读全文

posted @ 2022-09-13 20:17 pleaseAnswer 阅读(175) 评论(0) 推荐(0)

② 初识vue3.0：新特性讲解

摘要：1 vue3 新特性巡礼 1.1 性能提升打包减小初次渲染加快、更新加快内存使用减少得益于重写虚拟 DOM 的实现和 Tree shanking 的优化 1.2 Composition API ref 和 reactive computed 和 watch 新的生命周期函数自定义函数 -- 阅读全文

posted @ 2022-05-27 17:36 pleaseAnswer 阅读(93) 评论(0) 推荐(0)

① 你好ts：进入类型的世界

摘要：1 什么是 Typescript 1.1 编程语言的类型动态类型语言（js）数据类型检查发生在运行阶段静态类型语言（ts）数据类型检查发生在编译阶段 2 为什么要学习 typescript 2.1 ts 的优点程序更容易理解效率更高更少的错误包容性高完全兼容js 2.2 缺点增加阅读全文

posted @ 2022-05-27 17:24 pleaseAnswer 阅读(59) 评论(0) 推荐(0)

⑦ vue 项目开发配套工具

摘要：vue 项目开发配套工具 1 VueCLI 的使用和单文件组件 1.1 相关命令行安装node node -v 查看npm npm -v 安装nrm 使用镜像源安装依赖 npm i nrm -g 安装脚手架工具 npm i -g @vue/cli 创建项目 vue create demo 人工选择阅读全文

posted @ 2022-03-16 11:45 pleaseAnswer 阅读(274) 评论(0) 推荐(0)

随笔分类 - vue 系列