T-web-atom-components NPM

前端组件库 t-web-atom-components

1、基础组件库结构

src ：源文件目录

组建、指令、混入实现、工具 等等

lib ：输出目录

打包输出目录

demo ：实例目录

运行demo，可以直接通过vue-cli3+版本运行组件
命令：vue serve

2、Install

npm install t-web-atom-components -S

3、组件库用法

1）UploadImage 上传图片组件

作用：支持H5input标签上传、微信上传、tc APP

1、使用方式：
import UploadImage from "t-web-atom-components/lib/uploadImage"
或者
import { UploadImage } from "t-web-atom-components"
Vue.use(UploadImage);

2、组件中应用
<UploadImage :config="config" @success="handleSuccess" @error="handleError" >
</UploadImage>

3、配置：
config: {
    type: "",         //type: input|wx|tcApp,input: H5原生，wx: 微信上传,tcApp：tc App
    multiple: false,  //是否多选
    imgQuality: 1,    //图片压缩质量，
    max: 9,           //最对选几张
    action: "",       //上传地址
}

4、上传成功回调：handleSuccess
    input 返回一个图片base64的数组；
    wx 返回上传到wx服务器的serverId数组;
    成功回调数据格式
    {
        data:[]
    }

5、上传失败回调：handleError
    失败回调格式：
    {   
        type: "openError",            //错误类型
        message: "input open error",  //错误消息
        extend: {}                    //扩展字段
    }

2）TreeSelect 层级选择树

作用：层级选择树,支持单选或者多选

1、使用方式：
注意：本组件基于elementui中的一些基础组件（如下引用），如果框架中全局引入过element-ui样式，则无需单独引入css否则需要引入以下几个css：
import 'element-ui/lib/theme-chalk/dropdown.css';
import 'element-ui/lib/theme-chalk/dropdown-menu.css';
import 'element-ui/lib/theme-chalk/select.css';
import 'element-ui/lib/theme-chalk/option.css';
import 'element-ui/lib/theme-chalk/tree.css';
import 'element-ui/lib/theme-chalk/input.css';
import TreeSelect from "t-web-atom-components/lib/treeSelect"
或者
import { TreeSelect } from "t-web-atom-components"
Vue.use(TreeSelect);

2、组件中应用
单选树型组件：
<TreeSelect v-model="dept" :clearable="true" :data="root" 
    :props="{ label: 'text' }">
</TreeSelect>
多选树型组件：
<TreeSelect v-model="depts" :clearable="true" :data="root" 
    :props="{ label: 'text' }" :multiple="true">
</TreeSelect>

3、数据结构
{
    "children": [
        {
            "children": [],
            "id": "12148",
            "text": "数科基础架构小组",
            "parentId": "9323"
        },
    ],
    "id": "9323",
    "text": "数科平台架构组",
    "parentId": "6181"
}

3）Edges 和 NodeBlock 画板

1、使用方式
import NodeBlock from "t-web-atom-components/lib/nodeBlock";
import Edges from "t-web-atom-components/lib/edges";
或者
import { NodeBlock,Edges } from "t-web-atom-components";
Vue.use(NodeBlock);
Vue.use(Edges);

2、组件中应用(具体见demo中使用)
<NodeBlock
    class="block"
    :ref="`nodeBlock_${index}`"
    :key="nodeBlock.data.nodeId"
    :x="nodeBlock.x"
    :y="nodeBlock.y"
    :nodeBlockWidth="nodeBlockWidth"
    :nodeBlockHeight="nodeBlockHeight"
    :nodeTypeName="getNodeTypeName(nodeBlock.data.nodeType)"
    :toNodeOptions="toNodeOptions"
    :initialNode="nodeBlock.data"
    :linking="linking"
    @updatePosition="updateNodePosition(index, $event)"
    @stopMove="saveScenario"
    @deleteNode="deleteNode(index)"
    @editNode="editNode(index)"
    @copyNode="copyNode(index)"
    @linkingStart="linkingStart(index, $event)"
    @linkingStop="linkingStop(index, $event)"
    @mouseEnterDstSlot="mouseEnterDstSlot(index, $event)"
    @mouseLeaveDstSlot="mouseLeaveDstSlot(index)"
