Add vue-core-image-upload
lin-xin
parent
f96ba1afac
commit
1bdfc745ef
|
|
@ -2,37 +2,45 @@
|
|||
var path = require('path')
|
||||
|
||||
module.exports = {
|
||||
build: {
|
||||
env: require('./prod.env'),
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
productionSourceMap: true,
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report
|
||||
},
|
||||
dev: {
|
||||
env: require('./dev.env'),
|
||||
port: 8080,
|
||||
autoOpenBrowser: true,
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
// with this option, according to the CSS-Loader README
|
||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
// In our experience, they generally work as expected,
|
||||
// just be aware of this issue when enabling this option.
|
||||
cssSourceMap: false
|
||||
}
|
||||
build: {
|
||||
env: require('./prod.env'),
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
productionSourceMap: true,
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report
|
||||
},
|
||||
dev: {
|
||||
env: require('./dev.env'),
|
||||
port: 8080,
|
||||
autoOpenBrowser: true,
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {
|
||||
'/api':{
|
||||
target:'http://jsonplaceholder.typicode.com',
|
||||
changeOrigin:true,
|
||||
pathRewrite:{
|
||||
'^/api':''
|
||||
}
|
||||
}
|
||||
},
|
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
// with this option, according to the CSS-Loader README
|
||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
// In our experience, they generally work as expected,
|
||||
// just be aware of this issue when enabling this option.
|
||||
cssSourceMap: false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
12
index.html
12
index.html
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>manage-system</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"axios": "^0.15.3",
|
||||
"element-ui": "^1.1.6",
|
||||
"vue": "^2.1.10",
|
||||
"vue-core-image-upload": "^2.0.5",
|
||||
"vue-datasource": "^1.0.4",
|
||||
"vue-quill-editor": "^1.1.1",
|
||||
"vue-router": "^2.2.0",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<el-menu-item index="baseform">基本表单</el-menu-item>
|
||||
<el-menu-item index="vueeditor">编辑器</el-menu-item>
|
||||
<el-menu-item index="markdown">markdown</el-menu-item>
|
||||
<el-menu-item index="2-3">文件上传</el-menu-item>
|
||||
<el-menu-item index="upload">文件上传</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template slot="title"><i class="el-icon-star-on"></i>UI元素</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>图片上传</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
|
||||
访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
|
||||
</div>
|
||||
<img class="pre-img" :src="src" alt="">
|
||||
<vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
|
||||
:crop="true"
|
||||
text="上传图片"
|
||||
url="/api/posts/"
|
||||
extensions="png,gif,jpeg,jpg"
|
||||
v-on:imageuploaded="imageuploaded"></vue-core-image-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueCoreImageUpload from 'vue-core-image-upload';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
src: '../../../static/img/img.jpg',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCoreImageUpload
|
||||
},
|
||||
methods:{
|
||||
imageuploaded(res) {
|
||||
console.log(res)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pre-img{
|
||||
width:250px;
|
||||
height: 250px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pure-button{
|
||||
width:150px;
|
||||
height:40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: #00a2ff;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.g-core-image-corp-container .info-aside{
|
||||
height:45px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -81,7 +81,6 @@
|
|||
},
|
||||
beforeMount(){
|
||||
axios.get('../../../static/data.json').then( (res) => {
|
||||
console.log(res.data)
|
||||
this.information = res.data;
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,10 @@ export default new Router({
|
|||
{
|
||||
path: '/markdown',
|
||||
component: resolve => require(['../components/page/Markdown.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/upload',
|
||||
component: resolve => require(['../components/page/Upload.vue'], resolve)
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Loading…
Reference in New Issue