Skip to content

R
rym-element-ui
Commit 3488571b by 姜雷
Options

修改弹窗层级

parent 48367082
Showing with 501 additions and 20 deletions
examples/containers/NormalDialog.vue
......@@ -11,7 +11,48 @@
type="primary"
@click="showcheck"
>确认框点击</el-button>
<el-button
type="primary"
@click="showElcheck"
>组件框点击</el-button>
</template>
<el-dialog
:visible.sync="elDialogVisible"
:before-close="closeHandle"
>
<form-area title="基本信息">
<form-line>
<form-item
label="姓名"
size="big"
>
<el-input></el-input>
</form-item>
<form-item label="性别">
<el-select v-model="selected.sex">
<el-option value="11">ssas</el-option>
<el-option value="12">gasv</el-option>
<el-option value="13">hsfd</el-option>
</el-select>
</form-item>
</form-line>
<form-line>
<form-item
label="姓名"
size="big"
>
<el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange"
>
</el-cascader>
</form-item>
</form-line>
</form-area>
</el-dialog>
<normal-dialog
:visible.sync="dialogVisible"
:before-close="closeHandle"
......@@ -37,6 +78,20 @@
</form-item>
</form-line>
<form-line>
<form-item
label="姓名"
size="big"
>
<el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange"
>
</el-cascader>
</form-item>
</form-line>
</form-area>
<div slot="footer">
<el-button
......@@ -52,9 +107,6 @@
<script>
import Vue from 'vue';
import { Input, Select, Option } from 'element-ui';
Vue.component(Input.name, Input);
export default {
name: 'DialogPage',
......@@ -62,7 +114,278 @@ export default {
return {
filters: {},
dialogVisible: false,
elDialogVisible: false,
selected: {},
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致',
},
{
value: 'fankui',
label: '反馈',
},
{
value: 'xiaolv',
label: '效率',
},
{
value: 'kekong',
label: '可控',
},
],
},
{
value: 'daohang',
label: '导航',
children: [
{
value: 'cexiangdaohang',
label: '侧向导航',
},
{
value: 'dingbudaohang',
label: '顶部导航',
},
],
},
],
},
{
value: 'zujian',
label: '组件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字体',
},
{
value: 'icon',
label: 'Icon 图标',
},
{
value: 'button',
label: 'Button 按钮',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 单选框',
},
{
value: 'checkbox',
label: 'Checkbox 多选框',
},
{
value: 'input',
label: 'Input 输入框',
},
{
value: 'input-number',
label: 'InputNumber 计数器',
},
{
value: 'select',
label: 'Select 选择器',
},
{
value: 'cascader',
label: 'Cascader 级联选择器',
},
{
value: 'switch',
label: 'Switch 开关',
},
{
value: 'slider',
label: 'Slider 滑块',
},
{
value: 'time-picker',
label: 'TimePicker 时间选择器',
},
{
value: 'date-picker',
label: 'DatePicker 日期选择器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器',
},
{
value: 'upload',
label: 'Upload 上传',
},
{
value: 'rate',
label: 'Rate 评分',
},
{
value: 'form',
label: 'Form 表单',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 标签',
},
{
value: 'progress',
label: 'Progress 进度条',
},
{
value: 'tree',
label: 'Tree 树形控件',
},
{
value: 'pagination',
label: 'Pagination 分页',
},
{
value: 'badge',
label: 'Badge 标记',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加载',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 弹框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 导航菜单',
},
{
value: 'tabs',
label: 'Tabs 标签页',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜单',
},
{
value: 'steps',
label: 'Steps 步骤条',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 对话框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 弹出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走马灯',
},
{
value: 'collapse',
label: 'Collapse 折叠面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '资源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '组件交互文档',
},
],
},
],
selectedOptions: [],
selectedOptions2: [],
};
},
methods: {
......@@ -72,8 +395,15 @@ export default {
closeHandle(done) {
done();
},
showElcheck() {
this.elDialogVisible = true;
},
showMessage() {
console.log('outClick');
this.$mdAlert.info('内层弹窗');
},
handleChange(value) {
console.log(value);
},
},
};
......
examples/main.js
......@@ -2,11 +2,9 @@ import Vue from 'vue';
import App from './App.vue';
import route, { routerMap } from './route';
import store from './store/index';
import elementUi from 'element-ui';
import rymUi from '../src/index';
import 'normalize.css/normalize.css';
Vue.use(elementUi);
Vue.use(rymUi);
Vue.config.productionTip = false;
......
lib/rymUi.common.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
lib/rymUi.umd.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
lib/rymUi.umd.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
lib/rymUi.umd.min.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
{
"name": "rym-element-ui",
"version": "0.1.39",
"version": "0.1.40",
"description": "任意门组件库",
"main": "lib/rymUi.common.js",
"scripts": {
......
src/components/Dialog/NormalDialog.vue
......@@ -31,10 +31,7 @@
v-if="showClose"
@click="handleClose"
>
<img
src="@/assets/images/dialog/close_icon.png"
alt=""
>
<img src="@/assets/images/dialog/close_icon.png">
</button>
</div>
<div
......@@ -56,10 +53,168 @@
<script>
import { Dialog } from 'element-ui';
import Popup from '../Popup';
import Migrating from 'element-ui/src/mixins/migrating';
import emitter from 'element-ui/src/mixins/emitter';
export default {
name: 'normal-dialog',
extends: Dialog,
mixins: [Popup, emitter, Migrating],
props: {
title: {
type: String,
default: '',
},
modal: {
type: Boolean,
default: true,
},
modalAppendToBody: {
type: Boolean,
default: true,
},
appendToBody: {
type: Boolean,
default: false,
},
lockScroll: {
type: Boolean,
default: true,
},
closeOnClickModal: {
type: Boolean,
default: true,
},
closeOnPressEscape: {
type: Boolean,
default: true,
},
showClose: {
type: Boolean,
default: true,
},
width: String,
fullscreen: Boolean,
customClass: {
type: String,
default: '',
},
top: {
type: String,
default: '15vh',
},
beforeClose: Function,
center: {
type: Boolean,
default: false,
},
},
data() {
return {
closed: false,
};
},
watch: {
visible(val) {
if (val) {
this.closed = false;
this.$emit('open');
this.$el.addEventListener('scroll', this.updatePopper);
this.$nextTick(() => {
this.$refs.dialog.scrollTop = 0;
});
if (this.appendToBody) {
document.body.appendChild(this.$el);
}
} else {
this.$el.removeEventListener('scroll', this.updatePopper);
if (!this.closed) this.$emit('close');
}
},
},
computed: {
style() {
let style = {};
if (!this.fullscreen) {
style.marginTop = this.top;
if (this.width) {
style.width = this.width;
}
}
return style;
},
},
methods: {
getMigratingConfig() {
return {
props: {
size: 'size is removed.',
},
};
},
handleWrapperClick() {
if (!this.closeOnClickModal) return;
this.handleClose();
},
handleClose() {
if (typeof this.beforeClose === 'function') {
this.beforeClose(this.hide);
} else {
this.hide();
}
},
hide(cancel) {
if (cancel !== false) {
this.$emit('update:visible', false);
this.$emit('close');
this.closed = true;
}
},
updatePopper() {
this.broadcast('ElSelectDropdown', 'updatePopper');
this.broadcast('ElDropdownMenu', 'updatePopper');
},
afterEnter() {
this.$emit('opened');
},
afterLeave() {
this.$emit('closed');
},
},
mounted() {
if (this.visible) {
this.rendered = true;
this.open();
if (this.appendToBody) {
document.body.appendChild(this.$el);
}
}
},
destroyed() {
// if appendToBody is true, remove DOM node after destroy
if (this.appendToBody && this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
},
};
</script>
......
src/components/Message/Message.js
import Vue from 'vue';
import Main from './Message.vue';
import PopupManager from '../Popup/popup-manager';
import PopupManager from 'element-ui/lib/utils/popup/popup-manager'
import { isVNode } from 'element-ui/src/utils/vdom';
let MessageConstructor = Vue.extend(Main);
......@@ -13,7 +13,7 @@ const Message = function(options) {
options = options || {};
if (typeof options === 'string') {
options = {
message: options
message: options,
};
}
let userOnClose = options.onClose;
......@@ -23,7 +23,7 @@ const Message = function(options) {
Message.close(id, userOnClose);
};
instance = new MessageConstructor({
data: options
data: options,
});
instance.id = id;
if (isVNode(instance.message)) {
......@@ -43,7 +43,7 @@ const Message = function(options) {
Message[type] = options => {
if (typeof options === 'string') {
options = {
message: options
message: options,
};
}
options.type = type;
......
src/components/MessageBox/main.vue
......@@ -87,7 +87,7 @@
<script>
import Dialog from 'element-ui/src/utils/aria-dialog';
import Popup from '../Popup/index.js';
import Popup from 'element-ui/src/utils/popup/index';
import { addClass, removeClass } from 'element-ui/src/utils/dom';
let messageBox;
......
src/components/Popup/popup-manager.js
......@@ -3,7 +3,7 @@ import { addClass, removeClass } from 'element-ui/src/utils/dom';
let hasModal = false;
let hasInitZIndex = false;
let zIndex = 5000;
let zIndex = 1010;
const getModal = function() {
if (Vue.prototype.$isServer) return;
......
src/index.js
......@@ -16,10 +16,8 @@ import FormLine from './components/FormLine/index';
import FormItem from './components/FormItem/index';
import Transfer from './components/Transfer/index';
import Message from './components/Message/index';
// import Button from './components/Button/index';
const install = Vue => {
Vue.use(ElementUI);
// Layout
Vue.component(AppLayout.name, AppLayout);
Vue.component(ListLayout.name, ListLayout);
......@@ -41,10 +39,10 @@ const install = Vue => {
// input
Vue.component(DatePicker.name, DatePicker);
Vue.component(DateRangePicker.name, DateRangePicker);
Vue.use(ElementUI);
};
// module.exports = rymUi;
// module.exports.default = module.exports = rymUi;
export default {
install,
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment