IT博客汇 | vue系列教程:3.vue.js实现可编辑的div

vue系列教程:3.vue.js实现可编辑的div

zongyan86发表于 2017-03-12 13:54:23

晒demo代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .container {
            width: 960px;
            margin: 0 auto;
        }

        .editor {
            margin-right: 360px;
            border: 1px outset black;
            height: 300px;
            padding: 30px;
        }

        .preview {
            padding: 30px;
            float: right;
            width: 300px;
            border: 1px inset grey;
            height: 300px;
        }
    </style>
    <script src="http://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>
</head>
<body>
    <div class='container' id="editor">
        <input type="text" v-model="content" />
        <div class="preview">{{content}}</div>
        <div class='editor' v-divmodel="content" contenteditable="true"></div>
    </div>
    <script type="text/javascript">
    
        Vue.directive('divmodel', { //注意不可写成驼峰的divModel
            twoWay: true,  
            bind: function () {
                this.handler = function () {
                    this.set(this.el.innerHTML)
                }.bind(this)
                this.el.addEventListener('keyup', this.handler)
            },
            update: function (newValue, oldValue) {
                this.el.innerHTML = newValue || ''
            },
            unbind: function () {
                this.el.removeEventListener('keyup', this.handler)
            }
        })

        var vm = new Vue({
            el: '#editor'
        })

    </script>
</body>

</html>

web开发分享

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《vue系列教程:3.vue.js实现可编辑的div》