input.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div class="clasfx">
  3. <span @click="up" class="button">{{Fx[0]}}</span>
  4. <el-input-number class="bs-el-input-number" v-model="number"></el-input-number>
  5. <span @click="down" class="button">{{Fx[1]}}</span>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'inputNumber',
  11. props: {
  12. number:{
  13. type: Number,
  14. default: 0
  15. },
  16. Fx:{
  17. type: Array,
  18. default: []
  19. },
  20. },
  21. data () {
  22. return {
  23. }
  24. },
  25. computed: {
  26. // url(){
  27. // return require('data-room-ui/BorderComponents/GcBorder16/component.png')
  28. // }
  29. },
  30. mounted () {
  31. },
  32. methods: {
  33. up(){
  34. const a=this.number--
  35. this.$emit('changeStyle',a)
  36. },
  37. down(){
  38. }
  39. }
  40. }
  41. </script>
  42. <style lang="scss" scoped>
  43. // @import '../../assets/style/bsTheme.scss';
  44. .clasfx{
  45. display: flex;
  46. flex-direction: row;
  47. align-items: center;
  48. }
  49. .button{
  50. color: #fff;
  51. cursor: pointer;
  52. padding: 0 4px;
  53. }
  54. // ::v-deep .el-input-number__decrease{
  55. // display: none;
  56. // }
  57. // ::v-deep .el-input-number__increase{
  58. // display: none;
  59. // }
  60. ::v-deep .el-input-number--mini {
  61. width: 120px !important
  62. }
  63. </style>