vue-quick-cropper ------------一個vue移動端截圖外掛

阿新 • • 發佈：2019-01-26

export default { el: '#app', data: { imgSrc: "", // 圖片資料 visible:false, // 剪下框展示 }, methods: { // 獲得頭像的base64和二進位制 finish(base64,data){ console.log(base64,'圖片base64') console.log(data,'圖片二進位制') }, // 確定使用 confirm() { this.$nextTick(() => { // 確認截圖

this.$refs.cropper.confirm() }) }, // 取消 cancel(){ this.visible = false }, // 選擇img回撥 choiceImg(e) { this.visible = true const file = e.target.files[0] const reader = new FileReader(); reader.readAsDataURL(file) reader.onload = (e) => { this

.imgSrc = reader.result // imgSrc已獲取，�開始渲染圖片� this.$refs.cropper.init() } }, } };

vue-quick-cropper ------------一個vue移動端截圖外掛

export default { el: '#app', data: { imgSrc: "", // 圖片資料 visible:false, // 剪下框展示 }, methods: { // 獲得頭像的base64和二進位制 finish(

移動端截圖外掛

移動端截圖外掛本來想小程式用無奈，小程式不支援jq <!DOCTYPE html> <html> <head > <meta http-equiv="Content-Type" content="text/html; char

一個簡單的腳手架drop-cli、vue的元件庫、移動端架構和pc管理後臺模版

鑑於自己的經驗和以往做過的專案，為了提高工作效率，特意整理了一下專案模版、vue元件庫等模版並新增到一個自己封裝的腳手架drop-cli中。不喜勿噴！ drop-cli 一個簡單的腳手架,可新增不同的模版/框架 $ npm inst

Vue的移動端多圖上傳插件vue-easy-uploader

ext gin ted log code 支持使用 tip master 原文地址前言這段時間趕項目，需要用到多文件上傳，用Vue進行前端項目開發。在網上找了不少插件，都不是十分滿意，有的使用起來繁瑣，有的不能適應本項目。就打算自己折騰一下，寫一個Vue的上傳插件，一

基於vue的UI框架集錦(移動端+pc端)

樣式 span mat tar 開發 png des www. rda 1. vonic 一個基於 vue.js 和 ionic 樣式的 UI 框架，用於快速構建移動端單頁應用，很簡約，是我喜歡的風格 star 2.3k 中文文檔在線預覽 2.vux 基於WeUI和Vu

Vue 2.0開發企業級移動端音樂WebAPP

第1章課程內容介紹包括課程概述、課程安排、學習前提、講授方式等方面的介紹，最後演示了整個音樂App的功能，讓同學們對課程專案有一個直觀的瞭解。1-1 導學1-2 課前必讀（原始碼獲取方式）第2章專案準備工作包括專案需求分析、腳手架初始化程式碼、專案目錄介紹及圖示字型、公共樣式等資源的準備。2-1 需

vue實現移動端圓形旋鈕外掛

最近公司有一個專案的需要做出旋鈕的效果，旋鈕有十個檔，根據手指旋轉切換，旋轉時接近最近的檔會有吸附效果，具體效果如下： html部分程式碼： <div class="_touch"> <div class="round_box" ref="box" @touchstart

vue.js使用vue-preview做移動端縮圖時報錯Property or method "$preview" is not defined

報錯的詳細資訊為： Property or method "$preview" is not defined on the instance but referenced during render. Make sure that this property is reac

利用electron-vue技術實現一個郵箱客戶端應用的專案總結

1.electron-vue是利用Chromium瀏覽器、vue-cli腳手架和nodejs來實現跨平臺的桌面應用程式使用electron-packager或electron-builder打包應用程式,electron-packager打包方式比較簡單，想為哪個平

關於vue利用postcss-pxtorem進行移動端適配的問題

剛開始我按照網上的一些方式利用postcss-pxtorem方式去適配的時候怎麼樣都不成功，後來經過自己不斷嘗試之後終於成功了。稍微坐下總結： 1.個人建議在進行postcss-pxtorem適配的時候利用webpack進行專案配置，而不要用webpack-si

基於 Vue 2.0 實現的移動端彈窗 (Alert, Confirm, Toast)元件.

wc-messagebox基於 vue 2.0 開發的外掛包含 Alert, Confirm, Toast, Prompt仿照 iOS 原生UI(樣式來源: MUI)一些想法剛開始的時候想要用現成的彈窗元件來著, 但是查詢一圈沒有發現比較合適專案的, 所以才自己開發了一個,

基於 Vue 全家桶製作的移動端音樂 WebApp

專案演示地址: https://bxm0927.github.io/vue-music-webapp/dist/ （在 GitHub Pages 中，通過 jsonp 請求的資料會被正常渲染，而由於無 node 服務，通過 axios 請求的資料不會被正常

vue-cli+v-charts實現移動端視覺化圖表

　　v-charts是餓了麼團隊開源的一款基於Vue和Echarts的圖表工具，在使用 echarts 生成圖表時，經常需要做繁瑣的資料型別轉化、修改複雜的配置項，v-charts 的出現正是為了解決這個痛點。基於 Vue2.0 和 echarts 封裝的 v-charts 圖表元件，只需要統一提供一種對前後

從零開始使用vue-cli搭建一個vue專案及注意事項

一、安裝node.js 　　1.根據電腦的自行下載node.js安裝包http://nodejs.cn 　　　　　　2.點選安裝，按照正常的的一路點選下去　　3.驗證安裝是否成功，按鍵win+r,輸入cmd開啟命令列工具，點選確認後再輸入node -v 出現版本好說明npm安裝成功　

從零開始使用vue-cli搭建一個vue項目及註意事項

pack 註意 csharp and init 腳手架 project rect node.js安裝一、安裝node.js 　　1.根據電腦的自行下載node.js安裝包http://nodejs.cn 　　　　　　2.點擊安裝，按照正常的的一路點擊下去　　3.驗

使用vue-cli建立一個vue專案

vue官方給出一個腳手架工具用來快速建立一個基於vue的專案 1、安裝vue-cli 　　npm install vue-cli -g 　　安裝完成以後，可以通過在命令列中輸入vue命令即可檢視 2、初始化建立基於vue的專案　　vue init webpack

安裝Vue 及建立一個Vue 專案

建立一個Vue專案首先要先安裝node 及 npm 詳情見【http://www.cnblogs.com/ylboke/p/8342116.html 】及【http://www.cnblogs.com/ylboke/p/8342185.html 】安裝Git（Git是一個分散

關於一個前端移動端高度自適應例子

這兩天做專案，在對移動端前端頁面做頁面高度自適應固定時遇到了問題，顯示效果是：整個頁面為一個整體，上半部分顯示地圖，下半部分顯示對應的駕校班型（我們是做駕校產品的），地圖沒有上間距，和班型下間距1-2個rem，班型和底部按鈕間距為1-2rem，適應於不同手機和不同大

一個很好用的移動端Lightbox特效外掛（二）

上一篇部落格本人主要是介紹了Lightbox外掛的一些語法，這篇文章主要是介紹本人用Lightbox外掛編寫的一個例項，讓大家更深入地瞭解這個Lightbox外掛。首先，看一下這個例項最終的效果：接下來，我們就看看這個效果是怎樣實現的吧。程式碼的

一個很好用的移動端Lightbox特效外掛（一）

Lightbox特效,即燈箱特效，類似於相簿預覽的效果，說得直白一些就是滑鼠點選圖片，這個圖片會浮起來全屏顯示。這個是在網頁開發中非常常見的一種特效。這種特效在網上有比較多的外掛可以使用，在PC端中有lokesh寫的lightbox2外掛，在移動端中有Photo