② vue accumulate - 随笔分类 - 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 实现效果 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)

⑧ 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-seamless-scroll实现无缝滚动

摘要：1. 安装 cnpm install vue-seamless-scroll -s 2. 在main.js中引入 // 无缝滚动插件 import scroll from 'vue-seamless-scroll' Vue.use(scroll) 3. 在vue的组件使用 <div v-if="po 阅读全文

posted @ 2021-09-16 12:09 pleaseAnswer 阅读(515) 评论(0) 推荐(0)

⑤ elementui 使用字符填充table空白表格项

摘要：<el-table-column v-for="col in tableColumns.filter(coloum => checkList.indexOf(coloum.label) !== -1)" :key="col.label+col.prop" :prop="col.prop" :labe 阅读全文

posted @ 2020-12-08 16:52 pleaseAnswer 阅读(668) 评论(0) 推荐(0)

④ keep-alive缓存组件，操作之后需要重新获取数据--activated

摘要：应用场景： 1 从列表页 -> 详情页 -> 列表页时，要保持列表页在原来的页面 <keep-alive> <router-view v-if="$route.meta.keepAlive"/> </keep-alive> <router-view v-if="!$route.meta.keepAl 阅读全文

posted @ 2020-12-02 20:53 pleaseAnswer 阅读(570) 评论(0) 推荐(0)

③ 如何在vue中请求第三方数据--axios

摘要：1 axios → 基于Promise对象 → async & await 2 create阶段 → 返回Promise对象 → 返回的数据可以直接解构【数据处理】要写入实例的数据（即页面渲染使用的数据），需要用配置参数data接收 3 import axios from 'axios'; 4 多阅读全文

posted @ 2020-12-02 13:33 pleaseAnswer 阅读(338) 评论(0) 推荐(0)

② vue如何定义一个过滤器

摘要：filters: { parseType(val) { return val 1 ? '现场招聘会' : '网络招聘会' } } <el-table-column label="招聘会类型" width="150" align="center" > <template slot-scope="sco 阅读全文

posted @ 2020-12-01 10:26 pleaseAnswer 阅读(202) 评论(0) 推荐(0)

① vue数据改变页面不刷新

摘要：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 <div id="app"> {{score}} <div @click="changeScore">{{namelist}}</div> </div> data: { return { score:{ chinese:100, engl 阅读全文

posted @ 2020-11-17 17:33 pleaseAnswer 阅读(620) 评论(0) 推荐(0)

① 单点登录

摘要：1 概念单点登录SSO就是在一个多系统共存的环境下，用户的一次登录能得到其他系统的信任 2 使用独立登录系统实现单点登录用户中心：不处理业务逻辑，只处理用户信息的管理以及授权给第三方应用。第三方应用需要登录时，则要把用户的登录请求转发给用户中心处理，用户处理完返回凭证利用用户中心的 token 阅读全文

posted @ 2020-08-27 11:06 pleaseAnswer 阅读(390) 评论(0) 推荐(0)

随笔分类 - vue 系列 / ② vue accumulate