update Modal prop draggable

This commit is contained in:
梁灏 2018-07-14 18:31:22 +08:00
parent 7fb5f3b3ee
commit 1210cfe59c
7 changed files with 48 additions and 96 deletions

18
dist/iview.js vendored
View file

@ -18794,7 +18794,7 @@ exports.default = {
type: Boolean, type: Boolean,
default: true default: true
}, },
dragable: { draggable: {
type: Boolean, type: Boolean,
default: false default: false
} }
@ -18833,7 +18833,7 @@ exports.default = {
contentClasses: function contentClasses() { contentClasses: function contentClasses() {
var _ref3; var _ref3;
return [prefixCls + '-content', (_ref3 = {}, (0, _defineProperty3.default)(_ref3, prefixCls + '-content-no-mask', !this.showMask), (0, _defineProperty3.default)(_ref3, prefixCls + '-content-drag', this.dragable), (0, _defineProperty3.default)(_ref3, prefixCls + '-content-dragging', this.dragable && this.dragData.dragging), _ref3)]; return [prefixCls + '-content', (_ref3 = {}, (0, _defineProperty3.default)(_ref3, prefixCls + '-content-no-mask', !this.showMask), (0, _defineProperty3.default)(_ref3, prefixCls + '-content-drag', this.draggable), (0, _defineProperty3.default)(_ref3, prefixCls + '-content-dragging', this.draggable && this.dragData.dragging), _ref3)];
}, },
mainStyles: function mainStyles() { mainStyles: function mainStyles() {
var style = {}; var style = {};
@ -18854,7 +18854,7 @@ exports.default = {
contentStyles: function contentStyles() { contentStyles: function contentStyles() {
var style = {}; var style = {};
if (this.dragable) { if (this.draggable) {
if (this.dragData.x !== null) style.left = String(this.dragData.x) + 'px'; if (this.dragData.x !== null) style.left = String(this.dragData.x) + 'px';
if (this.dragData.y !== null) style.top = String(this.dragData.y) + 'px'; if (this.dragData.y !== null) style.top = String(this.dragData.y) + 'px';
var width = parseInt(this.width); var width = parseInt(this.width);
@ -18882,7 +18882,7 @@ exports.default = {
} }
}, },
showMask: function showMask() { showMask: function showMask() {
return this.dragable ? false : this.mask; return this.draggable ? false : this.mask;
} }
}, },
methods: { methods: {
@ -18923,7 +18923,7 @@ exports.default = {
this.$emit('on-hidden'); this.$emit('on-hidden');
}, },
handleMoveStart: function handleMoveStart(event) { handleMoveStart: function handleMoveStart(event) {
if (!this.dragable) return false; if (!this.draggable) return false;
var $content = this.$refs.content; var $content = this.$refs.content;
var rect = $content.getBoundingClientRect(); var rect = $content.getBoundingClientRect();
@ -35655,8 +35655,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue__ = __webpack_require__(193); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue__ = __webpack_require__(193);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue__); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue__);
/* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__)); /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_12bc065e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue__ = __webpack_require__(471); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_64e047ab_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue__ = __webpack_require__(471);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_12bc065e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_12bc065e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue__); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_64e047ab_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_64e047ab_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
/* script */ /* script */
@ -35674,8 +35674,8 @@ var __vue_module_identifier__ = null
var Component = Object(__WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])( var Component = Object(__WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue___default.a, __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_modal_vue___default.a,
__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_12bc065e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue__["render"], __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_64e047ab_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue__["render"],
__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_12bc065e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue__["staticRenderFns"], __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_64e047ab_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_modal_vue__["staticRenderFns"],
__vue_template_functional__, __vue_template_functional__,
__vue_styles__, __vue_styles__,
__vue_scopeId__, __vue_scopeId__,

2
dist/iview.js.map vendored

File diff suppressed because one or more lines are too long

2
dist/iview.min.js vendored

File diff suppressed because one or more lines are too long

BIN
dist/iview.min.js.gz vendored

Binary file not shown.

File diff suppressed because one or more lines are too long

View file

@ -1,87 +1,39 @@
<template> <template>
<div> <Select v-model="model1" style="width:200px">
<p>带描述信息</p> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Button @click="normal(false)">普通</Button> </Select>
<Button @click="normal(true)">普通</Button>
<Button @click="info(false)">消息</Button>
<Button @click="info(true)">消息</Button>
<Button @click="success(false)">成功</Button>
<Button @click="warning(false)">警告</Button>
<Button @click="error(false)">错误</Button>
<Button @click="testRender()">render</Button>
<p>仅标题</p>
<Button @click="info(true)">消息</Button>
<Button @click="success(true)">成功</Button>
<Button @click="warning(true)">警告</Button>
<Button @click="error(true)">错误</Button>
<Button @click="destroy()">销毁</Button>
</div>
</template> </template>
<script> <script>
export default { export default {
methods: { data () {
normal (nodesc) { return {
this.$Notice.open({ cityList: [
title: 'google', {
duration: 0, value: 'New York',
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述', label: 'New York'
// render (h) {
// return h('span', {}, 'sdsdfsdf');
// }
});
}, },
info (nodesc) { {
this.$Notice.info({ value: 'London',
title: '这是通知标题', label: 'London'
duration: 0,
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
// render (h) {
// return h('span', {}, 'sdsdfsdf');
// }
});
}, },
success () { {
this.$Notice.success({ value: 'Sydney',
title: '这是通知标题', label: 'Sydney'
desc: '当你定义了render之后这个描述会被覆盖',
render: h => {
return h('span', {}, [
'这是',
h('Button', {props: {type: 'text'}}, 'render'),
'函数渲染的'
]);
}, },
duration: 0 {
}); value: 'Ottawa',
label: 'Ottawa'
}, },
warning (nodesc) { {
this.$Notice.warning({ value: 'Paris',
title: '这是通知标题', label: 'Paris'
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
});
}, },
error (nodesc) { {
this.$Notice.error({ value: 'Canberra',
title: '这是通知标题', label: 'Canberra'
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述' }
}); ],
}, model1: 'Sydney'
testRender () {
this.$Notice.info({
title: '这是通知标题',
duration: 0,
// desc: 'render',
render: h => {
return h('span', {}, [
'这是',
h('Button', {props: {type: 'text'}}, 'render'),
'函数渲染的'
]);
},
});
},
destroy () {
this.$Notice.destroy();
} }
} }
} }

View file

@ -111,7 +111,7 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
dragable: { draggable: {
type: Boolean, type: Boolean,
default: false default: false
} }
@ -161,8 +161,8 @@
`${prefixCls}-content`, `${prefixCls}-content`,
{ {
[`${prefixCls}-content-no-mask`]: !this.showMask, [`${prefixCls}-content-no-mask`]: !this.showMask,
[`${prefixCls}-content-drag`]: this.dragable, [`${prefixCls}-content-drag`]: this.draggable,
[`${prefixCls}-content-dragging`]: this.dragable && this.dragData.dragging [`${prefixCls}-content-dragging`]: this.draggable && this.dragData.dragging
} }
]; ];
}, },
@ -185,7 +185,7 @@
contentStyles () { contentStyles () {
let style = {}; let style = {};
if (this.dragable) { if (this.draggable) {
if (this.dragData.x !== null) style.left = `${this.dragData.x}px`; if (this.dragData.x !== null) style.left = `${this.dragData.x}px`;
if (this.dragData.y !== null) style.top = `${this.dragData.y}px`; if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
const width = parseInt(this.width); const width = parseInt(this.width);
@ -213,7 +213,7 @@
} }
}, },
showMask () { showMask () {
return this.dragable ? false : this.mask; return this.draggable ? false : this.mask;
} }
}, },
methods: { methods: {
@ -255,7 +255,7 @@
this.$emit('on-hidden'); this.$emit('on-hidden');
}, },
handleMoveStart (event) { handleMoveStart (event) {
if (!this.dragable) return false; if (!this.draggable) return false;
const $content = this.$refs.content; const $content = this.$refs.content;
const rect = $content.getBoundingClientRect(); const rect = $content.getBoundingClientRect();