Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue
This commit is contained in:
cookfront
@@ -1,3 +1,3 @@
|
||||
import Loading from './src/loading';
|
||||
import ZanLoading from './src/loading';
|
||||
|
||||
export default Loading;
|
||||
export default ZanLoading;
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Toast from './src/toast';
|
||||
|
||||
export default Toast;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/zan-toast",
|
||||
"version": "0.0.1",
|
||||
"description": "toast component",
|
||||
"main": "./index.js",
|
||||
"author": "jiangruowei",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
const ToastConstructor = Vue.extend(require('./toast.vue'));
|
||||
let toastQueue = [];
|
||||
|
||||
let getInstance = () => {
|
||||
if (toastQueue.length > 0) {
|
||||
let instance = toastQueue[0];
|
||||
toastQueue.splice(0, 1);
|
||||
return instance;
|
||||
}
|
||||
return new ToastConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
};
|
||||
|
||||
const returnInstance = instance => {
|
||||
if (instance) {
|
||||
toastQueue.push(instance);
|
||||
}
|
||||
};
|
||||
|
||||
const removeDom = event => {
|
||||
if (event.target.parentNode) {
|
||||
event.target.parentNode.removeChild(event.target);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var Toast = (options = {}) => {
|
||||
const duration = options.duration || 3000;
|
||||
|
||||
let instance = getInstance();
|
||||
returnInstance(instance);
|
||||
instance.closed = false;
|
||||
clearTimeout(instance.timer);
|
||||
instance.type = options.type ? options.type : 'text';
|
||||
instance.message = typeof options === 'string' ? options : options.message;
|
||||
|
||||
document.body.appendChild(instance.$el);
|
||||
Vue.nextTick(function() {
|
||||
instance.visible = true;
|
||||
instance.$el.removeEventListener('transitionend', removeDom);
|
||||
|
||||
instance.timer = setTimeout(function() {
|
||||
if (instance.closed) return;
|
||||
instance.visible = false;
|
||||
instance.$el.addEventListener('transitionend', removeDom);
|
||||
instance.closed = true;
|
||||
}, duration);
|
||||
});
|
||||
return instance;
|
||||
};
|
||||
|
||||
export default Toast;
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<transition name="zan-toast">
|
||||
<div class="zan-toast" :class="['zan-toast--' + displayStyle]" v-show="visible">
|
||||
<!-- 只显示文字 -->
|
||||
<template v-if="displayStyle === 'text'" >
|
||||
<div class="zan-toast__text">{{message}}</div>
|
||||
</template>
|
||||
<!-- 加载中 -->
|
||||
<template v-if="displayStyle === 'loading'">
|
||||
<zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
|
||||
</template>
|
||||
<!-- 图案加文字 -->
|
||||
<template v-if="displayStyle === 'default'">
|
||||
<zan-icon class="zan-toast__icon" name="check"></zan-icon>
|
||||
<div class="zan-toast__text">{{message}}</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zanLoading from 'packages/loading';
|
||||
import zanIcon from 'packages/icon';
|
||||
|
||||
const TOAST_TYPES = ['text', 'loading', 'success', 'failure'];
|
||||
/**
|
||||
* zan-toast
|
||||
* @module components/toast
|
||||
* @desc toast
|
||||
* @param {string} [type=false] - 类型
|
||||
* @param {string} [message] - 信息
|
||||
*
|
||||
*/
|
||||
export default {
|
||||
name: 'zan-toast',
|
||||
|
||||
components: {
|
||||
'zan-loading': zanLoading,
|
||||
'zan-icon': zanIcon
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
validate(value) {
|
||||
return TOAST_TYPES.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: '',
|
||||
validate(value) {
|
||||
if (this.type === 'success' || this.type === 'failure') {
|
||||
return value.length <= 16;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
displayStyle() {
|
||||
switch (this.type) {
|
||||
case 'text':
|
||||
return 'text';
|
||||
case 'loading':
|
||||
return 'loading';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
},
|
||||
iconName() {
|
||||
// TODO: 更新icon
|
||||
return 'check';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -21,43 +21,36 @@
|
||||
resultType: {
|
||||
type: String,
|
||||
default: 'dataUrl',
|
||||
validator (value) {
|
||||
return value == 'dataUrl' || value == 'text'
|
||||
validator(value) {
|
||||
return value === 'dataUrl' || value === 'text';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onValueChange (event) {
|
||||
|
||||
onValueChange(event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
var files = event.target.files;
|
||||
var file = files[0];
|
||||
if (!file) return;
|
||||
|
||||
if (this.beforeRead && ! this.beforeRead(file)) return;
|
||||
|
||||
if (this.beforeRead && !this.beforeRead(file)) return;
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = (e) => {
|
||||
this.$emit('file-readed',
|
||||
{
|
||||
name:file.name,
|
||||
type:file.type,
|
||||
size:file.size,
|
||||
content:e.target.result
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
size: file.size,
|
||||
content: e.target.result
|
||||
});
|
||||
this.$refs.input.value = '';
|
||||
};
|
||||
|
||||
if (this.resultType == 'dataUrl') {
|
||||
if (this.resultType === 'dataUrl') {
|
||||
reader.readAsDataURL(file);
|
||||
} else if (this.resultType == 'text') {
|
||||
} else if (this.resultType === 'text') {
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -30,21 +30,21 @@ function doBindEvent() {
|
||||
|
||||
// 处理滚动函数
|
||||
function handleScrollEvent() {
|
||||
let element = this.el;
|
||||
let scrollEventTarget = this.scrollEventTarget;
|
||||
const element = this.el;
|
||||
const scrollEventTarget = this.scrollEventTarget;
|
||||
|
||||
// 已被禁止的滚动处理
|
||||
if (this.disabled) return;
|
||||
|
||||
let targetScrollTop = Utils.getScrollTop(scrollEventTarget);
|
||||
let targetBottom = targetScrollTop + Utils.getVisibleHeight(scrollEventTarget);
|
||||
const targetScrollTop = Utils.getScrollTop(scrollEventTarget);
|
||||
const targetBottom = targetScrollTop + Utils.getVisibleHeight(scrollEventTarget);
|
||||
|
||||
// 判断是否到了底
|
||||
let needLoadMoreToLower = false;
|
||||
if (element === scrollEventTarget) {
|
||||
needLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom < this.offset;
|
||||
} else {
|
||||
let elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
|
||||
const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
|
||||
needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;
|
||||
}
|
||||
if (needLoadMoreToLower) {
|
||||
@@ -56,7 +56,7 @@ function handleScrollEvent() {
|
||||
if (element === scrollEventTarget) {
|
||||
needLoadMoreToUpper = targetScrollTop < this.offset;
|
||||
} else {
|
||||
let elementTop = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget);
|
||||
const elementTop = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget);
|
||||
needLoadMoreToUpper = elementTop + this.offset > 0;
|
||||
}
|
||||
if (needLoadMoreToUpper) {
|
||||
@@ -64,6 +64,30 @@ function handleScrollEvent() {
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
function startBind(el) {
|
||||
const context = el[CONTEXT];
|
||||
|
||||
context.vm.$nextTick(function() {
|
||||
if (Utils.isAttached(el)) {
|
||||
doBindEvent.call(el[CONTEXT]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 确认何时绑事件监听函数
|
||||
function doCheckStartBind(el) {
|
||||
const context = el[CONTEXT];
|
||||
|
||||
if (context.vm._isMounted) {
|
||||
startBind(el);
|
||||
} else {
|
||||
context.vm.$on('hook:mounted', function() {
|
||||
startBind(el);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default function(type) {
|
||||
return {
|
||||
bind(el, binding, vnode) {
|
||||
@@ -76,11 +100,7 @@ export default function(type) {
|
||||
}
|
||||
el[CONTEXT].cb[type] = binding.value;
|
||||
|
||||
vnode.context.$on('hook:mounted', function() {
|
||||
if (Utils.isAttached(el)) {
|
||||
doBindEvent.call(el[CONTEXT]);
|
||||
}
|
||||
});
|
||||
doCheckStartBind(el);
|
||||
},
|
||||
|
||||
update(el) {
|
||||
|
||||
@@ -25,6 +25,6 @@
|
||||
@import './actionsheet.css';
|
||||
@import './quantity.css';
|
||||
@import './progress.css';
|
||||
@import './toast.css';
|
||||
@import './uploader.css';
|
||||
@import './swipe.css';
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b toast {
|
||||
position: fixed;
|
||||
border-radius: 5px;
|
||||
background-color: #272727;
|
||||
opacity: 0.7;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
font-size: 12px;
|
||||
color: $c-white;
|
||||
text-align: center;
|
||||
|
||||
@m loading {
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
@m text {
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
@m default {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
.zan-toast__icon {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
}
|
||||
.zan-toast__text {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user