mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'feature/toast' into 'master'
Feature/toast See merge request !13
This commit is contained in:
zhangmin
commit
7cfcaf925d
@ -31,8 +31,8 @@
|
||||
"actionsheet": "./packages/actionsheet/index.js",
|
||||
"quantity": "./packages/quantity/index.js",
|
||||
"progress": "./packages/progress/index.js",
|
||||
"toast": "./packages/toast/index.js",
|
||||
"uploader": "./packages/uploader/index.js",
|
||||
"swipe": "./packages/swipe/index.js",
|
||||
"swipe-item": "./packages/swipe-item/index.js"
|
||||
|
||||
}
|
||||
|
||||
11
docs/build/0.js
vendored
11
docs/build/0.js
vendored
File diff suppressed because one or more lines are too long
2
docs/build/1.js
vendored
2
docs/build/1.js
vendored
@ -1 +1 @@
|
||||
webpackJsonp([1],{250:function(t,e,a){a(455);var i=a(0)(a(264),a(401),null,null);t.exports=i.exports},264:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(28),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},309:function(t,e,a){e=t.exports=a(16)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},401:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},455:function(t,e,a){var i=a(309);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(29)("1517d9c0",i,!0)}});
|
||||
webpackJsonp([1],{259:function(t,e,a){a(480);var i=a(0)(a(273),a(422),null,null);t.exports=i.exports},273:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(30),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},322:function(t,e,a){e=t.exports=a(16)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},422:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},480:function(t,e,a){var i=a(322);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(31)("1517d9c0",i,!0)}});
|
||||
7
docs/build/zanui-docs.js
vendored
7
docs/build/zanui-docs.js
vendored
File diff suppressed because one or more lines are too long
7
docs/build/zanui-examples.js
vendored
7
docs/build/zanui-examples.js
vendored
File diff suppressed because one or more lines are too long
37
docs/examples-dist/toast.vue
Normal file
37
docs/examples-dist/toast.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template><section class="demo-toast"><h1 class="demo-title">toast</h1><example-block title="基础用法">
|
||||
<zan-button @click="showSimpleToast()">普通文字提示</zan-button>
|
||||
|
||||
<zan-button @click="showToast('loading')">加载Toast</zan-button>
|
||||
<zan-button @click="showToast('success')">成功</zan-button>
|
||||
<zan-button @click="showToast('failure')">失败</zan-button>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b toast {
|
||||
.zan-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showSimpleToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
showToast(type) {
|
||||
Toast({
|
||||
type: type,
|
||||
message: '文案信息'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
docs/examples-dist/uploader.vue
Normal file
29
docs/examples-dist/uploader.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader :before-read="logContent" @file-readed="logContent">
|
||||
</zan-uploader>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="自定义上传图标">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader @file-readed="logContent">
|
||||
<zan-icon name="camera"></zan-icon>
|
||||
</zan-uploader>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.uploader-container {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
66
docs/examples-docs/toast.md
Normal file
66
docs/examples-docs/toast.md
Normal file
@ -0,0 +1,66 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b toast {
|
||||
.zan-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showSimpleToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
showToast(type) {
|
||||
Toast({
|
||||
type: type,
|
||||
message: '文案信息'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Dialog组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="showSimpleToast()">普通文字提示</zan-button>
|
||||
|
||||
<zan-button @click="showToast('loading')">加载Toast</zan-button>
|
||||
<zan-button @click="showToast('success')">成功</zan-button>
|
||||
<zan-button @click="showToast('failure')">失败</zan-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showSimpleToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
showToast(type) {
|
||||
Toast({
|
||||
type: type,
|
||||
message: '文案信息'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' |
|
||||
| message | 内容 | String | '' | - |
|
||||
@ -1,3 +1,3 @@
|
||||
import Loading from './src/loading';
|
||||
import ZanLoading from './src/loading';
|
||||
|
||||
export default Loading;
|
||||
export default ZanLoading;
|
||||
|
||||
26
packages/toast/README.md
Normal file
26
packages/toast/README.md
Normal file
@ -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)
|
||||
3
packages/toast/index.js
Normal file
3
packages/toast/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Toast from './src/toast';
|
||||
|
||||
export default Toast;
|
||||
10
packages/toast/package.json
Normal file
10
packages/toast/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/zan-toast",
|
||||
"version": "0.0.1",
|
||||
"description": "toast component",
|
||||
"main": "./index.js",
|
||||
"author": "jiangruowei",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
55
packages/toast/src/toast.js
Normal file
55
packages/toast/src/toast.js
Normal file
@ -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;
|
||||
81
packages/toast/src/toast.vue
Normal file
81
packages/toast/src/toast.vue
Normal file
@ -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>
|
||||
@ -25,6 +25,6 @@
|
||||
@import './actionsheet.css';
|
||||
@import './quantity.css';
|
||||
@import './progress.css';
|
||||
@import './toast.css';
|
||||
@import './uploader.css';
|
||||
@import './swipe.css';
|
||||
|
||||
|
||||
36
packages/zanui-css/src/toast.css
Normal file
36
packages/zanui-css/src/toast.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -30,6 +30,7 @@ import Row from '../packages/row/index.js';
|
||||
import Actionsheet from '../packages/actionsheet/index.js';
|
||||
import Quantity from '../packages/quantity/index.js';
|
||||
import Progress from '../packages/progress/index.js';
|
||||
import Toast from '../packages/toast/index.js';
|
||||
import Uploader from '../packages/uploader/index.js';
|
||||
import Swipe from '../packages/swipe/index.js';
|
||||
import SwipeItem from '../packages/swipe-item/index.js';
|
||||
@ -110,6 +111,7 @@ module.exports = {
|
||||
Actionsheet,
|
||||
Quantity,
|
||||
Progress,
|
||||
Toast,
|
||||
Uploader,
|
||||
Swipe,
|
||||
SwipeItem
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user