console
const InputSize = Vue.component('InputSize', {
data(){
return{
inputValue:"123",
selectItem:"B"
}
},
template: `<div>
<input :value="inputValue" @change="inputChange"/>
<select :value="selectItem" @change="selChange">
<option value="B">B</option>
<option value="KB">KB</option>
<option value="MB">MB</option>
<option value="GB">GB</option>
<option value="TB">TB</option>
</select>
</div>`,
methods:{
inputChange(value){
this.inputValue = value.target.value
this.resetData()
},
selChange(type){
console.log(type.target.value)
this.selectItem = type.target.value
this.resetData()
},
resetData(){
let num = null
if(this.selectItem == "B"){
num = this.inputValue
}else if(this.selectItem == "KB"){
num = this.inputValue*1024
}else if(this.selectItem == "MB"){
num = this.inputValue*1024*1024
}else if(this.selectItem == "GB"){
num = this.inputValue*1024*1024*1024
}else if(this.selectItem == "TB"){
num = this.inputValue*1024*1024*1024*1024
}
if(num<1024){
this.inputValue = Number(num).toFixed(2)
this.selectItem ="B"
}else if((num/1024)<1024){
this.selectItem ="KB"
this.inputValue = (num/1024).toFixed(2)
}else if((num/1024/1024)<1024){
this.selectItem = "MB"
this.inputValue = (num/1024/1024).toFixed(2)
}else if((num/1024/1024/1024)<1024){
this.selectItem = "GB"
this.inputValue = (num/1024/1024/1024).toFixed(2)
}else if((num/1024/1024/1024/1024)<1024){
this.selectItem = "TB"
this.inputValue = (num/1024/1024/1024/1024).toFixed(2)
}
this.$emit("change",this.inputValue+this.selectItem)
}
}
})
const app = new Vue({
el: '#app',
components: { InputSize },
template: `
<InputSize @change="change"></InputSize>`,
methods: {
change(vavlue) {
console.log(vavlue)
}
}
})
<div id="app"></div>