qq_41548644的博客

之前系统富文本编辑器为百度的 UEditor， 但该项目已停止维护多年，存在开发风险，因此使用 TinyMce 来替换和扩展业务功能。一、Demo 演示二、封装步骤1、安装 tinymce-vue注：Vue 2.x 下载 3.x 版本的 tinymce-vue，Vue 3 下载 4.x 版本的 tinymce-vue ，本文为 Vue 2.x 项目yarn add @tinymce/tinymce-vue@3.2.02、封装字体类型配置const fontFormats = ` .

一、需求说明视频自动播放且循环播放前 3 秒效果如下：二、实现 Demo安装 vue-video-player 依赖yarn add vue-video-player完整代码：<template> <video-player ref="videoPlayer" class="video-player-box" :options="playerOptions" @timeupdate="onPlayerTimeupdate($even

一、需求说明Table 内容为树形结构，但需要合并收费项目重复列，具有子项的项目可展开和收起。如图：二、遇到问题1、表格数据格式[{ id: 1, name: '篮网', item: '投篮(%)', value: Number.parseInt(Math.random() * 100), children: [{ id: 311, name: '詹姆斯·哈登', item: '投篮(%)', value: N

一、安装 egg-ossnpm install egg-oss --save二、配置 oss1、开启 oss 插件// config/plugin.jsexports.oss = { enable: true, package: 'egg-oss',};2、填写 oss bucket 信息// config/config.default.jsconfig.oss = { client: { bucket: 'your bucket name', region

一、概述stylelint 自 2015 年诞生以来，已被越来越多项目用于规范 CSS 及其预处理语言编写（如 bootstrap，ant-design 等） 。作为一个强大、现代的代码检查工具，在项目中能避免样式代码错误以及强制执行代码约定风格，具体内容可参考印记中文团队维护的 stylelint 中文网。二、在 Vue 项目中使用 Stylelint1、安装 stylelint、stylelint-order、stylelint-config-standard其中，stylelint 是运行工

一、需求说明业务需要对数据进行核对，要求 Table 单元格具备悬停光标聚光灯效果，方便用户找到对应项（提高系统逼格）。如图：二、实现思路1、通过 cell-mouse-enter 方法获取悬停单元格坐标，坐标信息来源于 cell-class-name 属性方法补充。cellMouseEnter (row, column) { this.hoverRowIndex = row.rowIndex this.hoverColumnIndex = column.columnIndex}2、

日常工作中，UI 库中 单选/多选 组件并不一定非常符合业务需求。这时候，不妨自己动手搞一个。单选思路选中标识值与对象标识匹配时（本例使用索引），给所在标签添加选中样式；点击标签时，更改选中标识值。代码：<template> <ul> <li v-for="(city, index) in cityList" :key="index" :class="{ checked: index === checkedIndex

Element UI 之 Tabs 栏下拉菜单的实现产品小姐姐有一个业务需求，Tabs 组件某个 Tab 为 下拉菜单，效果如下：业务代码比较多，这里弄了一个小 Demo，以供参考，效果如下：一、思路通过 el-tab-pane 的 name 值判断为是否指定下拉 tab 栏然后利用组件提供的具名 slot 嵌入 el-dropdown 组件在 el-dropdown 中通过双向绑定，实现单选或多选（PS: 多选实现，需要设置菜单隐藏方式。涉及样式代码较多，本文没有弄这一步）二、完整