Editor.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!-- -->
  2. <template>
  3. <div class="Editor">
  4. <div class="editor-btn">
  5. <p>B</p>
  6. </div>
  7. <div id="textBox" contenteditable="true" @focus="focus">
  8. <p>Lorem ipsum</p>
  9. </div>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. name: "Editor",
  15. components: {},
  16. data() {
  17. return {};
  18. },
  19. computed: {},
  20. watch: {},
  21. //方法集合
  22. methods: {
  23. focus() {},
  24. },
  25. //生命周期 - 创建完成(可以访问当前this实例)
  26. created() {},
  27. //生命周期 - 挂载完成(可以访问DOM元素)
  28. mounted() {},
  29. beforeCreate() {}, //生命周期 - 创建之前
  30. beforeMount() {}, //生命周期 - 挂载之前
  31. beforeUpdate() {}, //生命周期 - 更新之前
  32. updated() {}, //生命周期 - 更新之后
  33. beforeDestroy() {}, //生命周期 - 销毁之前
  34. destroyed() {}, //生命周期 - 销毁完成
  35. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  36. };
  37. </script>
  38. <style lang='scss' scoped>
  39. //@import url(); 引入公共css类
  40. #textBox {
  41. width: 540px;
  42. height: 200px;
  43. border: 1px #000000 solid;
  44. padding: 12px;
  45. overflow: scroll;
  46. }
  47. </style>