submintContent.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="task-form-item">
  3. <view class="form-lable">
  4. <text class="form-must" v-if="rule && rule.required">* </text>内容:
  5. </view>
  6. <view class="form-textarea">
  7. <template v-if="!checkPage">
  8. <textarea class="textarea-box" placeholder="请输入内容" placeholder-class="form-placeholder"
  9. v-model="content" :maxlength="1000" auto-height></textarea>
  10. <view class="textarea-num">
  11. {{content.length || 0}} / 1000
  12. </view>
  13. </template>
  14. <template v-else>
  15. {{content}}
  16. </template>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. name: 'submintContent',
  23. model: {
  24. prop: ['submitContent'],
  25. event: ['onChange']
  26. },
  27. props: {
  28. checkPage: {
  29. type: Boolean,
  30. default: false
  31. },
  32. rule: {
  33. type: Object,
  34. default: null
  35. },
  36. submitContent: {
  37. type: String,
  38. default: ''
  39. }
  40. },
  41. data() {
  42. return {
  43. content: ''
  44. }
  45. },
  46. watch: {
  47. submitContent: {
  48. handler(newL, oldL) {
  49. this.content = newL
  50. },
  51. immediate: true
  52. },
  53. content: {
  54. handler(newL, oldL) {
  55. this.$emit('onChange', newL)
  56. },
  57. }
  58. }
  59. }
  60. </script>
  61. <style lang="scss" scoped>
  62. @import '~./submint.scss';
  63. .form-textarea{
  64. min-height: 100rpx;
  65. }
  66. </style>