Bootstrap/Html5/Css3 问答社区

vue 注册共用filter

VUE • lopo1983 发表了文章 • 0 个评论 • 1363 次浏览 • 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]))

JavaScript的Math对象

javascript/jQuery • boloog 发表了文章 • 0 个评论 • 1760 次浏览 • 2017-04-27 20:30 • 来自相关话题

1.?写一个函数，返回从min到max之间的随机整数，包括min不包括max
?function randomNumber(min,max){
return Math.floor(Math.random() * (max-min) + min);
}
randomNumber(10,15);
?2.?写一个函数，返回从min都max之间的随机整数，包括min包括max
?function randomNumber(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
randomNumber(2,8);
3.?写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括0到9，a到 z，A到Z。
?function getRandStr(num){
var str = '0123456789qwertyuiopasdfghjklzxcvbnmPOIUYTREWQASDFGHJKLMNBVCXZ';
var newStr = '';
for(var i = 0; i < parseInt(num); i++){
newStr += str[ Math.floor(Math.random() * str.length) ];
}
return newStr;
}
getRandStr(10);
4.?写一个函数，生成一个随机 IP 地址，一个合法的 IP 地址为 0.0.0.0~255.255.255.255
?function getRandIP(){
var newIp = "";
for(var i =0; i < 4; i++){
newIp += Math.floor(Math.random() * 255) + 1 +',';
}
return newIp.substring(0, newIp.length-1);
}
getRandIP();
5.?写一个函数，生成一个随机颜色字符串，合法的颜色为#000000~ #ffffff
?function getRandColor(){
var str = '1234567890abcdef';
var colorStr = '#';
for(var i =0; i < 6; i++){
colorStr += str[ Math.floor(Math.random() * str.length) ];
}
return colorStr;
}
var color = getRandColor();
document.body.style.backgroundColor = color;

? 查看全部

1.?写一个函数，返回从min到max之间的随机整数，包括min不包括max
?

function randomNumber(min,max){

    return Math.floor(Math.random() * (max-min) + min);

}

randomNumber(10,15);

?2.?写一个函数，返回从min都max之间的随机整数，包括min包括max
?

function randomNumber(min,max){

    return Math.floor(Math.random() * (max - min + 1)) + min;

}

randomNumber(2,8);

3.?写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括0到9，a到 z，A到Z。
?

function getRandStr(num){

    var str = '0123456789qwertyuiopasdfghjklzxcvbnmPOIUYTREWQASDFGHJKLMNBVCXZ';

    var newStr = '';

    for(var i = 0; i < parseInt(num); i++){

        newStr += str[ Math.floor(Math.random() * str.length) ];

    }

    return newStr;

}

getRandStr(10);

4.?写一个函数，生成一个随机 IP 地址，一个合法的 IP 地址为 0.0.0.0~255.255.255.255
?

function getRandIP(){

    var newIp = "";

    for(var i =0; i < 4; i++){

        newIp += Math.floor(Math.random() * 255) + 1 +',';

    }

    return newIp.substring(0, newIp.length-1);

}

getRandIP();

5.?写一个函数，生成一个随机颜色字符串，合法的颜色为#000000~ #ffffff
?

function getRandColor(){

    var str = '1234567890abcdef';

    var colorStr = '#';

    for(var i =0; i < 6; i++){

        colorStr += str[ Math.floor(Math.random() * str.length) ];

    }

    return colorStr;

}

var color = getRandColor();

document.body.style.backgroundColor = color;

JavaScript字符串简单操作

javascript/jQuery • boloog 发表了文章 • 0 个评论 • 1676 次浏览 • 2017-04-26 20:09 • 来自相关话题

1.?判断一个字符串是不是回文字符串，如 abcdcba是回文字符串, abcdcbb不是。
function isPalindrome(str){
return str === str.split("").reverse().join("");
}
isPalindrome('abcdcba');
?2.?统计字符串里出现出现频率最多的字符
function getCount(str){
var obj = {};
for (var i = 0; i < str.length; i++) {
var index = str[i];
if(obj[index]){
obj[index]++;
}else{
obj[index] = 1;
}
}
console.log(obj); // 当前对象
var maxNumber = 0,maxString="";
for(var key in obj){
if(obj[key] > maxNumber){
maxNumber = obj[key];
maxString = key;
}
}
console.log("字符"+ maxString+"出现频率最多"+ maxNumber+"次");
}
getCount('abefsfscfffdcbaa');
?3.?返回第一个字母为大写的字符
?
function ucFirst(str){
var newStr = str.charAt(0).toUpperCase()+ str.slice(1, str.length);
return newStr;
}
ucFirst("bsfans");
?4.?把my-short-string形式的字符串转化成myShortString形式的字符串
function camelize(str){
var newArr = str.split("-");
var newStr = '';
for (var i = 0; i < newArr.length; i++) {
newStr += newArr[i].charAt(0).toUpperCase()+newArr[i].slice(1,newArr[i].length);
}
console.log(newStr.slice(0,1).toLowerCase() + newStr.slice(1,newStr.length));
}
camelize("background-color");
camelize("list-style-image");
?
?
? 查看全部

1.?判断一个字符串是不是回文字符串，如 abcdcba是回文字符串, abcdcbb不是。

function isPalindrome(str){

    return str === str.split("").reverse().join("");

}

isPalindrome('abcdcba');

?2.?统计字符串里出现出现频率最多的字符

function getCount(str){

    var obj = {};

    for (var i = 0; i < str.length; i++) {

        var index = str[i]; 

        if(obj[index]){

            obj[index]++;

        }else{

            obj[index] = 1;

        }

    }

    console.log(obj); // 当前对象

    var maxNumber = 0,maxString="";

    for(var key in obj){

        if(obj[key] > maxNumber){

            maxNumber = obj[key];

            maxString = key;

        }

    }

    console.log("字符"+ maxString+"出现频率最多"+ maxNumber+"次"); 

}

getCount('abefsfscfffdcbaa');

?3.?返回第一个字母为大写的字符
?

function ucFirst(str){

    var newStr = str.charAt(0).toUpperCase()+ str.slice(1, str.length);

    return  newStr;

}

ucFirst("bsfans");

?4.?把my-short-string形式的字符串转化成myShortString形式的字符串

function camelize(str){

    var newArr = str.split("-");

    var newStr = '';

    for (var i = 0; i < newArr.length; i++) {

        newStr += newArr[i].charAt(0).toUpperCase()+newArr[i].slice(1,newArr[i].length);

    }

    console.log(newStr.slice(0,1).toLowerCase() + newStr.slice(1,newStr.length));

}

camelize("background-color");

camelize("list-style-image");

?
?
?

JavaScript对象浅拷贝和深拷贝

javascript/jQuery • boloog 发表了文章 • 1 个评论 • 1334 次浏览 • 2017-04-25 19:01 • 来自相关话题

创建一个对象
var obj = {
name:'柏龙',
age: 30,
sex: '男',
hobby: ['writeCode','playGame','readBook'],
friend: {
name: 'luobo',
age: 20
}
}
?浅拷贝实例代码
?
function shallowCopy(oldObj) {
var newObj = {};
for(var i in oldObj) {
if(oldObj.hasOwnProperty(i)) {
newObj[i] = oldObj[i];
}
}
return newObj;
}

var copy1 = shallowCopy(obj);
obj.friend.name = '萝卜';
console.log(obj);
console.log(copy1);
深拷贝实例代码1
?
function copy(oldObj){
var newObj = {};
for(var key in oldObj){
if(typeof oldObj[key] === 'string' || typeof oldObj[key] === 'number' || typeof oldObj[key] === 'boolean' || typeof oldObj[key] === 'undefined' || oldObj[key] === null ){
newObj[key] = oldObj[key];
}else{
newObj[key] = copy(oldObj[key]);
}
}
return newObj;
}
var copy2 = copy(obj);
obj.friend.name = '萝卜';
console.log(obj);
console.log(copy2);
?
深拷贝实例代码2
?
function setCopy(oldObj){
var newObj = JSON.parse(JSON.stringify(oldObj));
return newObj;
}
var copy3 = setCopy(obj);
copy3.name = 'xiaoqiao';
copy3.age = 22;
copy3.friend.name = '帮主';
obj.name = 'bsfans';
console.log(obj);
console.log(copy3);
?
?
?
?
?
?
?
?
? 查看全部

创建一个对象

var obj = {

    name:'柏龙',

    age: 30,

    sex: '男',

    hobby: ['writeCode','playGame','readBook'],

    friend: {

        name: 'luobo',

        age: 20

    }

}

?浅拷贝实例代码
?

function shallowCopy(oldObj) {

    var newObj = {};

    for(var i in oldObj) {

        if(oldObj.hasOwnProperty(i)) {

            newObj[i] = oldObj[i];

        }

    }

    return newObj;

}



var copy1 = shallowCopy(obj);

obj.friend.name = '萝卜';

console.log(obj);

console.log(copy1);

深拷贝实例代码1
?

function copy(oldObj){

    var newObj = {};

    for(var key in oldObj){

        if(typeof oldObj[key] === 'string' || typeof oldObj[key] === 'number' || typeof oldObj[key] === 'boolean' || typeof oldObj[key] === 'undefined' || oldObj[key] === null ){

            newObj[key] = oldObj[key];

        }else{

            newObj[key] = copy(oldObj[key]);

        }

    }

    return newObj;

}

var copy2 = copy(obj);

obj.friend.name = '萝卜';

console.log(obj);

console.log(copy2);

?
深拷贝实例代码2
?

function setCopy(oldObj){

    var newObj = JSON.parse(JSON.stringify(oldObj));

    return newObj;

}

var copy3 = setCopy(obj);

copy3.name = 'xiaoqiao';

copy3.age = 22;

copy3.friend.name = '帮主';

obj.name = 'bsfans';

console.log(obj);

console.log(copy3);

?
?
?
?
?
?
?
?
?

过滤数组，生成新数组

javascript/jQuery • boloog 发表了文章 • 1 个评论 • 1454 次浏览 • 2017-04-24 20:02 • 来自相关话题

过滤数组，只保留正数，直接在原数组上操作
题目：var arr = [3,1,0,-1,-3,2,-5]
function filter(arr){
// code...
}
filter(arr)
console.log(arr) // [3,1,2]解答：var arr = [3,1,0,-1,-3,2,-5];
function filter(arr){
for(var i = 0; i< arr.length; i++){
if(arr[i] < 0){
arr.splice(i--,1); // 当前索引值截取出来
}
}
}
filter(arr);
console.log(arr); // [3,1,2]
[/i]
?过滤数组，只保留正数，原数组不变，生成新数组
题目：var arr = [3,1,0,-1,-3,2,-5]
function filter(arr){
// code...
}
var arr2 = filter(arr)
console.log(arr2) // [3,1,2]
console.log(arr) // [3,1,0,-1,-2,2,-5]解答：[i]var arr = [3,1,0,-1,-3,2,-5]
function filter(arr){
var newArr = ;
for (var i = 0; i < arr.length; i++) {
if(arr[i] > 0){
newArr.push(arr[i]);
}
}
return newArr;
}
var arr2 = filter(arr);

console.log(arr2) // [3,1,2]
console.log(arr) // [3,1,0,-1,-2,2,-5][/i][/i][/i] 查看全部

过滤数组，只保留正数，直接在原数组上操作
题目：

var arr = [3,1,0,-1,-3,2,-5]

function filter(arr){

// code...

}

filter(arr)

console.log(arr) // [3,1,2]

解答：

var arr = [3,1,0,-1,-3,2,-5];

function filter(arr){

    for(var i = 0; i< arr.length; i++){

        if(arr[i] < 0){

            arr.splice(i--,1); // 当前索引值截取出来

        }

    }

}

filter(arr);

console.log(arr); // [3,1,2]

[/i]

?过滤数组，只保留正数，原数组不变，生成新数组
题目：

var arr = [3,1,0,-1,-3,2,-5]

function filter(arr){

// code...

}

var arr2 = filter(arr)

console.log(arr2) // [3,1,2]

console.log(arr)  // [3,1,0,-1,-2,2,-5]

解答：

[i]var arr = [3,1,0,-1,-3,2,-5]

function filter(arr){

    var newArr = ;

    for (var i = 0; i < arr.length; i++) {

        if(arr[i] > 0){

            newArr.push(arr[i]);

        }

    }

    return newArr;

}

var arr2 = filter(arr);



console.log(arr2) // [3,1,2]

console.log(arr)  // [3,1,0,-1,-2,2,-5][/i][/i][/i]

43 位随机码生成（0~9 A~Z a~z）可定义位数（位数可随机）

javascript/jQuery • lopo1983 发表了文章 • 2 个评论 • 1470 次浏览 • 2017-04-22 16:20 • 来自相关话题

//43位随机串是否指定位数最小位数最大位数 (false 43)43位随机
randomStr: (randomFlag, min, max) => {
let str = "",
range = min,
arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
if(randomFlag) {
range = Math.round(Math.random() * (max - min)) + min;
}
for(let i = 0; i < range; i++) {
let pos = Math.round(Math.random() * (arr.length - 1));
str += arr[pos];
}
return str;
} 查看全部

	//43位随机串 是否指定位数 最小位数 最大位数 (false 43)43位随机

	randomStr: (randomFlag, min, max) => {

		let str = "",

			range = min,

			arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

		if(randomFlag) {

			range = Math.round(Math.random() * (max - min)) + min;

		}

		for(let i = 0; i < range; i++) {

			let pos = Math.round(Math.random() * (arr.length - 1));

			str += arr[pos];

		}

		return str;

	}

网页媒体播放器都有哪些？

贡献

HTML • lopo1983 回复了问题 • 2 人关注 • 1 个回复 • 2353 次浏览 • 2017-04-21 16:08 • 来自相关话题

HTML5 中的新属性 async和defer区别

HTML • boloog 发表了文章 • 0 个评论 • 1681 次浏览 • 2017-04-20 18:30 • 来自相关话题

浏览器支持情况：
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持?async?defer?属性。
?
简述：<script async src="common.js"></script>有?async?脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
?<script defer src="index.js"></script>
?有?defer?脚本将在页面完成解析时执行，但 index.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。<script src="index.js"></script>
?没有?defer?或?async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该?script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
?

实例代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 中的新属性 async和defer区别</title>
</head>
<body>
<script async src="./common.js"></script>
<script defer src="./index.js"></script>
<script>
console.log(1111);
</script>
</body>
</html>
?运行结果：1111
index.js
common.js
?
?
?
? 查看全部

浏览器支持情况：
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持?async?defer?属性。
?
简述：

<script async src="common.js"></script>

有?async?脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
?

<script defer src="index.js"></script>

?有?defer?脚本将在页面完成解析时执行，但 index.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

<script src="index.js"></script>

?没有?defer?或?async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该?script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
?

实例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5 中的新属性 async和defer区别</title>

</head>

<body>

    <script async src="./common.js"></script>

    <script defer src="./index.js"></script>

    <script>

        console.log(1111);

    </script>

</body>

</html>

?运行结果：

1111

index.js

common.js

?
?
?
?

百度BOS 上传 Vue 2.x封装

VUE • lopo1983 发表了文章 • 0 个评论 • 1960 次浏览 • 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}
感谢戏子大爷查看全部

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}

