editDesc.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view class="content">
  3. <editor
  4. @ready="onEditorReady"
  5. id="editor"
  6. placeholder="输入个人简介内容"
  7. placeholder-class="placeholder"
  8. class="textarea"
  9. @input="descInput"
  10. :read-only="isReadOnly"
  11. ></editor>
  12. <view class="btn" @click="save()">保存</view>
  13. </view>
  14. </template>
  15. <script>
  16. const app = getApp();
  17. const req = require('../../utils/request.js');
  18. export default {
  19. data() {
  20. return {
  21. id: '',
  22. brief: '',
  23. isReadOnly: true
  24. };
  25. },
  26. onLoad(opt) {
  27. this.id = opt.id;
  28. let pages = getCurrentPages();
  29. let prevPage = pages[pages.length - 2];
  30. this.brief = prevPage.$vm.brief;
  31. },
  32. methods: {
  33. descInput(event) {
  34. this.brief = event.detail.html;
  35. // if (this.brief) {
  36. // this.descLength = event.detail.text.length - 1;
  37. // } else {
  38. // this.descLength = 0;
  39. // }
  40. },
  41. onEditorReady() {
  42. if (this.isEndit) {
  43. return;
  44. }
  45. const that = this;
  46. uni.createSelectorQuery()
  47. .select('#editor')
  48. .context(function(res) {
  49. that.editorCtx = res.context;
  50. that.editorCtx.setContents({
  51. html: that.brief //这里就是设置默认值的地方(html 后面给什么就显示什么)
  52. });
  53. that.isReadOnly = false;
  54. })
  55. .exec();
  56. },
  57. save() {
  58. let pages = getCurrentPages(); //获取所有页面栈实例列表
  59. let prevPage = pages[pages.length - 2]; //上一页页面实例
  60. prevPage.$vm.brief = this.brief;
  61. uni.navigateBack({
  62. //uni.navigateTo跳转的返回,默认1为返回上一级
  63. delta: 1
  64. });
  65. }
  66. }
  67. };
  68. </script>
  69. <style>
  70. @import './editDesc.css';
  71. .ql-editor.ql-blank:before {
  72. /* 此处设置 placeholder 样式 */
  73. color: rgba(204, 204, 204, 1);
  74. font-style: normal;
  75. min-height: 400px;
  76. }
  77. </style>