1.0.134 • Published 3 years ago

qrelation v1.0.134

Weekly downloads
102
License
ISC
Repository
-
Last release
3 years ago

调用示例

示例地址:https://zhicheng99.github.io/qrelation/

<template>
	<div>
		<div class="lay">
			<qrelation
			v-bind:init-width="'1000'"
			v-bind:init-height="'1000'"
			v-bind:json-data="jsonData"
			v-bind:save-fun="save"
			></qrelation>
		</div>
	
	</div>
</template>
<script>
	import qrelation from 'qrelation';
	export default{
		components:{
			qrelation
		},
		props:[],
		data(){
			return {
				jsonData:[
						{
							node:[
								{	
									id:1,     //节点的唯一标识 也有于连线的起终点标识
									nodeId:1, //初始化生成后对应相应的节点对象id 每次都会变
									nodeType:'container',  //容器类型
									x:100,
									y:200,
									text:'容器标题',
									width:230,
									height:160,
									grid:[2,2], //行 列
									child:[

										//容器里的节点不需要坐标  根据grid自动生成
										{	
											id:2,
											nodeType:'node',
											text:'我是容器里的1',
											attr:{
												color:'red'
											}
										},
										{	
											id:3,
											nodeType:'node',
											text:'我是容器里的2',
											attr:{
												color:'red'
											}
										},
										{	
											id:5,
											nodeType:'node',
											text:'我是容器里的3',
											attr:{
												color:'red'
											}

										}

									],
									attr:{
										 titlePosition:'top-center',
										 color:'red', //标题文字的颜色
										 borderColor:'red', 
										 fillColor:'',
										 dashed:false, 
									}
								},
								{	
									id:4,
									nodeType:'node', //普通节点
									x:200,
									y:50,
									text:'标题1',
									attr:{
										 borderColor:'red', 
										 color:'red', 
										 fillColor:'',
										 dashed:true, 
									}
								},
								{	
									id:6,
									nodeType:'node', //普通节点
									x:350,
									y:50,
									text:'标题2',
									attr:{
										 borderColor:'red', 
										 color:'red', 
										 fillColor:'',
										 dashed:true, 
									}
								}

							],
							link:[	 //连线关系  
								{
									fromId:1,
									toId:4,
									attr:{
										text:'连线关系1',
										like:'->'
									}
								},
								{
									fromId:4,
									toId:5,
									attr:{
										text:'连线关系2',
										like:'->'
									}
								}
							] 
						}
				]
			}
		},
		methods:{

			save:function(v){
				console.log(v);
			}

		},
		mounted(){

		},
		created(){
			
		},
		computed:{

		},
		watch:{

		}
	}

</script>
<style scoped>
.lay{
	width: 1000px;
	margin:0 auto;
}

</style>
1.0.134

3 years ago

1.0.133

3 years ago

1.0.132

3 years ago

1.0.131

3 years ago

1.0.130

4 years ago

1.0.129

4 years ago

1.0.128

4 years ago

1.0.125

4 years ago

1.0.127

4 years ago

1.0.126

4 years ago

1.0.121

4 years ago

1.0.123

4 years ago

1.0.122

4 years ago

1.0.124

4 years ago

1.0.120

4 years ago

1.0.119

4 years ago

1.0.118

4 years ago

1.0.117

4 years ago

1.0.116

4 years ago

1.0.109

4 years ago

1.0.110

4 years ago

1.0.112

4 years ago

1.0.111

4 years ago

1.0.114

4 years ago

1.0.113

4 years ago

1.0.115

4 years ago

1.0.107

4 years ago

1.0.106

4 years ago

1.0.108

4 years ago

1.0.105

4 years ago

1.0.104

4 years ago

1.0.103

4 years ago

1.0.102

5 years ago

1.0.101

5 years ago

1.0.100

5 years ago

1.0.99

5 years ago

1.0.98

5 years ago

1.0.97

5 years ago

1.0.96

5 years ago

1.0.95

5 years ago

1.0.94

5 years ago

1.0.93

5 years ago

1.0.92

5 years ago

1.0.91

5 years ago

1.0.90

5 years ago

1.0.88

5 years ago

1.0.89

5 years ago

1.0.87

5 years ago

1.0.86

5 years ago

1.0.85

5 years ago

1.0.84

5 years ago

1.0.83

5 years ago

1.0.82

5 years ago

1.0.81

5 years ago

1.0.80

5 years ago

1.0.79

5 years ago

1.0.78

5 years ago

1.0.77

5 years ago

1.0.75

5 years ago

1.0.73

5 years ago

1.0.74

5 years ago

1.0.72

5 years ago

1.0.71

5 years ago

1.0.70

5 years ago

1.0.69

5 years ago

1.0.68

5 years ago

1.0.67

5 years ago

1.0.66

5 years ago

1.0.65

5 years ago

1.0.64

5 years ago

1.0.63

5 years ago

1.0.62

5 years ago

1.0.61

5 years ago

1.0.60

5 years ago

1.0.59

5 years ago

1.0.58

5 years ago

1.0.57

5 years ago

1.0.56

5 years ago

1.0.48

5 years ago

1.0.47

5 years ago

1.0.46

5 years ago

1.0.45

5 years ago

1.0.49

5 years ago

1.0.51

5 years ago

1.0.50

5 years ago

1.0.55

5 years ago

1.0.54

5 years ago

1.0.53

5 years ago

1.0.52

5 years ago

1.0.44

5 years ago

1.0.43

5 years ago

1.0.42

5 years ago

1.0.41

5 years ago

1.0.39

5 years ago

1.0.40

5 years ago

1.0.38

5 years ago

1.0.37

5 years ago

1.0.36

5 years ago

1.0.35

5 years ago

1.0.33

5 years ago

1.0.34

5 years ago

1.0.32

5 years ago

1.0.31

5 years ago

1.0.30

5 years ago

1.0.29

5 years ago

1.0.28

5 years ago

1.0.27

5 years ago

1.0.26

5 years ago

1.0.25

5 years ago

1.0.24

5 years ago

1.0.23

5 years ago

1.0.22

5 years ago

1.0.19

5 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.21

5 years ago

1.0.20

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago