基于vue.js的圖片預(yù)覽組件2.0.1

kelvinlee 發(fā)布于2019-08-29 12:25 / 793人閱讀

基于vue.js的圖片預(yù)覽組件

Github

github

安裝

npm install enlargeimg --save-dev


import enlargeimg from "enlargeimg";

基礎(chǔ)用法

 



export default {
  name: "hello",
  data () {
    return {
      msg: "Welcome to Your Vue.js App",
      files:[
    {
      path:"http://img4q.duitang.com/uploads/item/201311/01/20131101141757_tunaj.png"
    },
    {
      path:"http://img5.duitang.com/uploads/item/201503/22/20150322122457_EQ3NP.thumb.700_0.jpeg"
    },
    {
      path:"http://tupian.enterdesk.com/uploadfile/2013/1219/20131219053302481.jpg"
    },
  ]
    }
  },
}

注意事項(xiàng)

圖片地址為path

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111882.html

相關(guān)文章

基于vue.js的圖片預(yù)覽組件2.0.1

基于vue.js的圖片預(yù)覽組件 Github github 安裝 npm install enlargeimg --save-dev import enlargeimg from enlargeimg; 基礎(chǔ)用法 export default { name: hello, data () { return { msg: Welcome to You...

dabai 2019-08-20 15:47 評論0 收藏0
基于vue.js的圖片預(yù)覽組件2.0.1

基于vue.js的圖片預(yù)覽組件 Github github 安裝 npm install enlargeimg --save-dev import enlargeimg from enlargeimg; 基礎(chǔ)用法 export default { name: hello, data () { return { msg: Welcome to You...

zhangke3016 2019-08-01 16:39 評論0 收藏0
基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件

摘要：如果插件是一個(gè)對象，必須提供方法。當(dāng)方法被同一個(gè)插件多次調(diào)用，插件將只會被安裝一次。的插件應(yīng)當(dāng)有一個(gè)公開方法。不用，去掉這個(gè)屬性，但是會污染全局樣式，可配合或者推薦，所有樣式寫在當(dāng)前組件或下面組件源碼放大圖片更多組件點(diǎn)擊這兒這是一個(gè)簡單的點(diǎn)擊圖片預(yù)覽的組件順便記錄一下寫組件期間踩的vue中scope的坑~showImg(https://segmentfault.com/img/bVb...

iOS122 2019-08-26 13:38 評論0 收藏0
基于Vue + Node.js + MongoDB的圖片上傳組件，實(shí)現(xiàn)圖片的預(yù)覽和刪除

摘要：網(wǎng)址功能單圖多圖上傳圖片上傳預(yù)覽上傳進(jìn)度條分組上傳，分組查詢新建分組，刪除分組刪除圖片選擇圖片目錄結(jié)構(gòu)前端利用搭建，中引入子組件。實(shí)現(xiàn)分組的新增查詢刪除。利用模塊實(shí)現(xiàn)刪除文件功能。公司要寫一些為自身業(yè)務(wù)量身定制的的組件，要基于Vue,寫完后擴(kuò)展了一下功能，選擇寫圖片上傳是因?yàn)樽约褐耙恢睂@個(gè)功能比較迷糊，所以這次好好了解了一下。演示在網(wǎng)址打開后的show.gif中。使用技術(shù)：Vu...

hzx 2019-06-26 17:30 評論0 收藏0
基于vue.js的圖像預(yù)覽組件

摘要：基于圖像預(yù)覽組件更多的手勢操作還是開發(fā)中安裝基礎(chǔ)用法選項(xiàng)當(dāng)前點(diǎn)擊的圖片所有的圖片列表圖片的寬度圖片的高度圖片的的地址例子注意需要配合原文 Overview 基于vue.js圖像預(yù)覽組件更多的手勢操作還是開發(fā)中 Demo vue-fancybox Github github 安裝 npm install vue-fancybox --save import fancyBox from ...

sevi_stuo 2019-08-22 10:48 評論0 收藏0