zoukankan      html  css  js  c++  java
  • 模拟textarea----》contentable

    <template>
        <div class="edit-div"
             v-html="innerText"
             :placeholder="placeholder"
             :contenteditable="canEdit"
             @keydown.13="keyDown($event)"
             @focus="isLocked = true"
             @blur="isLocked = false"
             @input="changeText">
        </div>
    </template>
    <script>
        export default{
            name: 'v-edit-div',
            props: {
                value: {
                    type: String,
                    default: ''
                },
                placeholder: {
                    type: String,
                    default: ''
                },
                canEdit: {
                    type: Boolean,
                    default: true
                },
                //禁止换行
                nowrap: {
                    type: Boolean,
                    default: false
                }
            },
            data(){
                return {
                    innerText: this.value,
                    isLocked: false
                }
            },
            watch: {
                'value'(){
                    if (!this.isLocked && !this.innerText) {
                        this.innerText = this.value;
                    }
                }
            },
            methods: {
                changeText(){
                    // 解决:末尾换行,看不见的<br>,删不掉,造成清空无法出现placeholder文字
                    if(this.$el.innerHTML=="<br>"){
                        this.$el.innerHTML="";
                    }
                    this.$emit('input', this.$el.innerHTML);
                },
                keyDown(e){
                    console.log("回车键按下--nowrap--value:",this.nowrap)
                    if(this.nowrap){
                        e.preventDefault();
                    }
                }
            }
        }
    </script>
    <style>
        .edit-div {
             100%;
            height: 100%;
            overflow: auto;
            word-break: break-all;
            outline: none;
            user-select: text;
            white-space: pre-wrap;
            text-align: left;
        }
        .edit-div[contenteditable=true]{
            user-modify: read-write-plaintext-only;  
            -webkit-user-modify: read-write-plaintext-only;  
        }
        .edit-div[contenteditable=true]:empty:before {
            content: attr(placeholder);
            display: block;
            color: #ccc;
        }
    </style>
  • 相关阅读:
    位图 与矢量图对比
    用ocam工具录视频及转换视频 ffmpeg
    教学设计-饭后百步走
    教学设计例--跟小猴子一起玩
    教学设计-妈妈跳舞
    教学设计--Scratch2.0入门介绍
    Scratch2.0在线注册用户并使用帮助
    下载Scratch2.0离线版并安装教程
    把Sratch作品转为swf文件
    跟小猴子开心玩
  • 原文地址:https://www.cnblogs.com/cs122/p/13254912.html
Copyright © 2011-2022 走看看