Merge branch 'master' of gitlab.qima-inc.com:fe/oxygen
This commit is contained in:
niunai
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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 Dialog from './src/dialog.js';
|
||||
|
||||
export default Dialog;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import Vue from 'vue';
|
||||
import Dialog from './dialog.vue';
|
||||
import merge from 'src/utils/merge';
|
||||
|
||||
const DialogConstructor = Vue.extend(Dialog);
|
||||
|
||||
let currentDialog;
|
||||
let instance;
|
||||
let dialogQueue = [];
|
||||
|
||||
const defaultCallback = action => {
|
||||
if (currentDialog) {
|
||||
let callback = currentDialog.callback;
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback(action);
|
||||
}
|
||||
|
||||
if (currentDialog.resolve && action === 'confirm') {
|
||||
currentDialog.resolve(action);
|
||||
} else if (currentDialog.reject && action === 'cancel') {
|
||||
currentDialog.reject(action);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initInstance = () => {
|
||||
instance = new DialogConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
|
||||
instance.callback = defaultCallback;
|
||||
};
|
||||
|
||||
const showNextDialog = () => {
|
||||
if (!instance) {
|
||||
initInstance();
|
||||
}
|
||||
|
||||
if (!instance.value && dialogQueue.length > 0) {
|
||||
currentDialog = dialogQueue.shift();
|
||||
|
||||
let options = currentDialog.options;
|
||||
|
||||
for (let prop in options) {
|
||||
if (options.hasOwnProperty(prop)) {
|
||||
instance[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
|
||||
if (options.callback === undefined) {
|
||||
instance.callback = defaultCallback;
|
||||
}
|
||||
|
||||
document.body.appendChild(instance.$el);
|
||||
|
||||
Vue.nextTick(() => {
|
||||
instance.value = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var DialogBox = options => {
|
||||
return new Promise((resolve, reject) => { // eslint-disable-line
|
||||
dialogQueue.push({
|
||||
options: merge({}, options),
|
||||
callback: options.callback,
|
||||
resolve: resolve,
|
||||
reject: reject
|
||||
});
|
||||
|
||||
showNextDialog();
|
||||
});
|
||||
};
|
||||
|
||||
DialogBox.alert = function(options) {
|
||||
return DialogBox(merge({
|
||||
type: 'alert',
|
||||
closeOnClickOverlay: false,
|
||||
showCancelButton: false
|
||||
}, options));
|
||||
};
|
||||
|
||||
DialogBox.confirm = function(options) {
|
||||
return DialogBox(merge({
|
||||
type: 'confirm',
|
||||
closeOnClickOverlay: true,
|
||||
showCancelButton: true
|
||||
}, options));
|
||||
};
|
||||
|
||||
DialogBox.close = function() {
|
||||
instance.value = false;
|
||||
dialogQueue = [];
|
||||
currentDialog = null;
|
||||
};
|
||||
|
||||
export default DialogBox;
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<transition name="dialog-bounce">
|
||||
<div class="o2-dialog-wrapper">
|
||||
<div class="o2-dialog" v-show="value">
|
||||
<div class="o2-dialog-header" v-if="title">
|
||||
<div class="o2-dialog-title" v-text="title"></div>
|
||||
</div>
|
||||
<div class="o2-dialog-content" v-if="message">
|
||||
<div class="o2-dialog-message" v-html="message"></div>
|
||||
</div>
|
||||
<div class="o2-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="o2-dialog-btn o2-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="o2-dialog-btn o2-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'packages/popup';
|
||||
|
||||
const CANCEL_TEXT = '取消';
|
||||
const CONFIRM_TEXT = '确认';
|
||||
|
||||
export default {
|
||||
name: 'o2-dialog',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
},
|
||||
lockOnScroll: {
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
message: '',
|
||||
type: '',
|
||||
showConfirmButton: true,
|
||||
showCancelButton: false,
|
||||
confirmButtonText: CONFIRM_TEXT,
|
||||
cancelButtonText: CANCEL_TEXT,
|
||||
callback: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleAction(action) {
|
||||
this.value = false;
|
||||
this.callback && this.callback(action);
|
||||
},
|
||||
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.value = false;
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.modal && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
document.body.style.paddingRight = this.bodyPaddingRight;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
this.bodyPaddingRight = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -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 Popup from './src/popup';
|
||||
|
||||
export default Popup;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<transition :name="currentTransition">
|
||||
<div v-show="currentValue" class="o2-popup" :class="[position ? 'o2-popup--' + position : '']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'o2-popup',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
lockOnScroll: {
|
||||
default: false
|
||||
},
|
||||
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'popup-slide'
|
||||
},
|
||||
|
||||
position: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: false,
|
||||
currentTransition: this.transition
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentValue(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
if (this.transition !== 'popup-fade') {
|
||||
this.currentTransition = `popup-slide-${this.position}`;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.value) {
|
||||
this.currentValue = true;
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
@import "./mixins/border_retina.pcss";
|
||||
|
||||
@component-namespace o2 {
|
||||
@component dialog-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@component dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
background-color: #fff;
|
||||
width: 85%;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
transition: .2s;
|
||||
|
||||
@descendent header {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
|
||||
@descendent content {
|
||||
padding: 15px 20px;
|
||||
min-height: 36px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@descendent title {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@descendent message {
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@descendent footer {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.is-twobtn {
|
||||
.o2-dialog-btn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.o2-dialog-cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@descendent btn {
|
||||
line-height: 40px;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@descendent cancel {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@descendent confirm {
|
||||
color: #00C000;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-bounce-enter {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.7);
|
||||
}
|
||||
.dialog-bounce-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
||||
}
|
||||
@@ -3,6 +3,8 @@
|
||||
*/
|
||||
@import './button.pcss';
|
||||
@import './cell.pcss';
|
||||
@import './dialog.pcss';
|
||||
@import './field.pcss';
|
||||
@import './icon.pcss';
|
||||
@import './popup.pcss';
|
||||
@import './switch.pcss';
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
.v-modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
}
|
||||
|
||||
@component-namespace o2 {
|
||||
@component popup {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
|
||||
@modifier top {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@modifier right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
@modifier bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@modifier left {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-slide-top-enter,
|
||||
.popup-slide-top-leave-active {
|
||||
transform: translate3d(-50%, -100%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-right-enter,
|
||||
.popup-slide-right-leave-active {
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-bottom-enter,
|
||||
.popup-slide-bottom-leave-active {
|
||||
transform: translate3d(-50%, 100%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-left-enter, .popup-slide-left-leave-active {
|
||||
transform: translate3d(-100%, -50%, 0);
|
||||
}
|
||||
|
||||
.popup-fade-enter, .popup-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user