最近在使用vue-quill-editor富文字元件 發現預設都是轉為base64然後寫在img中,這樣做會導致富文字內容體積非常龐大,然後看到某篇部落格將上傳到自己的伺服器上.配置**如下:
/*富文字編輯上傳配置*/
const uploadconfig = ;
// *******工具欄的工具選項(預設展示全部)
const tooloptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[, ],
[, ],
[, ],
[, ],
, ,
, [, ],
, ,
['clean'],
['link', 'image', 'video']
];const handlers =
// 可設定上傳的格式
fileinput.setattribute('accept', uploadconfig.accept);
fileinput.classlist.add('ql-image');
// 監聽選擇檔案
fileinput.addeventlistener('change', function ()
// 上傳
// 上傳資料成功,會觸發
xhr.onload = function (e)
fileinput.value = ''
};// 開始上傳資料
xhr.upload.onloadstart = function (e) ;
// 當發生網路異常的時候會觸發,如果上傳資料的過程還未結束
xhr.upload.onerror = function (e) ;
// 上傳資料完成(成功或者失敗)時會觸發
xhr.upload.onloadend = function (e) ;
xhr.send(formdata)
});}
fileinput.click();
}};export default
}};
頁面**如下:
如果只是用一次或幾次,這樣寫還可以.但是如果在多個頁面頻繁使用的話就很不方便了,所以封裝了乙個editor元件
可是發現使用元件的時候v-model沒有生效,於是看了知乎某大佬的文章重新寫了一下元件
至此使用元件時就可以愉快的使用v-model了
自定義元件使用v model
v model只是乙個語法糖,等於 value input,真正的實現靠的還是 v bind 繫結響應式資料,觸發 input 事件並傳遞資料 核心和重點 something 等於 something input something event.target.value 因此,對於乙個帶有 v mo...
vue 自定義元件使用v model
是我們常用的雙向繫結方法,如果在自定義元件中如何使用v model進行雙向繫結呢?首先我們必須要清除v model繫結的原理如下 其實v model的語法糖是這樣包裝而成的 而乙個元件上使用時則會簡化成這樣子 因此,對於乙個帶有 v model 的元件 核心用法 它應該如下 1 帶有v model的...
vue 自定義元件使用v model
v model指令其實是下面的語法糖包裝而成 在乙個元件上使用 v model 時,會簡化為 因此,對於乙個帶有v model的元件,它應該如下 利用 emit 觸發 input 事件 this.emit input value 元件1 vue.component my component prop...