123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- <!-- -->
- <template>
- <div class="Editor">
- <div class="editor-btn">
- <p>B</p>
- </div>
- <div id="textBox" contenteditable="true" @focus="focus">
- <p>Lorem ipsum</p>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "Editor",
- components: {},
- data() {
- return {};
- },
- computed: {},
- watch: {},
- //方法集合
- methods: {
- focus() {},
- },
- //生命周期 - 创建完成(可以访问当前this实例)
- created() {},
- //生命周期 - 挂载完成(可以访问DOM元素)
- mounted() {},
- beforeCreate() {}, //生命周期 - 创建之前
- beforeMount() {}, //生命周期 - 挂载之前
- beforeUpdate() {}, //生命周期 - 更新之前
- updated() {}, //生命周期 - 更新之后
- beforeDestroy() {}, //生命周期 - 销毁之前
- destroyed() {}, //生命周期 - 销毁完成
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
- };
- </script>
- <style lang='scss' scoped>
- //@import url(); 引入公共css类
- #textBox {
- width: 540px;
- height: 200px;
- border: 1px #000000 solid;
- padding: 12px;
- overflow: scroll;
- }
- </style>
|