/>
<Edges
    :edges="filteredEdges"
    :nodeBlockWidth="nodeBlockWidth"
    :nodeBlockHeight="nodeBlockHeight"
    :linkingEdge="linkingEdge"
/>

NodeBlock 属性（用法可参见demo）

属性	说明
x	相对于画布x轴坐标
y	相对于画布y轴坐标
nodeBlockWidth	节点宽度
nodeBlockHeight	节点高度
nodeTypeName	节点类型名称
toNodeOptions	能作为子节点的配置（如：起始节点不能作为子节点）
initialNode	初始值
linking	连线中
@updatePosition	更新节点位置回调
@stopMove	停止移动节点回调
@deleteNode	删除节点回调
@editNode	编辑节点回调
@copyNode	复制节点回调
@linkingStart	开始连线回调
@linkingStop	结束连线回调
@mouseEnterDstSlot	鼠标移到节点上回调
@mouseLeaveDstSlot	鼠标移除节点回调

Edges 属性（用法可参见demo）

属性	说明
edges	渲染线的数组
nodeBlockWidth	节点宽度，作用：计算线的转角位置
nodeBlockHeight	节点高度，作用：计算线的转角位置
linkingEdge	牵出线和节点信息

4、vue指令用法

1、按需注入指令
new VDirective(['copy','long-press','click-outside','debounce','throttle'],Vue);
2、注入全部指令
new VDirective('*',Vue);
3、指令详情
    1）copy： 复制指令 v-copy="copye"
    2）long-press：长按指令  v-long-press = "longPress" 
    3）click-outside: 点击其他位置,不是本组件的任何位置 
       v-click-outside.mousedown.capture = "clickOutSide" 
    4）debounce: 防抖指令 v-debounce="[事件名('debounce'),500]" 
    5）throttle: 节流指令 v-throttle="[事件名('throttle'),500]"

audio 使用说明

<template>
  <div style="margin-top: 100px;">
      <TcAudio 
        ref="audio"
        :audioSrc="audioSrc"        //播放音频源地址，需要支持断点续传，音频状态返回 206
        :className="'myaudio'"      //自定义 class 可修改样式
        :speedList="[1,2,3,4,5]"    //播放速度
        :autoplay="true"            //如果出现该属性，则音频在就绪后马上播放。chrome浏览器限制，可能设置无效
        @emptied="emptied"          //播放出现异常
        @stalled="stalled"          //未能正常加载
        @waiting="waiting"          //正在加载
        @play="play"                //开始播放回调
        @pause="pause"              //暂停播放回调
        @ended="ended"              //音频播放完成
        ></TcAudio>
        <button @click="setPlay">播放</button>
        <button @click="setPause">暂停</button>
        <button @click="setCurTime">设置播放时间点</button>
        <button @click="setVolume">设置播放声音</button>
  </div>
</template>

<script>
import Vue from "vue";
import TcAudio from '../../src/components/audio';
Vue.use(TcAudio);

export default {
    data(){
        return {
            audioSrc:'https://file.40017.cn/tcservice/temp/test.m4a'
        }
    },
    methods:{
        /**
         * 播放出现异常
         */
        emptied(data){
            console.log(data)
        },
         /**
         * 未能正常加载
         */
        stalled(data){
            console.log(data)
        },
        
        /**
         * 正在加载
         */
        waiting(data){
            console.log(data)
        },
        /**
         * 开始播放回调
         */
        play(data){
            console.log(data)
        },
        
        /**
         * 暂停播放回调
         */
        pause(data){
            console.log(data)
        },

        /**
         * 音频播放完成
         */
        ended(data){
            console.log(data)
        },
        
        /**
         * 设置播放的位置
         */
        setCurTime(){
            this.$refs.audio.setCurTime(100)
        },

         /**
         * 设置音量, 音量范围：0-1
         */
        setVolume(){
            this.$refs.audio.setVolume(0.2)
        },

        /**
         * 播放
         */
        setPlay(){
            this.$refs.audio.setPlay()
        },

         /**
         * 暂停
         */
        setPause(){
            this.$refs.audio.setPause()
        }
    }
}
</script>

