示例
+
@@ -28,10 +29,7 @@ export default {
data() {
return {
list: [
- {
- text: 'this is input value',
- type: 'default',
- },
+
],
}
},
@@ -42,6 +40,9 @@ export default {
type: 'plus',
})
},
+ removeContent(index) {
+ this.list.splice(index, 1)
+ },
},
}
@@ -56,6 +57,12 @@ export default {
.block-box {
background: #f7f7f7;
padding: 20px;
+ .plus {
+ cursor: pointer;
+ font-size: 24px;
+ font-weight: 550;
+ color: #7289b2;
+ }
.input-row {
display: flex;
From 13489836e7a209dbde70d8824dc77d2a2423774b Mon Sep 17 00:00:00 2001
From: vanoneang <525650856@qq.com>
Date: Mon, 17 Jun 2019 18:04:39 +0800
Subject: [PATCH 3/3] feat(plugin): add image preview;
---
.env.development | 2 +-
.env.production | 2 +-
package-lock.json | 96 ++++-------
package.json | 1 +
src/components/base/upload-imgs/index.vue | 18 +-
src/components/layout/ReuseTab.vue | 5 +-
src/lin/plugins/index.js | 1 +
src/lin/plugins/preview/index.js | 33 ++++
src/lin/plugins/preview/preview.vue | 194 ++++++++++++++++++++++
src/lin/plugins/preview/readme.md | 30 ++++
10 files changed, 308 insertions(+), 74 deletions(-)
create mode 100644 src/lin/plugins/preview/index.js
create mode 100644 src/lin/plugins/preview/preview.vue
create mode 100644 src/lin/plugins/preview/readme.md
diff --git a/.env.development b/.env.development
index db26413b..e723b043 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
ENV = 'development'
-VUE_APP_BASE_URL = 'http://localhost:5000/'
\ No newline at end of file
+VUE_APP_BASE_URL = 'http://dev.koa.7yue.pro/'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 3be01b50..626b7c10 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,3 @@
-VUE_APP_BASE_URL = 'http://localhost:5000/'
\ No newline at end of file
+VUE_APP_BASE_URL = 'http://dev.lin.colorful3.com/'
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fd14aa01..79e2e5f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "lin-cms",
- "version": "0.1.0-beta.2",
+ "version": "0.1.0-beta.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -1070,8 +1070,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
- "dev": true,
- "optional": true
+ "dev": true
},
"cross-spawn": {
"version": "5.1.0",
@@ -1218,7 +1217,6 @@
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
- "optional": true,
"requires": {
"ansi-regex": "^3.0.0"
}
@@ -6568,8 +6566,7 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
- "dev": true,
- "optional": true
+ "dev": true
},
"aproba": {
"version": "1.2.0",
@@ -6593,15 +6590,13 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
- "dev": true,
- "optional": true
+ "dev": true
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
- "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -6618,22 +6613,19 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
- "dev": true,
- "optional": true
+ "dev": true
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
- "dev": true,
- "optional": true
+ "dev": true
},
"console-control-strings": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
- "dev": true,
- "optional": true
+ "dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -6764,8 +6756,7 @@
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
- "dev": true,
- "optional": true
+ "dev": true
},
"ini": {
"version": "1.3.5",
@@ -6779,7 +6770,6 @@
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
- "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -6796,7 +6786,6 @@
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
- "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -6805,15 +6794,13 @@
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
- "dev": true,
- "optional": true
+ "dev": true
},
"minipass": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
"integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
"dev": true,
- "optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -6834,7 +6821,6 @@
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
- "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -6923,8 +6909,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
- "dev": true,
- "optional": true
+ "dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -6938,7 +6923,6 @@
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
- "optional": true,
"requires": {
"wrappy": "1"
}
@@ -7034,8 +7018,7 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
- "dev": true,
- "optional": true
+ "dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -7077,7 +7060,6 @@
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
- "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -7099,7 +7081,6 @@
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
- "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -7148,15 +7129,13 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
- "dev": true,
- "optional": true
+ "dev": true
},
"yallist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
"integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -7914,8 +7893,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"aproba": {
"version": "1.2.0",
@@ -7936,14 +7914,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -7958,20 +7934,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -8088,8 +8061,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"ini": {
"version": "1.3.5",
@@ -8101,7 +8073,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -8116,7 +8087,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -8124,14 +8094,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -8150,7 +8118,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -8231,8 +8198,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -8244,7 +8210,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"wrappy": "1"
}
@@ -8330,8 +8295,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -8367,7 +8331,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -8387,7 +8350,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -8431,14 +8393,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -12566,6 +12526,11 @@
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
"dev": true
},
+ "photoswipe": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-4.1.3.tgz",
+ "integrity": "sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA=="
+ },
"pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
@@ -13998,8 +13963,7 @@
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
"integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
- "dev": true,
- "optional": true
+ "dev": true
},
"rx-lite-aggregates": {
"version": "4.0.8",
diff --git a/package.json b/package.json
index 00adfc57..de9c8735 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"js-cookie": "^2.2.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
+ "photoswipe": "^4.1.2",
"screenfull": "^4.2.0",
"vue": "^2.6.8",
"vue-awesome-swiper": "^3.1.3",
diff --git a/src/components/base/upload-imgs/index.vue b/src/components/base/upload-imgs/index.vue
index 74c16cd8..499574b6 100644
--- a/src/components/base/upload-imgs/index.vue
+++ b/src/components/base/upload-imgs/index.vue
@@ -64,7 +64,7 @@
class="control-bottom-btn el-icon-view"
title="预览"
style="cursor: pointer;"
- @click.stop="previewImg(item)">
+ @click.stop="previewImg(item, i)">
`, '预览', {
- dangerouslyUseHTMLString: true,
+ previewImg(data, index) {
+ const images = []
+ this.itemList.forEach((element) => {
+ if (element.src) {
+ images.push(element.src)
+ }
+ })
+ this.$imagePreview({
+ images,
+ index,
})
+ // this.$confirm(`
`, '预览', {
+ // dangerouslyUseHTMLString: true,
+ // })
},
/**
* 移动图像位置
diff --git a/src/components/layout/ReuseTab.vue b/src/components/layout/ReuseTab.vue
index bbe17c84..7e2feba3 100644
--- a/src/components/layout/ReuseTab.vue
+++ b/src/components/layout/ReuseTab.vue
@@ -159,7 +159,7 @@ export default {
diff --git a/src/lin/plugins/preview/readme.md b/src/lin/plugins/preview/readme.md
new file mode 100644
index 00000000..569464c4
--- /dev/null
+++ b/src/lin/plugins/preview/readme.md
@@ -0,0 +1,30 @@
+# 图片预览插件
+
+## methods
+
+```
+this.$imagePreview(options = {})
+```
+
+options有三个参数
+
+参数 | 默认值 | 说明
+--- | ---| ---
+images | 空数组 | 图片的url数组
+index | 0 | 预览图片的索引值, 默认是0
+defaultOpt | {} | 配置项
+
+defaultOpt 的配置项请参考[photoswipe配置项](http://photoswipe.com/documentation/options.html)，
+
+```
+defaultOpt: {
+ fullscreenEl: true,
+ shareEl: false,
+ arrowEl: true,
+ preloaderEl: true,
+ loop: false,
+ bgOpacity: 0.85,
+ showHideOpacity: true,
+ errorMsg: '
-
+
图片加载失败
',
+}
+```
\ No newline at end of file