youyu-ui

介绍

简易发 npm 包的项目，作为个人组件库。

软件架构

1. 源码于 gitee 地址：https://gitee.com/lieqiyouyu/youyu-ui 中的 src/examples 为使用示例

安装教程

1. 安装依赖 :

npm i youyu-ui

2. vue 项目中入口文件中使用 :

import YouyuUi from 'youyu-ui'
import "../node_modules/youyu-ui/youyu-ui.css"
Vue.use(YouyuUi)

3. 组件介绍 :

1.drap-split-layout 拖拽左右布局组件

1. 是否默认显示拖拽按钮，受传入字属性 dragBtnFlag，默认为 true 显示；不显示传递 :dragBtnFlag="false" 即可
2. 支持 iframe 拖拽过快失焦解决方案，默认不开启，通过传入 :iframeIsHave="true", 开启支持 iframe
3. 支持配置项，如最小宽度、拖拽按钮样式

使用示例及说明：

<drap-split-layout
   :dragBtnFlag="false"
   :iframeIsHave="true"
   :setCssProps="setCssProps"
></drap-split-layout>

# 以组件内要接收的props来看需要传入的配置项
props: {
    // 是否默认显示拖拽按钮
    dragBtnFlag: {
      typeof: Boolean,
      default: true,
    },
    // 盒子中是否有iframme
    iframeIsHave: {
      typeof: Boolean,
      default: false,
    },
    // 配置项 注意：色值暂时只支持16进制写法(原因是我们下面简单写了个正则匹配，也可以自己添加一个rgba转16进制的方法)
    setCssProps: {
      typeof: Object,
      default: () => ({
        // 左右盒子最小拖动宽度
        leftMinWidth: "200px",
        rightMinWidth: "500px",
        dragBtnCss: {
          mousedown: {
            background: "#919191",
          },
          onmouseup: {
            background: "#d6d6d6",
          },
        },
      }),
    },
  }

使用说明

1. 此组件库为个人平时会把项目中写过的经过封装提纯后发布作为自己的组件包
2. 目前比较简易，慢慢补充中...