antv-X6-Vue3总结03-Vue节点配置

最新推荐文章于 2025-03-12 17:39:29 发布

eadela

最新推荐文章于 2025-03-12 17:39:29 发布

阅读量5.8k

点赞数

文章标签：编辑器其他 git

本文链接：https://blog.youkuaiyun.com/eadela/article/details/121567986

版权

部分源代码：https://gitee.com/eadela/x6-example.git

channelReferral.vue 节点组件

<template>
  <!-- 多波次 -->
  <div class="node-box">
    <Icon type="cancel-questionnaire" class="icon" />
    <p> 渠道转介 </p>

    <div class="child">
      <Button type="text" @click="edit">
        编辑
      </Button>
      <Button type="text" @click="del" class="m-l-1">
        删除
      </Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
/*eslint-disable */
import { Icon, Button } from '@bairong/uxd-ui'
import { defineProps } from 'vue'

const props = defineProps({
  icon: {
    type: String
    // required: true
  },
  text: {
    type: String
    // required: true
  }
})

defineExpose({
  ...props
})

const edit = () => {
  console.log(123123)
}
const del = () => {
  console.log(456456)
}

/*eslint-disable */
</script>

<style scoped lang="less">
.child {
  width: 150px;
  min-height: 100px;
  background: #fff;
  position: absolute;
  left: 60px;
  top: 0;
  display: none;
}
.node-box {
  width: 64px;
  height: 64px;
  border: 1px solid #136fff;
  border-radius: 5px;
  background: #fff;
  text-align: center;
  padding-top: 6px;
  position: relative;
  &:hover {
    background: #136fff;
    color: #fff;
    .child {
      // display: block;
      color: #000;
    }
    .icon {
      color: #fff;
    }
  }
  .icon {
    font-size: 22px;
    color: #136fff;
  }
}
</style>

常量

// 所有节点组
export const ShapeComs = {
  HEEL_NODE: 'HeelNode', // 客群筛选
  SEC_SCREENING: 'SecScreening', // 二次筛选
  SEC_CREATE: 'SecCreate', // 二次筛选裂变产生 -- 特殊节点
  AB_TEST: 'AbTest', // AB测试
  AB_CREATE: 'AbCreate', // AB测试裂变产生  -- 特殊节点
  EXTERNAL_DATA: 'ExternalData', // 外部数据
  FINANCIAL_MANAGER: 'FinancialManager', // 理财经理
  MANUAL_OUTBOUND_CALL: 'ManualOutboundCall', // 人工外呼
  SHORT_MESSAGE