vue2 實現 div contenteditable="true" 類似于 v

jokester 發布于2019-08-20 14:07 / 2841人閱讀

摘要：解決思路二使用組件多帶帶聲明一個組件，在組件內部處理數據也就是，并將數據返回給父組件。該組件應該是一個元素也不一定非要是的子元素，父元素的大小即為子元素的大小。

問題

在 vue2 中對表單控件有著良好的雙向數據綁定機制，但是對于要特定實現某些功能的輸入時，我們就不得不使用到 contenteditable="true" 的 div ，而在這個 div 上是使用 v-model 是沒有效果的。那么問題就來了，輸入是非常需要雙向綁定的，這里的雙向數據綁定該如何實現？

解決思路一：自定義指令

當然，說在這一段的前面，這種解決方式在 vue2 中是不行的，為什么這么說，因為現在去搜索這個問題絕大多數的搜索結果是這個，所以放在前面。

實現的原理以及為什么不能用了

原理：自定義一個雙向數據綁定的指令，代碼如下：

Vue.directive("demo", {
    twoWay: true,
    bind: function () {
        this.handler = function () {
            this.set(this.el.innerHTML)
        }.bind(this)
        this.el.addEventListener("input", this.handler)
    },
    update: function (newValue, oldValue) {
        this.el.innerHTML = newValue || ""
    },
    unbind: function () {
        this.el.removeEventListener("input", this.handler)
    }
})

至于 this 下的這些方法，在 vue 官網上可能不太容易找到，因為這些是 vue1 中的內容，而在 vue2 中已經被移除了。所以在 vue2 中我們是不能這么干的，當然如果你使用的是 vue1 那么完全沒問題，直接拿去用即可。

解決思路二：使用組件

多帶帶聲明一個組件，在組件內部處理數據（也就是innerHTML），并將數據返回給父組件。
代碼如下：

然后在父組件中直接使用 v-model 就可以了（這里我把組件名稱定義成了 v-edit-div）。

至于為什么可以直接用 v-model ,看官網的 API 吧。
v-model 傳送門使用自定義事件的表單輸入組件，那一章節。

問題解決。

=============== 分割線：更新于17-08-25 =====================

忙的不行，之前在評論區也有發現這個例子其實會有不少的問題，包括如何實現異步數據的刷新，更新值之后光標定位的問題等等，在考慮了異步數據和光標問題后，有了以下的這個版本

這個版本是在項目中最終使用的版本，需要用的直接拿走用即可。
注：

canEdit 標志這個div是否是可編輯的，在父組件直接使用 v-model 即可。

該組件應該是一個div元素（也不一定非要是div）的子元素，父元素的大小即為子元素的大小。

云服務器 GPU云服務器 Quote quoted quot python b&quot&quot

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81426.html

關于vue2非表單元素使用contenteditable=&quot;true&quot;(富文本編

摘要：最近自行研究的開發后端用前端用用戶消息發送框需要用到富文本編輯器我需要的東西很簡單可以寫文字可以發表情圖片和文件可以發表情圖片和文件可以黏貼剪切板的文字和圖片一般富文本編輯器有更豐富的格式化工具功能太多余定制也麻煩干脆自己開發說干就干上代碼最近自行研究chat的開發,后端用go,前端用vue,用戶消息發送框需要用到富文本編輯器,我需要的東西很簡單: 可以寫文字,可以發表情、圖片和文...

Drummor 2019-08-21 17:46 評論0 收藏0
vue2模擬vue-element-admin手寫角色權限的實現

　　權限　　路由權限　　靜態路由：固定的路由，沒有權限。如login頁面　　動態路由：根據不同的角色，后端返回不同的路由接口。通過meta中的roles去做篩選　　store存儲路由　　3　　//地址：store/modules/permission　　import{routesasconstantRoutes}from'@/router' 　　　　//根據meta.roles去...

3403771864 2022-09-25 22:04 評論0 收藏0
剖析Vue3中偵聽器watch的使用教程

　　上一節我們簡單的介紹了一下vue3 項目中的計算屬性，這一節我們繼續 vue3 的基礎知識講解?！　∵@一節我們來說 vue3 的偵聽器。　　學過 vue2 的小伙伴們肯定學習過偵聽器，主要是用來監聽頁面數據或者是路由的變化，來執行相應的操作，在 vue3里面呢，也有偵聽器的用法，功能基本一樣，換湯不換藥的東西。偵聽器是常用的 Vue API 之一，它用于監聽一個數據并在數據變動時做一些自定義...

3403771864 2023-03-26 17:14 評論0 收藏0
HTML contenteditable屬性

摘要：前言之前一直沒有留意到有這個屬性，今天突然看到特意記錄一下它的用法和實際用途用法為了某個使元素可編輯，你所要做的就是在標簽上設置屬性，它幾乎支持所有的元素。前言之前一直沒有留意到有contenteditable這個屬性，今天突然看到特意記錄一下它的用法和實際用途；用法為了某個使元素可編輯，你所要做的就是在html標簽上設置contenteditable屬性，它幾乎支持所...

huayeluoliuhen 2019-08-02 16:18 評論0 收藏0