0.0.21 • Published 2 years ago

fish-simple v0.0.21

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

fish-simple

项目描述

一个可以用于vue,原生js的鱼骨图库

项目

前置相关知识

在父项目中我们应该如何安装和使用他们呢？

如何安装

使用  npm install fish-vue-simple
or    yarn add fish-vue-simple

页面中如何引用组件

<!-- 第一种方法 -->
<template>
  <div id="asdpp">
  <div class="fishMaps">
    <fish-vue-simple></fish-vue-simple>
  </div>

</template>

<script>
import fishVueSimple from 'fish-simple'

export default {
  components:{
    fishVueSimple
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.fishMaps{
  width: 1000px;
  height: 600px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #666;
border-radius: 4px;
}
</style>
<!-- 第二种方法 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/fish-simple/public/fish.js"></script>
    <style>
      #fish {
        width: 800px;
        height: 300px;
        box-sizing: border-box;
        border: 1px solid #666;
        border-radius: 4px;
      }
    </style>
  </head>

  <body>
    <div id="fish"></div>
    <script>
      new simpleFish({
        id: "fish",
        eachLen:'10',
        click:e=>{
          console.log(e)
        }
      });
    </script>
  </body>
</html>

**特殊参数***

如果该组件只作为vue子组件传入时不需要传入id值，使用第二种方法引入时请传入需要挂载的dom对应的id值

组件传参介绍

鱼骨图点击事件

FishData 推荐

let fishData = [
  {
    id: 1,
    name: "1",
    state: 0,
    children: [
      {
        id: 1 - 1,
        name: "1-1",
        state: 0,
        children: [
          { id: 1 - 1 - 1, name: "1-1-1", state: 0 },
          { id: 1 - 1 - 2, name: "1-1-2", state: 0 },
          { id: 1 - 1 - 3, name: "1-1-3", state: 0 },
        ],
      },
    ],
  },
];

联系地址

朋友们如果有问什么问题或者需求可以到好地方这里来和我联系

更新日志

  1. 0.0.1 初次完成一个 vue 鱼骨图库
  2. 0.0.4 完成文档的初级编写
  3. 0.0.12 解决使用以及引用 bug
  4. 0.0.14 增加鱼骨图的 click 和 hover 事件，增加可以改变鱼骨图的颜色
  5. 0.0.15 支持背景颜色的透传，改写鱼骨头的鱼头和鱼尾
  6. 0.0.16 增加联系方式
  7. 0.0.17 完成原生 js 的组件的扩展,并且原生 js 文件的暴露
  8. 0.0.21 丰富readme,改名字
core-jsvue
@everything-registry/sub-chunk-1676@infinitebrahmanuniverse/nolb-fish
0.0.21

2 years ago