PosWhSetting.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!--
  2. * @description: 组件的宽高,xy坐标设置
  3. * @Date: 2023-05-29 14:49:54
  4. -->
  5. <template>
  6. <div>
  7. <el-form-item
  8. :label-width="labelWidth"
  9. label="宽度"
  10. >
  11. <el-input-number
  12. v-model="config.w"
  13. class="bs-el-input-number"
  14. :min="0"
  15. :step="1"
  16. />
  17. </el-form-item>
  18. <el-form-item
  19. :label-width="labelWidth"
  20. label="高度"
  21. >
  22. <el-input-number
  23. v-model="config.h"
  24. class="bs-el-input-number"
  25. :min="0"
  26. :step="1"
  27. />
  28. </el-form-item>
  29. <el-form-item
  30. :label-width="labelWidth"
  31. label="x坐标"
  32. >
  33. <el-input-number
  34. v-model="config.x"
  35. class="bs-el-input-number"
  36. :min="0"
  37. :step="1"
  38. />
  39. </el-form-item>
  40. <el-form-item
  41. :label-width="labelWidth"
  42. label="y坐标"
  43. >
  44. <el-input-number
  45. v-model="config.y"
  46. class="bs-el-input-number"
  47. :min="0"
  48. :step="1"
  49. />
  50. </el-form-item>
  51. </div>
  52. </template>
  53. <script>
  54. export default {
  55. name: '',
  56. props: {
  57. config: {
  58. type: Object,
  59. default: () => ({
  60. x: 0,
  61. y: 0,
  62. w: 0,
  63. h: 0
  64. })
  65. },
  66. labelWidth: {
  67. type: String,
  68. default: '100px'
  69. }
  70. },
  71. data () {
  72. return {
  73. }
  74. },
  75. mounted () {},
  76. methods: {
  77. }
  78. }
  79. </script>
  80. <style lang="scss" scoped>
  81. </style>