牛咔视频平台图片预览插件
特性
- 使用 v-model 绑定图片列表
- 绑定 v-model 即可渲染组件
- 内置面板模式和卡片模式，传入 type 可以切换模式
- 内置组件可单独使用，自行引入 ImageCard，ImagePanel 组件
- 基于 vue2 版本封装，强依赖于 element-ui
引入
注意事项
本文使用的图片预览是 element 封装的image-viewer 组件，牛咔项目中因为组件引用问题无法使用，目前以dialog组件替代
大约 4 分钟
牛咔视频平台步骤条组件
特性
- 使用 active 绑定当前步骤
- 传入 steps 即可渲染组件
- 支持配置 icon 图标
- 基于 vue2 版本封装
引入
基础用法
设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。
配置 icon
可以在 steps 中配置 icon 字段来切换步骤中的图标
大约 2 分钟
牛咔视频平台带面板的开发组件
特性
- 使用 v-model 绑定选中标签的值
- 传入 info 即可渲染组件
- 可以通过 v-for 批量渲染，支持 sort 序号显示
- 支持 slot 显示备注信息
- 基于 vue2 版本封装，强依赖于 element-ui
引入
基础用法
绑定 v-model 记录开关的值，传入记录开关信息的 info
大约 2 分钟
使用 css 使得 div 内的文本多行显示
div {
white-space: pre-wrap;
word-wrap: break-word;
}小于 1 分钟
大约 3 分钟
使用 qiankun 集成项目时发现，接入 react 子应用会出现报错
解决方法
目前没有太好的解决方法，在 vite.config.ts 删除 react()
import { defineConfig } from 'vite';
// import react from '@vitejs/plugin-react';
import qiankun from 'vite-plugin-qiankun';
const { name } = require('./package');
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
base: mode === 'development' ? './' : '/app4',
plugins: [
// react(),
qiankun(name, { useDevMode: true }),
],
server: {
port: 8084,
},
};
});大约 4 分钟
使用 qiankun 集成 react18+vite 项目
基座项目
基座项目可见qiankun 示例
子应用改造
vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun
pnpm install vite-plugin-qiankun大约 9 分钟
问题描述
使用 vue3+vite 作为子应用，多次进入子应用，并使用浏览器回退历史记录的方法返回其他页面，会出现页面地址 undefined 的问题
解决方法
问题原因未知，实测在 qiankun 卸载钩子中卸载 vue 实例后，没有复现该问题
renderWithQiankun({
// ...
unmount() {
app.unmount();
},
});大约 1 分钟
问题描述
使用 vue3+vite 作为子应用时，切换其他子应用后再次进入时，会出现白屏子应用没有正常加载的现象，并且控制台出现警告信息
解决方法
问题原因为多次创建子应用实例，将createApp移动到 render 方法中
const render = (props: QiankunProps) => {
const app = createApp(App);
const { container } = props;
app.use(createPinia());
app.use(router);
app.use(ElementPlus);
app.mount(container ? container.querySelector('#app')! : '#app');
};小于 1 分钟
问题描述
基座应用和子应用均使用 vue3 搭建，并使用 vue 调试插件 vite-plugin-vue-devtools，嵌入时会出现插件冲突，并显示以下报错
解决方法
只需要在子应用的 vite.config.ts 中注释插件即可
export default defineConfig(({ mode }) => {
return {
plugins: [
vue(),
vueJsx(),
// vueDevTools(),
qiankun(name, { useDevMode: true }),
],
// ...
};
});大约 4 分钟