editableCell.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <div class="myedit">
  3. <div class="editable-cell">
  4. <div v-if="editable" class="editable-cell-input-wrapper">
  5. <a-input v-model="value" @blur="blurChange" @change="handleChange" @pressEnter="check" /><a-icon
  6. type="check"
  7. class="editable-cell-icon-check"
  8. @click.stop="check"
  9. />
  10. </div>
  11. <div v-else class="editable-cell-text-wrapper">
  12. <span v-if="slotName=='budget'">{{ value*1? `日预算:${value*1}` :value }}</span>
  13. <span v-if="slotName=='bid'">{{ value*1? `${value*1}` :value }}</span>
  14. <span v-if="slotName=='cpaBid'">{{ value*1? `${value*1}` :value }}</span>
  15. <span v-if="slotName=='name'">{{value}}</span>
  16. <a-icon type="edit" class="editable-cell-icon" @click.stop="edit" />
  17. </div>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. props: ["text",'slotName'],
  24. data() {
  25. return {
  26. value: this.text,
  27. editable: false,
  28. };
  29. },
  30. watch:{
  31. text:{
  32. handler(n,o){
  33. this.value=n
  34. },
  35. deep:true
  36. }
  37. },
  38. methods: {
  39. blurChange(e) {
  40. console.log(e)
  41. const value = e.target.value;
  42. if(this.slotName=='budget'){
  43. if(this.value*1){
  44. if(value*1 && value*1>300 &&value*1<9999999.99){
  45. this.value = value;
  46. }else{
  47. this.$message.error('请输入300-9999999.99的数')
  48. }
  49. }else{
  50. this.value='不限'
  51. }
  52. }else if(this.slotName=='bid'){
  53. if(this.value*1){
  54. if(value*1 && value*1>0.1 &&value*1<9999999.99){
  55. this.value = value;
  56. }else{
  57. this.$message.error('请输入0.1-9999999.99的数')
  58. }
  59. }else{
  60. this.value='不限'
  61. }
  62. }else if(this.slotName=='cpaBid'){
  63. if(this.value*1){
  64. if(value*1 && value*1>0.1 &&value*1<10000){
  65. this.value = value;
  66. }else{
  67. this.$message.error('请输入0.1-10000的数')
  68. }
  69. }else{
  70. this.value='不限'
  71. }
  72. }
  73. },
  74. handleChange(e){
  75. console.log(e)
  76. },
  77. check() {
  78. this.editable = false;
  79. this.$emit('change', this.value);
  80. },
  81. edit() {
  82. this.editable = true;
  83. },
  84. },
  85. }
  86. </script>
  87. <style lang="scss" scoped>
  88. .myedit{
  89. .editable-cell {
  90. position: relative;
  91. }
  92. .editable-cell-input-wrapper,
  93. .editable-cell-text-wrapper {
  94. padding-right: 24px;
  95. }
  96. .editable-cell-text-wrapper {
  97. padding: 5px 24px 5px 5px;
  98. }
  99. .editable-cell-icon,
  100. .editable-cell-icon-check {
  101. position: absolute;
  102. right: 0;
  103. top: 6px;
  104. width: 20px;
  105. cursor: pointer;
  106. }
  107. .editable-cell-icon {
  108. line-height: 18px;
  109. display: none;
  110. }
  111. .editable-cell-icon-check {
  112. line-height: 28px;
  113. }
  114. .editable-cell:hover .editable-cell-icon {
  115. display: inline-block;
  116. }
  117. .editable-cell-icon:hover,
  118. .editable-cell-icon-check:hover {
  119. color: #108ee9;
  120. }
  121. .editable-add-btn {
  122. margin-bottom: 8px;
  123. }
  124. }
  125. </style>