textarea.nvue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础使用</text>
  5. <view class="u-demo-block__content">
  6. <u--textarea
  7. v-model="value1"
  8. placeholder="请输入内容"
  9. ></u--textarea>
  10. </view>
  11. </view>
  12. <view class="u-demo-block">
  13. <text class="u-demo-block__title">字数统计</text>
  14. <view class="u-demo-block__content">
  15. <u--textarea
  16. v-model="value2"
  17. placeholder="请输入内容"
  18. count
  19. ></u--textarea>
  20. </view>
  21. </view>
  22. <view class="u-demo-block">
  23. <text class="u-demo-block__title">自动增高</text>
  24. <view class="u-demo-block__content">
  25. <u--textarea
  26. v-model="value3"
  27. placeholder="请输入内容"
  28. autoHeight
  29. ></u--textarea>
  30. </view>
  31. </view>
  32. <view class="u-demo-block">
  33. <text class="u-demo-block__title">禁用状态</text>
  34. <view class="u-demo-block__content">
  35. <u--textarea
  36. v-model="value4"
  37. placeholder="文本域已被禁用"
  38. disabled
  39. count
  40. ></u--textarea>
  41. </view>
  42. </view>
  43. <view class="u-demo-block">
  44. <text class="u-demo-block__title">下划线模式</text>
  45. <view class="u-demo-block__content">
  46. <u--textarea
  47. v-model="value5"
  48. placeholder="请输入内容"
  49. border="bottom"
  50. ></u--textarea>
  51. </view>
  52. </view>
  53. </view>
  54. </template>
  55. <script>
  56. export default {
  57. data() {
  58. return {
  59. value1: '',
  60. value2: '统计字数',
  61. value3: '',
  62. value4: '',
  63. value5: ''
  64. }
  65. },
  66. methods: {
  67. formatter(value) {
  68. return value.replace(/[^0-9]/ig,"")
  69. }
  70. }
  71. }
  72. </script>
  73. <style lang="scss">
  74. </style>