64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
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
|