模拟textarea多行垂直居中

模拟textarea
  1. <template>
  2. <div>
  3. <!-- <textarea id="" name="" cols="30" rows="10" placeholder="请输入你的心愿巴拉巴拉巴拉小魔仙哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈" /> -->
  4. <div class="content">
  5. <div contenteditable="true" :placeholder="placeholder" @blur="getContent($event)" v-html="content" />
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. content: '',
  14. placeholder: '请输入你的心愿,闭眼三秒钟,写下你的心愿,我来帮你实现哈哈哈哈哈哈'
  15. }
  16. },
  17. methods: {
  18. getContent(e) {
  19. console.log(e.target.innerHTML)
  20. this.content = e.target.innerHTML
  21. }
  22. }
  23. }
  24. </script>
  25. <style lang="scss" scoped>
  26. textarea{
  27. height: 200px;
  28. }
  29. .content{
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. background: #FA9A39;
  34. margin:100px auto;
  35. width: 660px;
  36. height:300px;
  37. padding:20px;
  38. box-sizing: border-box;
  39. font-size: 28px;
  40. color: #fff;
  41. }
  42. .content div{
  43. outline: none;
  44. line-height: 1.5;
  45. }
  46. [contenteditable]:hocus{
  47. outline: none;
  48. border: none;
  49. }
  50. .content div:empty:before{
  51. content: attr(placeholder);
  52. color:#fff;
  53. line-height: 1.5;
  54. }
  55. .content div:focus:before{
  56. content:none;
  57. }
  58. </style>

本文链接:

https://www.calm7.com/article.html?id=7