ns-remark.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <view>
  3. <view class="message">
  4. <view class="title">
  5. 备注
  6. <text class="iconfont iconguanbi1" @click="close('remark')"></text>
  7. </view>
  8. <view class="textarea-box"><textarea v-model="remark" class="textarea" maxlength="200" placeholder="输入请不多于200字"></textarea></view>
  9. <button @click="save" type="primary" class="primary-btn btn save">保存</button>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. judge: false,
  18. remark: ''
  19. };
  20. },
  21. props: {
  22. message: {
  23. type: String,
  24. default: ''
  25. },
  26. popup_name: {
  27. type: String,
  28. default: ''
  29. }
  30. },
  31. mounted() {
  32. this.remark = JSON.parse(JSON.stringify(this.message));
  33. },
  34. methods: {
  35. save() {
  36. if (this.judge) return false;
  37. this.judge = true;
  38. this.$emit('remark', this.remark, () => {
  39. this.judge = false;
  40. });
  41. },
  42. close(name) {
  43. this.$emit('close', name);
  44. }
  45. }
  46. };
  47. </script>
  48. <style lang="scss" scoped>
  49. .message {
  50. width: 5.2rem;
  51. min-height: 3.2rem;
  52. border-radius: 0.06rem;
  53. background: #ffffff;
  54. padding-bottom: 0.15rem;
  55. .title {
  56. width: 100%;
  57. height: 0.5rem;
  58. border-bottom: 0.01rem solid #e6e6e6;
  59. text-align: center;
  60. line-height: 0.5rem;
  61. font-size: 0.16rem;
  62. font-weight: bold;
  63. position: relative;
  64. .iconguanbi1 {
  65. position: absolute;
  66. top: 50%;
  67. transform: translateY(-50%);
  68. right: 0.15rem;
  69. font-size: 0.18rem;
  70. }
  71. }
  72. .textarea-box {
  73. margin: 0.15rem;
  74. height: 2.2rem;
  75. border: 0.01rem solid #e6e6e6;
  76. border-radius: 0.06rem;
  77. padding: 0.15rem;
  78. box-sizing: border-box;
  79. .textarea {
  80. width: 100%;
  81. height: 100%;
  82. }
  83. }
  84. .save {
  85. width: auto !important;
  86. float: right;
  87. margin-right: 0.15rem;
  88. }
  89. }
  90. .message:after {
  91. overflow: hidden;
  92. display: block;
  93. content: '';
  94. height: 0;
  95. clear: both;
  96. }
  97. </style>