vue 注册共用filter
lopo1983 发表了文章 • 0 个评论 • 1362 次浏览 • 2017-04-28 16:43
import filters from './utils/filters'Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
import filters from './utils/filters'
Object.keys(filters).forEach(k => Vue.filter(k, filters[k])) 百度BOS 上传 Vue 2.x封装
lopo1983 发表了文章 • 0 个评论 • 1958 次浏览 • 2017-04-19 18:28
template
<div class="fileup">
<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />
<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>
<span>{{infomsg}}</span>
<div class="fileup-area" v-show="files.length">
<div class="col-md-2 files" v-for="(item,index) in files">
<div class="thumbnail">
<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">
<a class="ctr-bar" @click="delFile(index,item.key,item.status)">
<span class="iconfont icon-del"></span>
</a>
</div>
<div class="caption">
<p class="name">{{item.name}}</p>
<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>
<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>
</div>
</div>
</div>
</div>
<p class="btn-mix" v-if="files.length>0">
<a class="btn btn-ces" @click="sendFile">提交</a>
<a class="btn btn-default" @click="clearFile">取消</a>
</p>
</div>
javascript
import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'
import lib from "@/assets/js/lib"
import bsfProgress from '@/components/comp/progress'
import { bosConfig, bucket } from '@/config/bos'
let client = new baidubce.sdk.BosClient(bosConfig);
export default {
name: "bosupt",
components: {
bsfProgress
},
props: {
maxlength: {
type: Number,
default: 3
},
maxSize: {
type: Number,
default: 50000
}
},
data() {
return {
files: [],
infomsg:""
}
},
computed: {
rdid() {
return "up" + Math.ceil(Math.random() * 1000, 3);
}
},
methods: {
onFileChange(evt) {
let files = evt.target.files;
let _this = this;
if(files.length) {
for(let i = 0, len = files.length; i < len; i++) {
let file = files[i];
let fcobj = {
type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),
key: lib.randomStr(false, 5)
};
let o = {
file: file, // File 对象
status: 0, // 0：未上传 1：正在上传：2上传成功 3：上传失败
progress: 0, // 上传进度
type: fcobj.type,
key: fcobj.key,
name: file.name,
size: file.size,
path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type
};
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = (e) => {
o.src = e.target.result // base64 可以作为判断是不是存在相同文件
if(this.files.findIndex(f => f.src == o.src) > -1) {
return false
}
if(o.size <= _this.maxSize) {
this.files.push(o)
} else {
this.infomsg="图片太大了哦"
return false
}
};
};
}
Array.from(this.files).slice(0, this.maxlength)
},
delFile(index, key, status) {
if(status == 2) {
client.deleteObject(bucket, key).then(e => {
e && this.files.splice(index, 1);
}).catch(e => {
console.log(e)
})
} else {
this.files.splice(index, 1);
}
},
clearFile() {
let files = this.files;
this.files = [];
let ar = []
this.$refs.fileup.value = "";
this.$emit('clearfile', ar)
},
sendFile() {
this.files.forEach(o => {
if(o.status == 0) {
let file = o.file
let blob = file;
let keytext = o.type;
let key = o.key + keytext;
const ext = key.split(/\./g).pop();
let mimeType = baidubce.sdk.MimeType.guess(ext);
if(/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
let options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function(res) {})
.catch(function(err) {
console.error(err);
});
client.on('progress', function(evt) {
if(evt.lengthComputable) {
o.progress = (evt.loaded / evt.total) * 100;
o.status = 2;
}
});
}
});
let ar = []
this.files.forEach(e => {
ar.push(e.path)
});
this.$emit('sendfile', ar)
}
},
mounted: function() {
this.$nextTick(function() {
})
}
}
BOS 配置
bos.js
const bosConfig = {
credentials: {
ak: '',
sk: ''
},
endpoint: 'http://bj.bcebos.com'
}
const bucket = 'bucket名称';
export{bosConfig,bucket}
感谢戏子大爷 查看全部
<div class="fileup">
<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />
<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>
<span>{{infomsg}}</span>
<div class="fileup-area" v-show="files.length">
<div class="col-md-2 files" v-for="(item,index) in files">
<div class="thumbnail">
<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">
<a class="ctr-bar" @click="delFile(index,item.key,item.status)">
<span class="iconfont icon-del"></span>
</a>
</div>
<div class="caption">
<p class="name">{{item.name}}</p>
<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>
<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>
</div>
</div>
</div>
</div>
<p class="btn-mix" v-if="files.length>0">
<a class="btn btn-ces" @click="sendFile">提交</a>
<a class="btn btn-default" @click="clearFile">取消</a>
</p>
</div>
javascript
import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'
import lib from "@/assets/js/lib"
import bsfProgress from '@/components/comp/progress'
import { bosConfig, bucket } from '@/config/bos'
let client = new baidubce.sdk.BosClient(bosConfig);
export default {
name: "bosupt",
components: {
bsfProgress
},
props: {
maxlength: {
type: Number,
default: 3
},
maxSize: {
type: Number,
default: 50000
}
},
data() {
return {
files: [],
infomsg:""
}
},
computed: {
rdid() {
return "up" + Math.ceil(Math.random() * 1000, 3);
}
},
methods: {
onFileChange(evt) {
let files = evt.target.files;
let _this = this;
if(files.length) {
for(let i = 0, len = files.length; i < len; i++) {
let file = files[i];
let fcobj = {
type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),
key: lib.randomStr(false, 5)
};
let o = {
file: file, // File 对象
status: 0, // 0：未上传 1：正在上传：2上传成功 3：上传失败
progress: 0, // 上传进度
type: fcobj.type,
key: fcobj.key,
name: file.name,
size: file.size,
path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type
};
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = (e) => {
o.src = e.target.result // base64 可以作为判断是不是存在相同文件
if(this.files.findIndex(f => f.src == o.src) > -1) {
return false
}
if(o.size <= _this.maxSize) {
this.files.push(o)
} else {
this.infomsg="图片太大了哦"
return false
}
};
};
}
Array.from(this.files).slice(0, this.maxlength)
},
delFile(index, key, status) {
if(status == 2) {
client.deleteObject(bucket, key).then(e => {
e && this.files.splice(index, 1);
}).catch(e => {
console.log(e)
})
} else {
this.files.splice(index, 1);
}
},
clearFile() {
let files = this.files;
this.files = [];
let ar = []
this.$refs.fileup.value = "";
this.$emit('clearfile', ar)
},
sendFile() {
this.files.forEach(o => {
if(o.status == 0) {
let file = o.file
let blob = file;
let keytext = o.type;
let key = o.key + keytext;
const ext = key.split(/\./g).pop();
let mimeType = baidubce.sdk.MimeType.guess(ext);
if(/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
let options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function(res) {})
.catch(function(err) {
console.error(err);
});
client.on('progress', function(evt) {
if(evt.lengthComputable) {
o.progress = (evt.loaded / evt.total) * 100;
o.status = 2;
}
});
}
});
let ar = []
this.files.forEach(e => {
ar.push(e.path)
});
this.$emit('sendfile', ar)
}
},
mounted: function() {
this.$nextTick(function() {
})
}
}
BOS 配置
bos.js
const bosConfig = {
credentials: {
ak: '',
sk: ''
},
endpoint: 'http://bj.bcebos.com'
}
const bucket = 'bucket名称';
export{bosConfig,bucket}
感谢戏子大爷 查看全部
template
javascript
BOS 配置
bos.js
感谢戏子大爷
<div class="fileup">
<input type="file" ref="fileup" multiple="multiple" class="hide" name="fileUp" :id="rdid" @change="onFileChange" />
<label class="btn btn-ces" :for="rdid"><span class="iconfont icon-add"></span>选择文件</label>
<span>{{infomsg}}</span>
<div class="fileup-area" v-show="files.length">
<div class="col-md-2 files" v-for="(item,index) in files">
<div class="thumbnail">
<div class="thumbnail-object" :style="{'background-image':`url(${item.src})`}">
<a class="ctr-bar" @click="delFile(index,item.key,item.status)">
<span class="iconfont icon-del"></span>
</a>
</div>
<div class="caption">
<p class="name">{{item.name}}</p>
<span class="iconfont icon-zhengque text-success" v-if="item.status==2"></span>
<bsf-progress :state="item.progress" v-if="item.progress<100"></bsf-progress>
</div>
</div>
</div>
</div>
<p class="btn-mix" v-if="files.length>0">
<a class="btn btn-ces" @click="sendFile">提交</a>
<a class="btn btn-default" @click="clearFile">取消</a>
</p>
</div>
javascript
import bos from '@/assets/js/bce-sdk-js/baidubce-sdk.bundle'
import lib from "@/assets/js/lib"
import bsfProgress from '@/components/comp/progress'
import { bosConfig, bucket } from '@/config/bos'
let client = new baidubce.sdk.BosClient(bosConfig);
export default {
name: "bosupt",
components: {
bsfProgress
},
props: {
maxlength: {
type: Number,
default: 3
},
maxSize: {
type: Number,
default: 50000
}
},
data() {
return {
files: [],
infomsg:""
}
},
computed: {
rdid() {
return "up" + Math.ceil(Math.random() * 1000, 3);
}
},
methods: {
onFileChange(evt) {
let files = evt.target.files;
let _this = this;
if(files.length) {
for(let i = 0, len = files.length; i < len; i++) {
let file = files[i];
let fcobj = {
type: file.name.substring(file.name.lastIndexOf('.')).toLowerCase(),
key: lib.randomStr(false, 5)
};
let o = {
file: file, // File 对象
status: 0, // 0：未上传 1：正在上传：2上传成功 3：上传失败
progress: 0, // 上传进度
type: fcobj.type,
key: fcobj.key,
name: file.name,
size: file.size,
path: "http://" + bucket + ".bj.bcebos.com/" + fcobj.key + fcobj.type
};
let reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = (e) => {
o.src = e.target.result // base64 可以作为判断是不是存在相同文件
if(this.files.findIndex(f => f.src == o.src) > -1) {
return false
}
if(o.size <= _this.maxSize) {
this.files.push(o)
} else {
this.infomsg="图片太大了哦"
return false
}
};
};
}
Array.from(this.files).slice(0, this.maxlength)
},
delFile(index, key, status) {
if(status == 2) {
client.deleteObject(bucket, key).then(e => {
e && this.files.splice(index, 1);
}).catch(e => {
console.log(e)
})
} else {
this.files.splice(index, 1);
}
},
clearFile() {
let files = this.files;
this.files = [];
let ar = []
this.$refs.fileup.value = "";
this.$emit('clearfile', ar)
},
sendFile() {
this.files.forEach(o => {
if(o.status == 0) {
let file = o.file
let blob = file;
let keytext = o.type;
let key = o.key + keytext;
const ext = key.split(/\./g).pop();
let mimeType = baidubce.sdk.MimeType.guess(ext);
if(/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
let options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function(res) {})
.catch(function(err) {
console.error(err);
});
client.on('progress', function(evt) {
if(evt.lengthComputable) {
o.progress = (evt.loaded / evt.total) * 100;
o.status = 2;
}
});
}
});
let ar = []
this.files.forEach(e => {
ar.push(e.path)
});
this.$emit('sendfile', ar)
}
},
mounted: function() {
this.$nextTick(function() {
})
}
}
BOS 配置
bos.js
const bosConfig = {
credentials: {
ak: '',
sk: ''
},
endpoint: 'http://bj.bcebos.com'
}
const bucket = 'bucket名称';
export{bosConfig,bucket}感谢戏子大爷
vue-cli打包
lopo1983 发表了文章 • 0 个评论 • 1733 次浏览 • 2017-04-15 17:00
1.要是项目直接放网站根目录 直接npm run build2.放到指定目录
? 修改：config/index.jsbuild: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/XXX/', // 项目发布的目录
...
},3.放任意目录
? 修改：config/index.jsbuild: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
},4.修改js/css打包名称
build/webpack.prod.conf.js output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[hash].js'),
chunkFilename: utils.assetsPath('js/[id].[hash].js')
},
[name]：名称
[id]:懒加载编号
[hash] 随机码（项目正式上线可删除） new ExtractTextPlugin({
filename: utils.assetsPath('css/[name][hash].css')
}),name：名称
hash 随机码 查看全部
? 修改：config/index.jsbuild: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/XXX/', // 项目发布的目录
...
},3.放任意目录
? 修改：config/index.jsbuild: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
},4.修改js/css打包名称
build/webpack.prod.conf.js output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[hash].js'),
chunkFilename: utils.assetsPath('js/[id].[hash].js')
},
[name]：名称
[id]:懒加载编号
[hash] 随机码（项目正式上线可删除） new ExtractTextPlugin({
filename: utils.assetsPath('css/[name][hash].css')
}),name：名称
hash 随机码 查看全部
1.要是项目直接放网站根目录 直接
? 修改：config/index.js
? 修改：config/index.js
build/webpack.prod.conf.js
[id]:懒加载编号
[hash] 随机码（项目正式上线可删除）
hash 随机码
npm run build2.放到指定目录
? 修改：config/index.js
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/XXX/', // 项目发布的目录
...
},3.放任意目录? 修改：config/index.js
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
},4.修改js/css打包名称build/webpack.prod.conf.js
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[hash].js'),
chunkFilename: utils.assetsPath('js/[id].[hash].js')
},
[name]：名称[id]:懒加载编号
[hash] 随机码（项目正式上线可删除）
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name][hash].css')
}),name：名称hash 随机码
VUE 开发环境搭建
lopo1983 发表了文章 • 0 个评论 • 1985 次浏览 • 2017-04-15 16:05
安装Node.js
.......忽略点点 自己百度?
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cil
cnpm install -g vue-cli 切换到你的项目目录如www
cd www新建vue项目
vue init webpack demo01 一路回车（第4步ESLint 可以一路n，大师请忽略n）
?
进入新建项目
cd demo01 cnpm?install?
npm run dev
?
? 查看全部
.......忽略点点 自己百度?
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cil
cnpm install -g vue-cli 切换到你的项目目录如www
cd www新建vue项目
vue init webpack demo01 一路回车（第4步ESLint 可以一路n，大师请忽略n）
?
进入新建项目
cd demo01 cnpm?install?
npm run dev
?
? 查看全部
安装Node.js
安装淘宝镜像
?
进入新建项目
?
?
.......忽略点点 自己百度?
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cil
cnpm install -g vue-cli切换到你的项目目录如www
cd www新建vue项目
vue init webpack demo01一路回车（第4步ESLint 可以一路n，大师请忽略n）
?
进入新建项目
cd demo01
cnpm?install?
npm run dev
?
?
vue 滚动到底部
lopo1983 发表了文章 • 0 个评论 • 3092 次浏览 • 2017-04-13 03:04
template<div class="mix" ref="chatbox">....</div>
datadata() {
return {
userMsg:
}
}
?
?
methodsgoBottom(e) {
e.scrollTop = e.scrollHeight
}mounted(如果需要进入就滚动）mounted: function() {
this.$nextTick(function() {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
watch（如果响应）watch: {
userMsg() {
this.$nextTick(() => {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
}?
?
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略 因为出现了 邪恶分割线
?
CSS3 FLEX 布局解决display: flex;
flex-flow: column-reverse;
align-items: baseline; 查看全部
datadata() {
return {
userMsg:
}
}
?
?
methodsgoBottom(e) {
e.scrollTop = e.scrollHeight
}mounted(如果需要进入就滚动）mounted: function() {
this.$nextTick(function() {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
watch（如果响应）watch: {
userMsg() {
this.$nextTick(() => {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
}?
?
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略 因为出现了 邪恶分割线
?
CSS3 FLEX 布局解决display: flex;
flex-flow: column-reverse;
align-items: baseline; 查看全部
template
data
?
?
methods
watch（如果响应）
?
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略 因为出现了 邪恶分割线
?
CSS3 FLEX 布局解决
<div class="mix" ref="chatbox">....</div>
data
data() {
return {
userMsg:
}
}?
?
methods
goBottom(e) {
e.scrollTop = e.scrollHeight
}mounted(如果需要进入就滚动）mounted: function() {
this.$nextTick(function() {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}watch（如果响应）
watch: {
userMsg() {
this.$nextTick(() => {
let e = this.$refs.chatbox;
this.goBottom(e);
})
}
}??
<-------------------------------------------------邪恶分割线------------------------------------------------>
?
?
以上的代码完全可忽略 因为出现了 邪恶分割线
?
CSS3 FLEX 布局解决
display: flex;
flex-flow: column-reverse;
align-items: baseline;
vue multiple type="file" 多文件上传
lopo1983 发表了文章 • 0 个评论 • 2842 次浏览 • 2017-04-13 02:56
template<input class="hide" multiple type="file" name="fileup" id="upfile" accept="application/x-zip-compressed" value="" @change="onFileChange" multiple="multiple" />
<label class="btn btn-default" for="upfile">选择文件</label>?
methodsonFileChange(e) {
const files = e.target.files || e.dataTransfer.files;
let a =
Array.from(files, item => {
a.push({
name: item.name,
type: item.name.split('.')[1]
})
});
this.arrfile = a;
}
发送（使用axios FormData）addChat(oid, def) {
let data = new FormData(def);
data.append('uid', window.USER_ID);
data.append('oid', oid);
data.append('guest',true)
return fetch('chat', data);
}sendChat() {
let def = this.$refs.chatform;
api.addChat(this.getOid, def).then(response => {
if(!!response) {
this.getChat()
} else {
alert("非法操作")
}
}), response => {
this.loading = false;
this.errorinfo = "加载失败....服务器出小差了"
}
}
? 查看全部
<label class="btn btn-default" for="upfile">选择文件</label>?
methodsonFileChange(e) {
const files = e.target.files || e.dataTransfer.files;
let a =
Array.from(files, item => {
a.push({
name: item.name,
type: item.name.split('.')[1]
})
});
this.arrfile = a;
}
发送（使用axios FormData）addChat(oid, def) {
let data = new FormData(def);
data.append('uid', window.USER_ID);
data.append('oid', oid);
data.append('guest',true)
return fetch('chat', data);
}sendChat() {
let def = this.$refs.chatform;
api.addChat(this.getOid, def).then(response => {
if(!!response) {
this.getChat()
} else {
alert("非法操作")
}
}), response => {
this.loading = false;
this.errorinfo = "加载失败....服务器出小差了"
}
}
? 查看全部
template
methods
发送（使用axios FormData）
?
<input class="hide" multiple type="file" name="fileup" id="upfile" accept="application/x-zip-compressed" value="" @change="onFileChange" multiple="multiple" />?
<label class="btn btn-default" for="upfile">选择文件</label>
methods
onFileChange(e) {
const files = e.target.files || e.dataTransfer.files;
let a =
Array.from(files, item => {
a.push({
name: item.name,
type: item.name.split('.')[1]
})
});
this.arrfile = a;
}发送（使用axios FormData）
addChat(oid, def) {
let data = new FormData(def);
data.append('uid', window.USER_ID);
data.append('oid', oid);
data.append('guest',true)
return fetch('chat', data);
}sendChat() {
let def = this.$refs.chatform;
api.addChat(this.getOid, def).then(response => {
if(!!response) {
this.getChat()
} else {
alert("非法操作")
}
}), response => {
this.loading = false;
this.errorinfo = "加载失败....服务器出小差了"
}
}?