66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
import PropTypes from '../../_util/vue-types';
|
||
import { generateData, calcTotal } from './util';
|
||
|
||
const Gen = {
|
||
props: {
|
||
x: PropTypes.number.def(20),
|
||
y: PropTypes.number.def(18),
|
||
z: PropTypes.number.def(1),
|
||
},
|
||
data() {
|
||
return {
|
||
nums: '',
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
this.$refs.x.value = this.x;
|
||
this.$refs.y.value = this.y;
|
||
this.$refs.z.value = this.z;
|
||
const vals = this.getVals();
|
||
this.$emit('gen', generateData(vals.x, vals.y, vals.z));
|
||
},
|
||
methods: {
|
||
onGen(e) {
|
||
e.preventDefault();
|
||
const vals = this.getVals();
|
||
this.$emit('gen', generateData(vals.x, vals.y, vals.z));
|
||
this.nums = calcTotal(vals.x, vals.y, vals.z);
|
||
},
|
||
getVals() {
|
||
return {
|
||
x: parseInt(this.$refs.x.value, 10),
|
||
y: parseInt(this.$refs.y.value, 10),
|
||
z: parseInt(this.$refs.z.value, 10),
|
||
};
|
||
},
|
||
},
|
||
|
||
render() {
|
||
const { x, y, z } = this;
|
||
return (
|
||
<div style={{ padding: '0 20px' }}>
|
||
<h2>big data generator</h2>
|
||
<form onSubmit={this.onGen}>
|
||
<span style={{ marginRight: '10px' }}>
|
||
x: <input ref="x" type="number" min="1" required style={{ width: '50px' }} />
|
||
</span>
|
||
<span style={{ marginRight: '10px' }}>
|
||
y: <input ref="y" type="number" min="1" required style={{ width: '50px' }} />
|
||
</span>
|
||
<span style={{ marginRight: '10px' }}>
|
||
z: <input ref="z" type="number" min="1" required style={{ width: '50px' }} />
|
||
</span>
|
||
<button type="submit">Generate</button>
|
||
<p>total nodes: {this.nums || calcTotal(x, y, z)}</p>
|
||
</form>
|
||
<p style={{ fontSize: '12px' }}>
|
||
x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
|
||
</p>
|
||
</div>
|
||
);
|
||
},
|
||
};
|
||
|
||
export default Gen;
|