GetParticleParameters.vue 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <div class="field">
  3. <div class="field is-horizontal">
  4. <div class="field-label is-normal">
  5. <label class="label">Spherical particle</label>
  6. </div>
  7. <div class="field-body">
  8. <div class="field is-grouped is-grouped-multiline">
  9. <b-radio v-model="particle" native-value="bulk"> bulk </b-radio>
  10. <b-radio v-model="particle" native-value="core-shell"> core-shell </b-radio>
  11. <b-radio v-model="particle" native-value="multilayer"> multilayer </b-radio>
  12. <div v-if="particle==='multilayer'">
  13. <b-input v-model="layersNum" type='number' min=1 max=10 class="binput"/>
  14. </div>
  15. <div v-else>
  16. <b-input v-model="layersNum" type='number' min=1 max=10 class="binput" disabled/>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. <div v-for="layer in layers" v-bind:key="layer.index">
  22. <GetLayerParameters v-bind:layer="layer"
  23. v-bind:units="units"
  24. v-bind:particle="particle"
  25. v-bind:index="layer.index"
  26. v-bind:materials="materials"
  27. />
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import GetLayerParameters from "./GetLayerParameters.vue";
  33. export default {
  34. name: "GetParticleParameters",
  35. components: {
  36. GetLayerParameters
  37. },
  38. data () {
  39. return {
  40. // TODO: Is it OK to modify Local later?
  41. particle: 'bulk',
  42. layersNum: 1,
  43. index: 1
  44. }
  45. },
  46. watch: {
  47. // emit updated values
  48. particle: {
  49. handler: function () {
  50. if (this.particle === 'bulk') {this.layersNum = 1;}
  51. if (this.particle === 'core-shell') {this.layersNum = 2;}
  52. if (this.particle === 'multilayer') {this.layersNum = 3;}
  53. }
  54. },
  55. layersNum: {
  56. handler: function () {
  57. while (this.layersNum < this.layers.length) {
  58. this.layers.pop();
  59. }
  60. let r_prev = this.layers[0].R;
  61. while (this.layersNum > this.layers.length) {
  62. // r_prev = r_prev*1.1;
  63. this.layers.push(
  64. {
  65. R: r_prev*0.1,
  66. material: 'nk',
  67. reN: 4.0,
  68. imN: 0.01,
  69. index: 1
  70. }
  71. );
  72. }
  73. for (let i = 0; i < this.layers.length; i++) {
  74. this.layers[i].index = i;
  75. }
  76. }
  77. },
  78. deep: true
  79. },
  80. props: ['layers', 'units','materials']
  81. }
  82. </script>
  83. <style scoped>
  84. .binput {
  85. display:flex;
  86. align-items:center;
  87. margin-left: 1rem;
  88. width:5rem;
  89. }
  90. </style>