感谢戏子大爷

纯css写出小三角和气泡对话框

CSS/SASS/SCSS/LESS • boloog 发表了文章 • 0 个评论 • 3193 次浏览 • 2017-04-19 18:04 • 来自相关话题

各种小三角实现：在线查看<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.common-div{
width: 0;
height: 0;
margin: 20px;
}
.div1{
border-top: 25px solid blue;
border-left: 25px solid red;
border-right: 25px solid yellow;
border-bottom: 25px solid green;
}
.div2{
border-top: 25px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div3{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div4{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid yellow;
border-bottom: 25px solid transparent;
}
.div5{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid green;
}
.div6{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid red;
}
.div7{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid green;
border-bottom: 25px solid green;
}
</style>
</head>
<body>
<div class="common-div div1"></div>
<div class="common-div div2"></div>
<div class="common-div div3"></div>
<div class="common-div div4"></div>
<div class="common-div div5"></div>
<div class="common-div div6"></div>
<div class="common-div div7"></div>
</body>
</html>
?
?气泡对话框：在线查看<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3对话框</title>
<style>
.dialog-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
position: relative;
margin-top: 30px;
background-color: #fff;
}
.dialog-box-1 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-2 .triangle {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -1px;
right: -1px;
}
.dialog-box-3 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-3 .triangle:after {
content: "";
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
position: absolute;
top: -6px;
left: -8px;
}
</style>
</head>
<body>
<div class="dialog-box dialog-box-1">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-2">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-3">
<span class="triangle"></span>
</div>
</body>
</html> 查看全部

各种小三角实现：在线查看

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .common-div{

            width: 0;

            height: 0;

            margin: 20px;

        }

        .div1{

            border-top: 25px solid blue;

            border-left: 25px solid red;

            border-right: 25px solid yellow;

            border-bottom: 25px solid green;

        }

        .div2{

            border-top: 25px solid blue;

            border-left: 25px solid transparent;

            border-right: 25px solid transparent;

            border-bottom: 25px solid transparent;

        }

        .div3{

            border-top: 25px solid transparent;

            border-left: 25px solid red;

            border-right: 25px solid transparent;

            border-bottom: 25px solid transparent;

        }

        .div4{

            border-top: 25px solid transparent;

            border-left: 25px solid transparent;

            border-right: 25px solid yellow;

            border-bottom: 25px solid transparent;

        }

        .div5{

            border-top: 25px solid transparent;

            border-left: 25px solid transparent;

            border-right: 25px solid transparent;

            border-bottom: 25px solid green;

        }

        .div6{

            border-top: 25px solid transparent;

            border-left: 25px solid red;

            border-right: 25px solid transparent;

            border-bottom: 25px solid red;

        }

        .div7{

            border-top: 25px solid transparent;

            border-left: 25px solid transparent;

            border-right: 25px solid green;

            border-bottom: 25px solid green;

        }

    </style>

</head>

<body>

    <div class="common-div div1"></div>

    <div class="common-div div2"></div>  

    <div class="common-div div3"></div>

    <div class="common-div div4"></div>

    <div class="common-div div5"></div>

    <div class="common-div div6"></div>

    <div class="common-div div7"></div>

</body>

</html>

?
?气泡对话框：在线查看

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3对话框</title>

    <style>

        .dialog-box {

            width: 200px;

            height: 100px;

            border: 1px solid #ccc;

            position: relative;

            margin-top: 30px;

            background-color: #fff;

        }

        .dialog-box-1 .triangle {

            width: 0;

            height: 0;

            border-top: 10px solid transparent;

            border-right: 10px solid transparent;

            border-bottom: 10px solid #ccc;

            border-left: 10px solid transparent;

            position: absolute;

            top: -20px;

            left: 10px;

        }

        .dialog-box-2 .triangle {

            width: 0;

            height: 0;

            border-top: 10px solid red;

            border-right: 10px solid red;

            border-bottom: 10px solid transparent;

            border-left: 10px solid transparent;

            position: absolute;

            top: -1px;

            right: -1px;

        }

        .dialog-box-3 .triangle {

            width: 0;

            height: 0;

            border-top: 10px solid transparent;

            border-right: 10px solid transparent;

            border-bottom: 10px solid #ccc;

            border-left: 10px solid transparent;

            position: absolute;

            top: -20px;

            left: 10px;

        }

        .dialog-box-3 .triangle:after {

            content: "";

            border-top: 8px solid transparent;

            border-right: 8px solid transparent;

            border-bottom: 8px solid #fff;

            border-left: 8px solid transparent;

            position: absolute;

            top: -6px;

            left: -8px;

        }

    </style>

</head>

<body>

    <div class="dialog-box dialog-box-1">

        <span class="triangle"></span>

    </div>

    <div class="dialog-box dialog-box-2">

        <span class="triangle"></span>

    </div>

    <div class="dialog-box dialog-box-3">

        <span class="triangle"></span>

  </div>

</body>

</html>

通知设置新通知

发现