one-textarea.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <view class="com-plan-content">
  3. <view class="title">
  4. <text>{{ title }}</text>
  5. </view>
  6. <view class="item-container">
  7. <view class="label-view">
  8. <text>{{ label }}</text>
  9. </view>
  10. <view class="content">
  11. <textarea class="textarea"
  12. :key="title"
  13. placeholder="请输入"
  14. placeholder-style="color: #B8BECC"
  15. :maxlength="-1"
  16. auto-height
  17. :value="defaultValue"
  18. :disabled="disabled"
  19. @input="changeVal"
  20. />
  21. </view>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. // 单个多行输入框 (改善计划(Plan)/oneTextarea)
  27. export default {
  28. props: {
  29. // 类型 (plan 和 action)
  30. type: {
  31. type: String,
  32. default: 'plan'
  33. },
  34. // 对策处置默认值
  35. defaultValue: {
  36. type: String,
  37. default: ''
  38. },
  39. // 是否禁用
  40. disabled: {
  41. type: Boolean,
  42. default: false
  43. },
  44. },
  45. computed: {
  46. // 多行文本框标题
  47. title() {
  48. return this.type === 'plan' ? '改善计划(Plan)' : '对策处置(Action)'
  49. },
  50. // 多行文本框子标题
  51. label() {
  52. return this.type === 'plan' ? '改善计划' : '对策处置'
  53. }
  54. },
  55. created() {
  56. this.value = this.defaultValue;
  57. },
  58. methods: {
  59. changeVal(e) {
  60. this.$emit('changeTextare', this.type, e.target.value);
  61. }
  62. },
  63. }
  64. </script>
  65. <style lang="less">
  66. .com-plan-content {
  67. height: 100%;
  68. padding-top: 35rpx;
  69. .title {
  70. line-height: 35rpx;
  71. padding: 0 25rpx;
  72. text {
  73. font-size: 35rpx;
  74. color: #292C33;
  75. }
  76. }
  77. .item-container {
  78. display: flex;
  79. margin-top: 25rpx;
  80. padding-left: 25rpx;
  81. background-color: #FFFFFF;
  82. .label-view {
  83. width: 175rpx;
  84. line-height: 37.5rpx;
  85. padding: 25rpx 0;
  86. >text {
  87. font-size: 22.5rpx;
  88. color: #666F80;
  89. }
  90. }
  91. .content {
  92. flex: 1;
  93. padding: 25rpx 0;
  94. .textarea {
  95. width: 100%;
  96. min-height: 810rpx;
  97. padding: 0 25rpx;
  98. line-height: 37.5rpx;
  99. font-size: 22.5rpx;
  100. color: #525866;
  101. box-sizing: border-box;
  102. }
  103. }
  104. }
  105. }
  106. </style>