saas商业化页面基础组件

MainMenu - 左侧菜单栏
MainHeader - 页面顶部栏
MainTags - 子页面标签栏
MainBreadcrumb - 面包屑

// 注意：组件内统一使用inject访问外部模块，在App.vue中，使用provide为组件提供外部依赖
{
    ...
    provide() {
        return {
            pubsub: pubsub,
            menuBll: menuBll,
            topic: topic,
            globalInfo: globalInfo,
            adminOrigin: adminOrigin,
            HIDE_TAGS_ROUTE: [
                '/404',
                '/homepage/Announcement',
                '/homepage/Index',
                '/Robot/Index',
                '/Robot/DialogFlow/Design',
                '/CCT/Index',
                '/rtc/Load'
            ]
        };
    },
    ...
    
}

MainMenu - 左侧菜单栏

使用方式

import MainMenu from 't-web-atom-components/lib/saas/mainMenu';
import 't-web-atom-components/lib/css/saas/mainMenu.css'

<template>
    ...
    <MainMenu v-if="!isMicroApp" />
    ...
</template>

MainHeader - 页面顶部栏

使用方式

import MainMenu from 't-web-atom-components/lib/saas/mainHeader';
import 't-web-atom-components/lib/css/saas/mainHeader.css'

<template>
    ...
    <MainHeader></MainHeader>
    ...
</template>

MainTags - 子页面标签栏

使用方式

import MainMenu from 't-web-atom-components/lib/saas/mainTags';
import 't-web-atom-components/lib/css/saas/mainTags.css'

<template>
    ...
    <MainTags></MainTags>
    ...
</template>

MainBreadcrumb - 面包屑

使用方式

import MainMenu from 't-web-atom-components/lib/saas/mainBreadcrumb';
import 't-web-atom-components/lib/css/saas/mainBreadcrumb.css'

<template>
    ...
    <MainBreadcrumb></MainBreadcrumb>
    ...
</template>

App.vue示例

<template>
<el-container class="app">
    <div class="app-container">
        <MainHeader></MainHeader>

        <el-container :class="{ microAppheight: !isMicroApp }">
            <MainMenu v-if="!isMicroApp" />
            <div class="page-content">
                <MainTags />
                <div class="app-main">
                    <MainBreadcrumb />
                    <keep-alive>
                        <router-view
                            v-if="isNeedRefresh"
                            class="router-view-content"
                            :key="new Date().getTime()"
                        ></router-view>
                        <router-view v-else class="router-view-content"></router-view>
                    </keep-alive>
                </div>
            </div>
        </el-container>
    </div>
</el-container>
</template>
<script>
...
import MainTags from 't-web-atom-components/lib/saas/mainTags';
import MainMenu from 't-web-atom-components/lib/saas/mainMenu';
import MainHeader from 't-web-atom-components/lib/saas/mainHeader';
import MainBreadcrumb from 't-web-atom-components/lib/saas/mainBreadcrumb';
import 't-web-atom-components/lib/css/saas/mainTags.css'
import 't-web-atom-components/lib/css/saas/mainMenu.css'
import 't-web-atom-components/lib/css/saas/mainHeader.css'
import 't-web-atom-components/lib/css/saas/mainBreadcrumb.css'
...

export default {
    name: 'app',
    provide() {
        return {
            pubsub: pubsub,
            menuBll: menuBll,
            topic: topic,
            globalInfo: globalInfo,
            adminOrigin: adminOrigin,
            HIDE_TAGS_ROUTE: [
                '/404',
                '/homepage/Announcement',
                '/homepage/Index',
                '/Robot/Index',
                '/Robot/DialogFlow/Design',
                '/CCT/Index',
                '/rtc/Load'
            ]
        };
    },
    ...    
}
</script>