跳至主要內容
唐皓晨的博客

唐皓晨的博客

跨端修炼者

安装

组件库暂未上传 npm，目前通过项目本地打包使用

拉取项目

git clone https://github.com/2290774104/niuka.git
唐皓晨小于 1 分钟前端组件文档牛咔平台Vuevue3components
快速开始

本节将介绍如何在项目中使用牛咔组件

完整引入

如果对项目的加载速度和性能要求不高时，那么使用完整导入会更方便。

import 'niuka-components/style.css';
import NiukaComponents from 'niuka-components';

Vue.use(NiukaComponents);
唐皓晨小于 1 分钟前端组件文档牛咔平台Vuevue3components
image-view

牛咔视频平台图片预览插件

特性

  1. 使用 v-model 绑定图片列表
  2. 绑定 v-model 即可渲染组件
  3. 内置面板模式和卡片模式，传入 type 可以切换模式
  4. 内置组件可单独使用，自行引入 ImageCard，ImagePanel 组件
  5. 基于 vue2 版本封装，强依赖于 element-ui

引入

注意事项

本文使用的图片预览是 element 封装的image-viewer 组件，牛咔项目中因为组件引用问题无法使用，目前以dialog组件替代

唐皓晨大约 4 分钟前端组件文档牛咔平台Vuevue3components
niuka-steps

牛咔视频平台步骤条组件

特性

  1. 使用 active 绑定当前步骤
  2. 传入 steps 即可渲染组件
  3. 支持配置 icon 图标
  4. 基于 vue2 版本封装

引入

基础用法

设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。

配置 icon

可以在 steps 中配置 icon 字段来切换步骤中的图标

唐皓晨大约 2 分钟前端组件文档牛咔平台Vuevue3components
Switch 开关

牛咔视频平台带面板的开发组件

特性

  1. 使用 v-model 绑定选中标签的值
  2. 传入 info 即可渲染组件
  3. 可以通过 v-for 批量渲染，支持 sort 序号显示
  4. 支持 slot 显示备注信息
  5. 基于 vue2 版本封装，强依赖于 element-ui
  6. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx)。
唐皓晨大约 2 分钟前端组件文档牛咔平台Vuevue3components
css文本换行

使用 css 使得 div 内的文本多行显示

div {
  white-space: pre-wrap;
  word-wrap: break-word;
}
唐皓晨小于 1 分钟前端csscss
qiankun嵌入react项目报错

使用 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踩坑记录reactwebpack
Copyright © 2025 唐皓晨