vdesign-ui 0.2.8 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/tab/index.vue +79 -53
- package/dist/components/tabs/index.vue +161 -70
- package/dist/components/tabs/style.less +293 -267
- package/dist/components/toast/index.js +14 -4
- package/dist/vdesign-ui.common.js +256 -154
- package/dist/vdesign-ui.css +1 -1
- package/dist/vdesign-ui.umd.js +256 -154
- package/dist/vdesign-ui.umd.min.js +3 -3
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@ import Vue from 'vue';
|
|
|
2
2
|
import ToastComponent from './index.vue';
|
|
3
3
|
import { inBrowser } from '../utils/env';
|
|
4
4
|
|
|
5
|
+
let queueResult = []
|
|
5
6
|
|
|
6
7
|
function getType(value) {
|
|
7
8
|
if (value !== value) return 'NaN';
|
|
@@ -37,7 +38,6 @@ class VdToast extends Vue.extend(ToastComponent) {
|
|
|
37
38
|
}
|
|
38
39
|
}
|
|
39
40
|
|
|
40
|
-
|
|
41
41
|
start() {
|
|
42
42
|
clearTimeout(this.timer)
|
|
43
43
|
/**
|
|
@@ -51,7 +51,6 @@ class VdToast extends Vue.extend(ToastComponent) {
|
|
|
51
51
|
}, 0)
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
|
|
55
54
|
end() {
|
|
56
55
|
/**
|
|
57
56
|
* 关闭过渡效果之后移除真实 DOM 树节点
|
|
@@ -65,12 +64,23 @@ class VdToast extends Vue.extend(ToastComponent) {
|
|
|
65
64
|
this.isShow = false
|
|
66
65
|
if (inBrowser && this.vm.$el) {
|
|
67
66
|
setTimeout(() => {
|
|
68
|
-
this.vm.$el.parentNode.removeChild(this.vm.$el);
|
|
67
|
+
this.vm.$el.parentNode && this.vm.$el.parentNode.removeChild(this.vm.$el);
|
|
69
68
|
}, 500)
|
|
70
69
|
}
|
|
71
70
|
}
|
|
72
71
|
}
|
|
73
72
|
|
|
74
|
-
const Toast = options =>
|
|
73
|
+
const Toast = (options) => {
|
|
74
|
+
const NewOption = new VdToast(options)
|
|
75
|
+
queueResult.push(NewOption)
|
|
76
|
+
return NewOption
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
Toast.clear = () => {
|
|
80
|
+
queueResult.forEach(toast => {
|
|
81
|
+
toast.clear()
|
|
82
|
+
})
|
|
83
|
+
queueResult = [];
|
|
84
|
+
}
|
|
75
85
|
|
|
76
86
|
export default Toast
|
|
@@ -423,14 +423,10 @@ module.exports = typeof documentAll == 'undefined' && documentAll !== undefined
|
|
|
423
423
|
|
|
424
424
|
/***/ }),
|
|
425
425
|
|
|
426
|
-
/***/ "
|
|
427
|
-
/***/ (function(module,
|
|
428
|
-
|
|
429
|
-
"use strict";
|
|
430
|
-
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_430e7741_prod_lang_less__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("9afc");
|
|
431
|
-
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_430e7741_prod_lang_less__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_430e7741_prod_lang_less__WEBPACK_IMPORTED_MODULE_0__);
|
|
432
|
-
/* unused harmony reexport * */
|
|
426
|
+
/***/ "177f":
|
|
427
|
+
/***/ (function(module, exports, __webpack_require__) {
|
|
433
428
|
|
|
429
|
+
// extracted by mini-css-extract-plugin
|
|
434
430
|
|
|
435
431
|
/***/ }),
|
|
436
432
|
|
|
@@ -521,6 +517,17 @@ module.exports = function (it) {
|
|
|
521
517
|
/* unused harmony reexport * */
|
|
522
518
|
|
|
523
519
|
|
|
520
|
+
/***/ }),
|
|
521
|
+
|
|
522
|
+
/***/ "230a":
|
|
523
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
524
|
+
|
|
525
|
+
"use strict";
|
|
526
|
+
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_6cfdbc71_prod_lang_less__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("177f");
|
|
527
|
+
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_6cfdbc71_prod_lang_less__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_6cfdbc71_prod_lang_less__WEBPACK_IMPORTED_MODULE_0__);
|
|
528
|
+
/* unused harmony reexport * */
|
|
529
|
+
|
|
530
|
+
|
|
524
531
|
/***/ }),
|
|
525
532
|
|
|
526
533
|
/***/ "2310":
|
|
@@ -10345,13 +10352,6 @@ module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUgAAADsCAMAAAAh
|
|
|
10345
10352
|
|
|
10346
10353
|
/***/ }),
|
|
10347
10354
|
|
|
10348
|
-
/***/ "9afc":
|
|
10349
|
-
/***/ (function(module, exports, __webpack_require__) {
|
|
10350
|
-
|
|
10351
|
-
// extracted by mini-css-extract-plugin
|
|
10352
|
-
|
|
10353
|
-
/***/ }),
|
|
10354
|
-
|
|
10355
10355
|
/***/ "9bf2":
|
|
10356
10356
|
/***/ (function(module, exports, __webpack_require__) {
|
|
10357
10357
|
|
|
@@ -15140,43 +15140,42 @@ var button_component = normalizeComponent(
|
|
|
15140
15140
|
)
|
|
15141
15141
|
|
|
15142
15142
|
/* harmony default export */ var components_button = (button_component.exports);
|
|
15143
|
-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75d8bda1-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/tabs/index.vue?vue&type=template&id=
|
|
15144
|
-
var
|
|
15143
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75d8bda1-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/tabs/index.vue?vue&type=template&id=6cfdbc71
|
|
15144
|
+
var tabsvue_type_template_id_6cfdbc71_render = function render() {
|
|
15145
15145
|
var _vm = this,
|
|
15146
15146
|
_c = _vm._self._c;
|
|
15147
15147
|
return _c('div', {
|
|
15148
15148
|
staticClass: "vd-tabs",
|
|
15149
15149
|
class: _vm.stickyClasses
|
|
15150
15150
|
}, [_c('div', {
|
|
15151
|
-
ref: "
|
|
15151
|
+
ref: "wrap",
|
|
15152
15152
|
staticClass: "vd-tabs__wrap",
|
|
15153
15153
|
class: _vm.menuClasses
|
|
15154
15154
|
}, [_c('div', {
|
|
15155
|
-
ref: "
|
|
15155
|
+
ref: "nav",
|
|
15156
15156
|
staticClass: "vd-tabs__nav",
|
|
15157
15157
|
class: [_vm.barType, _vm.scrollspy]
|
|
15158
|
-
}, _vm._l(_vm.
|
|
15158
|
+
}, _vm._l(_vm.tabs, function (tab, index) {
|
|
15159
15159
|
return _c('div', {
|
|
15160
|
-
key: index,
|
|
15161
|
-
|
|
15160
|
+
key: tab.name !== undefined ? tab.name : index,
|
|
15161
|
+
ref: "tabItems",
|
|
15162
|
+
refInFor: true,
|
|
15163
|
+
class: [_vm.tabClasses(tab, index), _vm.lineClasses],
|
|
15162
15164
|
on: {
|
|
15163
15165
|
"click": function ($event) {
|
|
15164
|
-
return _vm.
|
|
15166
|
+
return _vm.onClick(tab, index);
|
|
15165
15167
|
}
|
|
15166
15168
|
}
|
|
15167
15169
|
}, [_c('span', {
|
|
15168
|
-
|
|
15170
|
+
ref: "title",
|
|
15171
|
+
refInFor: true,
|
|
15172
|
+
staticClass: "vd-tab__text",
|
|
15169
15173
|
class: _vm.ellipsisClasses
|
|
15170
|
-
}, [_vm._v(" " + _vm._s(
|
|
15171
|
-
staticClass: "vd-tabs-arrow",
|
|
15172
|
-
attrs: {
|
|
15173
|
-
"name": "icon_btn_moredown"
|
|
15174
|
-
}
|
|
15175
|
-
}) : _vm._e()], 1)]);
|
|
15174
|
+
}, [_vm._v(" " + _vm._s(tab.title) + " ")])]);
|
|
15176
15175
|
}), 0), _vm.menu ? _c('div', {
|
|
15177
|
-
staticClass: "vd-
|
|
15176
|
+
staticClass: "vd-tabs__menu--right"
|
|
15178
15177
|
}, [_c('vd-icon', {
|
|
15179
|
-
staticClass: "vd-
|
|
15178
|
+
staticClass: "vd-tabs__menu--btn",
|
|
15180
15179
|
attrs: {
|
|
15181
15180
|
"name": _vm.menuIconComputed
|
|
15182
15181
|
},
|
|
@@ -15184,12 +15183,19 @@ var tabsvue_type_template_id_430e7741_render = function render() {
|
|
|
15184
15183
|
"click": _vm.emitMenuClick
|
|
15185
15184
|
}
|
|
15186
15185
|
})], 1) : _vm._e()]), _c('div', {
|
|
15187
|
-
|
|
15188
|
-
|
|
15186
|
+
ref: "content",
|
|
15187
|
+
staticClass: "vd-tabs__content",
|
|
15188
|
+
class: {
|
|
15189
|
+
'vd-tabs__content--animated': _vm.animated
|
|
15190
|
+
}
|
|
15191
|
+
}, [_vm.animated ? _c('div', {
|
|
15192
|
+
class: _vm.trackClasses,
|
|
15193
|
+
style: _vm.trackStyle
|
|
15194
|
+
}, [_vm._t("default")], 2) : _vm._t("default")], 2)]);
|
|
15189
15195
|
};
|
|
15190
|
-
var
|
|
15196
|
+
var tabsvue_type_template_id_6cfdbc71_staticRenderFns = [];
|
|
15191
15197
|
|
|
15192
|
-
// CONCATENATED MODULE: ./packages/components/tabs/index.vue?vue&type=template&id=
|
|
15198
|
+
// CONCATENATED MODULE: ./packages/components/tabs/index.vue?vue&type=template&id=6cfdbc71
|
|
15193
15199
|
|
|
15194
15200
|
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
|
15195
15201
|
var es_array_push = __webpack_require__("14d9");
|
|
@@ -15209,7 +15215,6 @@ const prefixCls = "vd-tabs";
|
|
|
15209
15215
|
type: String,
|
|
15210
15216
|
default: "primary"
|
|
15211
15217
|
},
|
|
15212
|
-
// 将 menu 作为一个字段,同时控制显示和图标名称
|
|
15213
15218
|
menu: {
|
|
15214
15219
|
type: [Boolean, String],
|
|
15215
15220
|
default: false
|
|
@@ -15222,30 +15227,44 @@ const prefixCls = "vd-tabs";
|
|
|
15222
15227
|
backgroundColor: Boolean,
|
|
15223
15228
|
divider: Boolean,
|
|
15224
15229
|
sticky: Boolean,
|
|
15225
|
-
lazyRender: Boolean
|
|
15230
|
+
lazyRender: Boolean,
|
|
15231
|
+
animated: Boolean
|
|
15226
15232
|
},
|
|
15227
15233
|
data() {
|
|
15228
15234
|
return {
|
|
15229
|
-
|
|
15230
|
-
//
|
|
15231
|
-
navList: [],
|
|
15232
|
-
// 标签导航列表
|
|
15233
|
-
tabs: [] // 已注册的标签
|
|
15235
|
+
tabs: [],
|
|
15236
|
+
currentName: this.value !== undefined ? this.value : 0 // 默认为 0
|
|
15234
15237
|
};
|
|
15235
15238
|
},
|
|
15236
15239
|
watch: {
|
|
15237
15240
|
// 监听 value 变化,更新 currentValue
|
|
15238
15241
|
value(val) {
|
|
15239
|
-
this.
|
|
15242
|
+
this.currentName = val;
|
|
15243
|
+
this.setCurrentName(val);
|
|
15240
15244
|
}
|
|
15241
15245
|
},
|
|
15242
15246
|
computed: {
|
|
15247
|
+
trackClasses() {
|
|
15248
|
+
return {
|
|
15249
|
+
'vd-tabs__track': true
|
|
15250
|
+
};
|
|
15251
|
+
},
|
|
15252
|
+
trackStyle() {
|
|
15253
|
+
const activeIndex = this.tabs.findIndex((tab, index) => {
|
|
15254
|
+
return this.isTabActive(tab, index);
|
|
15255
|
+
});
|
|
15256
|
+
const translateX = -activeIndex * 100;
|
|
15257
|
+
return {
|
|
15258
|
+
transform: `translateX(${translateX}%)`,
|
|
15259
|
+
transitionDuration: '0.3s'
|
|
15260
|
+
};
|
|
15261
|
+
},
|
|
15243
15262
|
// 计算菜单按钮的图标,根据 menu 属性的类型决定图标
|
|
15244
15263
|
menuIconComputed() {
|
|
15245
|
-
if (typeof this.menu ===
|
|
15264
|
+
if (typeof this.menu === "string") {
|
|
15246
15265
|
return this.menu;
|
|
15247
15266
|
} else {
|
|
15248
|
-
return
|
|
15267
|
+
return "icon_tab_morelist"; // 默认的菜单图标名称
|
|
15249
15268
|
}
|
|
15250
15269
|
},
|
|
15251
15270
|
// 计算滚动监视的类名
|
|
@@ -15255,13 +15274,13 @@ const prefixCls = "vd-tabs";
|
|
|
15255
15274
|
// 计算标签文字是否需要省略号的类名
|
|
15256
15275
|
ellipsisClasses() {
|
|
15257
15276
|
return {
|
|
15258
|
-
[
|
|
15277
|
+
[`vd-tab__text--ellipsis`]: this.ellipsis
|
|
15259
15278
|
};
|
|
15260
15279
|
},
|
|
15261
15280
|
// 计算标签包裹器的类名,根据 menu、backgroundColor 和 divider 属性来确定
|
|
15262
15281
|
menuClasses() {
|
|
15263
15282
|
return {
|
|
15264
|
-
[`${prefixCls}
|
|
15283
|
+
[`${prefixCls}__menu`]: this.menu,
|
|
15265
15284
|
[`${prefixCls}__wrap--bg`]: this.backgroundColor,
|
|
15266
15285
|
"vd-hairline--bottom": this.divider
|
|
15267
15286
|
};
|
|
@@ -15269,13 +15288,13 @@ const prefixCls = "vd-tabs";
|
|
|
15269
15288
|
// 计算标签下方线条的类名
|
|
15270
15289
|
lineClasses() {
|
|
15271
15290
|
return {
|
|
15272
|
-
[
|
|
15291
|
+
[`vd-tab__none--line`]: !this.actBorder
|
|
15273
15292
|
};
|
|
15274
15293
|
},
|
|
15275
15294
|
// 根据 tabsType 属性计算标签类型的类名
|
|
15276
15295
|
barType() {
|
|
15277
15296
|
return {
|
|
15278
|
-
[`${prefixCls}
|
|
15297
|
+
[`${prefixCls}__nav--${this.tabsType}`]: this.tabsType
|
|
15279
15298
|
};
|
|
15280
15299
|
},
|
|
15281
15300
|
stickyClasses() {
|
|
@@ -15287,86 +15306,126 @@ const prefixCls = "vd-tabs";
|
|
|
15287
15306
|
methods: {
|
|
15288
15307
|
// 当菜单按钮被点击时触发事件
|
|
15289
15308
|
emitMenuClick() {
|
|
15290
|
-
this.$emit(
|
|
15309
|
+
this.$emit("menu-click");
|
|
15291
15310
|
},
|
|
15292
15311
|
// 计算每个标签项的类名
|
|
15293
|
-
tabClasses(
|
|
15312
|
+
tabClasses(tab, index) {
|
|
15313
|
+
const isActive = this.isTabActive(tab, index);
|
|
15294
15314
|
return {
|
|
15295
|
-
|
|
15296
|
-
|
|
15315
|
+
'vd-tab': true,
|
|
15316
|
+
'vd-tab--active': isActive
|
|
15297
15317
|
};
|
|
15298
15318
|
},
|
|
15299
|
-
|
|
15300
|
-
|
|
15301
|
-
|
|
15302
|
-
|
|
15303
|
-
|
|
15319
|
+
setCurrentName(name) {
|
|
15320
|
+
// 如果没有指定 name 属性,则使用索引值,确保索引值为数字类型
|
|
15321
|
+
const nameIsNumber = typeof name === 'number' || /^\d+$/.test(name);
|
|
15322
|
+
const parsedName = nameIsNumber ? Number(name) : name;
|
|
15323
|
+
const matchedTab = this.tabs.find((tab, index) => {
|
|
15324
|
+
if (tab.name !== undefined) {
|
|
15325
|
+
return tab.name === parsedName;
|
|
15326
|
+
} else {
|
|
15327
|
+
return index === parsedName;
|
|
15328
|
+
}
|
|
15329
|
+
});
|
|
15330
|
+
if (matchedTab) {
|
|
15331
|
+
this.currentName = matchedTab.name !== undefined ? matchedTab.name : this.tabs.indexOf(matchedTab);
|
|
15332
|
+
} else if (this.tabs.length > 0) {
|
|
15333
|
+
const firstTab = this.tabs[0];
|
|
15334
|
+
this.currentName = firstTab.name !== undefined ? firstTab.name : 0;
|
|
15335
|
+
} else {
|
|
15336
|
+
this.currentName = null;
|
|
15304
15337
|
}
|
|
15338
|
+
this.$emit('input', this.currentName);
|
|
15305
15339
|
},
|
|
15306
|
-
|
|
15307
|
-
|
|
15340
|
+
isTabActive(tab, index) {
|
|
15341
|
+
if (tab.name !== undefined) {
|
|
15342
|
+
return tab.name === this.currentName;
|
|
15343
|
+
} else {
|
|
15344
|
+
return index === Number(this.currentName);
|
|
15345
|
+
}
|
|
15346
|
+
},
|
|
15347
|
+
addTab(tab) {
|
|
15348
|
+
this.tabs.push(tab);
|
|
15349
|
+
if (this.currentName === undefined) {
|
|
15350
|
+
this.setCurrentName(tab.name !== undefined ? tab.name : 0);
|
|
15351
|
+
}
|
|
15352
|
+
},
|
|
15353
|
+
removeTab(tab) {
|
|
15308
15354
|
const index = this.tabs.indexOf(tab);
|
|
15309
15355
|
if (index !== -1) {
|
|
15310
15356
|
this.tabs.splice(index, 1);
|
|
15311
|
-
|
|
15312
|
-
|
|
15313
|
-
|
|
15314
|
-
|
|
15315
|
-
|
|
15316
|
-
|
|
15317
|
-
|
|
15318
|
-
|
|
15319
|
-
|
|
15320
|
-
|
|
15321
|
-
|
|
15322
|
-
|
|
15323
|
-
this
|
|
15324
|
-
|
|
15325
|
-
|
|
15326
|
-
|
|
15327
|
-
|
|
15328
|
-
|
|
15329
|
-
|
|
15330
|
-
|
|
15331
|
-
|
|
15332
|
-
|
|
15333
|
-
|
|
15334
|
-
|
|
15335
|
-
|
|
15336
|
-
|
|
15337
|
-
|
|
15338
|
-
|
|
15339
|
-
|
|
15340
|
-
|
|
15341
|
-
|
|
15342
|
-
|
|
15343
|
-
|
|
15344
|
-
|
|
15345
|
-
|
|
15346
|
-
adjustTabPosition(index) {
|
|
15347
|
-
const container = this.$refs.tabsContainer;
|
|
15348
|
-
const selectedTab = container.children[index];
|
|
15349
|
-
if (selectedTab) {
|
|
15350
|
-
const containerWidth = container.offsetWidth;
|
|
15351
|
-
const tabWidth = selectedTab.offsetWidth;
|
|
15352
|
-
const tabOffsetLeft = selectedTab.offsetLeft;
|
|
15353
|
-
const scrollLeft = tabOffsetLeft - (containerWidth - tabWidth) / 2;
|
|
15354
|
-
container.scrollTo({
|
|
15357
|
+
}
|
|
15358
|
+
},
|
|
15359
|
+
onClick(tab, index) {
|
|
15360
|
+
if (tab.disabled) {
|
|
15361
|
+
this.$emit('disabled', tab.name !== undefined ? tab.name : index, index);
|
|
15362
|
+
} else {
|
|
15363
|
+
this.currentName = tab.name !== undefined ? tab.name : index;
|
|
15364
|
+
// 如果 currentName 是索引值,确保为数字类型
|
|
15365
|
+
if (tab.name === undefined) {
|
|
15366
|
+
this.currentName = Number(this.currentName);
|
|
15367
|
+
}
|
|
15368
|
+
this.$emit('input', this.currentName);
|
|
15369
|
+
this.$emit('change', this.currentName, index);
|
|
15370
|
+
// 切换标签后,滚动到当前标签
|
|
15371
|
+
this.$nextTick(() => {
|
|
15372
|
+
this.scrollToActiveTab();
|
|
15373
|
+
});
|
|
15374
|
+
}
|
|
15375
|
+
},
|
|
15376
|
+
scrollToActiveTab() {
|
|
15377
|
+
const scrollWrapper = this.$refs.nav; // 修改这里
|
|
15378
|
+
const tabItems = this.$refs.tabItems;
|
|
15379
|
+
if (!scrollWrapper || !tabItems || tabItems.length === 0) {
|
|
15380
|
+
return;
|
|
15381
|
+
}
|
|
15382
|
+
const activeIndex = this.tabs.findIndex((tab, index) => {
|
|
15383
|
+
return this.isTabActive(tab, index);
|
|
15384
|
+
});
|
|
15385
|
+
const activeTab = tabItems[activeIndex];
|
|
15386
|
+
if (activeTab) {
|
|
15387
|
+
const tabOffsetLeft = activeTab.offsetLeft;
|
|
15388
|
+
const tabWidth = activeTab.offsetWidth;
|
|
15389
|
+
const wrapperWidth = scrollWrapper.offsetWidth;
|
|
15390
|
+
const scrollLeft = tabOffsetLeft - (wrapperWidth - tabWidth) / 2;
|
|
15391
|
+
scrollWrapper.scrollTo({
|
|
15355
15392
|
left: scrollLeft,
|
|
15356
|
-
behavior:
|
|
15393
|
+
behavior: 'smooth'
|
|
15357
15394
|
});
|
|
15358
15395
|
}
|
|
15396
|
+
},
|
|
15397
|
+
renderTitle(titleEl, tab) {
|
|
15398
|
+
this.$nextTick(() => {
|
|
15399
|
+
const index = this.tabs.indexOf(tab);
|
|
15400
|
+
if (index !== -1 && this.$refs.title && this.$refs.title[index]) {
|
|
15401
|
+
const navTitleEl = this.$refs.title[index];
|
|
15402
|
+
// 清空导航标题元素的内容
|
|
15403
|
+
navTitleEl.innerHTML = '';
|
|
15404
|
+
// 将子组件的 title 插槽内容移动到导航标题元素中
|
|
15405
|
+
while (titleEl.firstChild) {
|
|
15406
|
+
navTitleEl.appendChild(titleEl.firstChild);
|
|
15407
|
+
}
|
|
15408
|
+
}
|
|
15409
|
+
});
|
|
15359
15410
|
}
|
|
15360
15411
|
},
|
|
15361
15412
|
mounted() {
|
|
15362
|
-
|
|
15363
|
-
|
|
15413
|
+
if (this.currentName !== undefined) {
|
|
15414
|
+
this.setCurrentName(this.currentName);
|
|
15415
|
+
} else if (this.tabs.length > 0) {
|
|
15416
|
+
const firstTab = this.tabs[0];
|
|
15417
|
+
this.currentName = firstTab.name !== undefined ? firstTab.name : 0;
|
|
15418
|
+
}
|
|
15419
|
+
// 初始加载时,滚动到当前激活的标签
|
|
15420
|
+
this.$nextTick(() => {
|
|
15421
|
+
this.scrollToActiveTab();
|
|
15422
|
+
});
|
|
15364
15423
|
}
|
|
15365
15424
|
});
|
|
15366
15425
|
// CONCATENATED MODULE: ./packages/components/tabs/index.vue?vue&type=script&lang=js
|
|
15367
15426
|
/* harmony default export */ var components_tabsvue_type_script_lang_js = (tabsvue_type_script_lang_js);
|
|
15368
|
-
// EXTERNAL MODULE: ./packages/components/tabs/index.vue?vue&type=style&index=0&id=
|
|
15369
|
-
var
|
|
15427
|
+
// EXTERNAL MODULE: ./packages/components/tabs/index.vue?vue&type=style&index=0&id=6cfdbc71&prod&lang=less
|
|
15428
|
+
var tabsvue_type_style_index_0_id_6cfdbc71_prod_lang_less = __webpack_require__("230a");
|
|
15370
15429
|
|
|
15371
15430
|
// CONCATENATED MODULE: ./packages/components/tabs/index.vue
|
|
15372
15431
|
|
|
@@ -15379,8 +15438,8 @@ var tabsvue_type_style_index_0_id_430e7741_prod_lang_less = __webpack_require__(
|
|
|
15379
15438
|
|
|
15380
15439
|
var tabs_component = normalizeComponent(
|
|
15381
15440
|
components_tabsvue_type_script_lang_js,
|
|
15382
|
-
|
|
15383
|
-
|
|
15441
|
+
tabsvue_type_template_id_6cfdbc71_render,
|
|
15442
|
+
tabsvue_type_template_id_6cfdbc71_staticRenderFns,
|
|
15384
15443
|
false,
|
|
15385
15444
|
null,
|
|
15386
15445
|
null,
|
|
@@ -15389,73 +15448,104 @@ var tabs_component = normalizeComponent(
|
|
|
15389
15448
|
)
|
|
15390
15449
|
|
|
15391
15450
|
/* harmony default export */ var tabs = (tabs_component.exports);
|
|
15392
|
-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75d8bda1-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/tab/index.vue?vue&type=template&id=
|
|
15393
|
-
var
|
|
15451
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75d8bda1-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/tab/index.vue?vue&type=template&id=6808f4f4
|
|
15452
|
+
var tabvue_type_template_id_6808f4f4_render = function render() {
|
|
15394
15453
|
var _vm = this,
|
|
15395
15454
|
_c = _vm._self._c;
|
|
15396
15455
|
return _c('div', {
|
|
15397
|
-
|
|
15398
|
-
|
|
15456
|
+
directives: [{
|
|
15457
|
+
name: "show",
|
|
15458
|
+
rawName: "v-show",
|
|
15459
|
+
value: _vm.shouldShow,
|
|
15460
|
+
expression: "shouldShow"
|
|
15461
|
+
}],
|
|
15462
|
+
class: _vm.paneClasses
|
|
15463
|
+
}, [_vm.shouldRender ? _vm._t("default") : _vm._e(), _vm.$slots.title ? _c('div', {
|
|
15464
|
+
ref: "title"
|
|
15465
|
+
}, [_vm._t("title")], 2) : _vm._e()], 2);
|
|
15399
15466
|
};
|
|
15400
|
-
var
|
|
15467
|
+
var tabvue_type_template_id_6808f4f4_staticRenderFns = [];
|
|
15401
15468
|
|
|
15402
|
-
// CONCATENATED MODULE: ./packages/components/tab/index.vue?vue&type=template&id=
|
|
15469
|
+
// CONCATENATED MODULE: ./packages/components/tab/index.vue?vue&type=template&id=6808f4f4
|
|
15403
15470
|
|
|
15404
15471
|
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/tab/index.vue?vue&type=script&lang=js
|
|
15405
15472
|
/* harmony default export */ var tabvue_type_script_lang_js = ({
|
|
15406
15473
|
name: 'vd-tab',
|
|
15407
15474
|
props: {
|
|
15408
15475
|
name: [String, Number],
|
|
15409
|
-
title:
|
|
15410
|
-
type: String
|
|
15411
|
-
},
|
|
15412
|
-
arrow: {
|
|
15413
|
-
type: Boolean,
|
|
15414
|
-
default: false
|
|
15415
|
-
}
|
|
15476
|
+
title: String
|
|
15416
15477
|
},
|
|
15417
15478
|
data() {
|
|
15418
15479
|
return {
|
|
15419
|
-
|
|
15480
|
+
parent: null,
|
|
15481
|
+
inited: false
|
|
15420
15482
|
};
|
|
15421
15483
|
},
|
|
15422
|
-
watch: {
|
|
15423
|
-
isActive(newVal) {
|
|
15424
|
-
if (newVal && !this.isRendered) {
|
|
15425
|
-
this.isRendered = true;
|
|
15426
|
-
}
|
|
15427
|
-
}
|
|
15428
|
-
},
|
|
15429
15484
|
computed: {
|
|
15430
|
-
|
|
15431
|
-
return this.computedName === this.$parent.currentValue;
|
|
15432
|
-
},
|
|
15433
|
-
tabClasses() {
|
|
15485
|
+
paneClasses() {
|
|
15434
15486
|
return {
|
|
15435
|
-
'vd-
|
|
15436
|
-
'vd-tab-active': this.isActive
|
|
15487
|
+
'vd-tab__pane': true
|
|
15437
15488
|
};
|
|
15438
15489
|
},
|
|
15439
|
-
|
|
15440
|
-
|
|
15441
|
-
|
|
15442
|
-
|
|
15443
|
-
if (this.$parent.lazyRender) {
|
|
15444
|
-
return this.isRendered || this.isActive;
|
|
15490
|
+
isActive() {
|
|
15491
|
+
if (!this.parent) return false;
|
|
15492
|
+
if (this.name !== undefined) {
|
|
15493
|
+
return this.name === this.parent.currentName;
|
|
15445
15494
|
} else {
|
|
15446
|
-
|
|
15495
|
+
const index = this.parent.tabs.indexOf(this);
|
|
15496
|
+
return index === Number(this.parent.currentName);
|
|
15447
15497
|
}
|
|
15448
15498
|
},
|
|
15449
|
-
|
|
15450
|
-
//
|
|
15451
|
-
|
|
15499
|
+
shouldShow() {
|
|
15500
|
+
// 当 animated 为 true 时,所有标签页都需要渲染(用于动画效果)
|
|
15501
|
+
// 当 animated 为 false 时,只渲染当前激活的标签页
|
|
15502
|
+
return this.isActive || this.parent && this.parent.animated;
|
|
15503
|
+
},
|
|
15504
|
+
shouldRender() {
|
|
15505
|
+
return this.inited || !(this.parent && this.parent.lazyRender);
|
|
15506
|
+
}
|
|
15507
|
+
},
|
|
15508
|
+
watch: {
|
|
15509
|
+
isActive(val) {
|
|
15510
|
+
if (val) {
|
|
15511
|
+
this.inited = true;
|
|
15512
|
+
}
|
|
15452
15513
|
}
|
|
15453
15514
|
},
|
|
15454
15515
|
created() {
|
|
15455
|
-
this
|
|
15516
|
+
this.parent = this.findParent('vd-tabs');
|
|
15517
|
+
if (this.parent) {
|
|
15518
|
+
this.parent.addTab(this);
|
|
15519
|
+
} else {
|
|
15520
|
+
console.error('vd-tab must be used within vd-tabs.');
|
|
15521
|
+
}
|
|
15522
|
+
},
|
|
15523
|
+
mounted() {
|
|
15524
|
+
if (this.isActive) {
|
|
15525
|
+
this.inited = true;
|
|
15526
|
+
}
|
|
15527
|
+
// 如果存在 title 插槽,调用父组件的 renderTitle 方法
|
|
15528
|
+
if (this.$slots.title && this.$refs.title) {
|
|
15529
|
+
this.parent.renderTitle(this.$refs.title, this);
|
|
15530
|
+
this.$refs.title.parentNode.removeChild(this.$refs.title);
|
|
15531
|
+
}
|
|
15456
15532
|
},
|
|
15457
15533
|
beforeDestroy() {
|
|
15458
|
-
this
|
|
15534
|
+
if (this.parent) {
|
|
15535
|
+
this.parent.removeTab(this);
|
|
15536
|
+
}
|
|
15537
|
+
},
|
|
15538
|
+
methods: {
|
|
15539
|
+
findParent(name) {
|
|
15540
|
+
let parent = this.$parent;
|
|
15541
|
+
while (parent) {
|
|
15542
|
+
if (parent.$options && parent.$options.name === name) {
|
|
15543
|
+
return parent;
|
|
15544
|
+
}
|
|
15545
|
+
parent = parent.$parent;
|
|
15546
|
+
}
|
|
15547
|
+
return null;
|
|
15548
|
+
}
|
|
15459
15549
|
}
|
|
15460
15550
|
});
|
|
15461
15551
|
// CONCATENATED MODULE: ./packages/components/tab/index.vue?vue&type=script&lang=js
|
|
@@ -15470,8 +15560,8 @@ var tabvue_type_template_id_2c2d2daf_staticRenderFns = [];
|
|
|
15470
15560
|
|
|
15471
15561
|
var tab_component = normalizeComponent(
|
|
15472
15562
|
components_tabvue_type_script_lang_js,
|
|
15473
|
-
|
|
15474
|
-
|
|
15563
|
+
tabvue_type_template_id_6808f4f4_render,
|
|
15564
|
+
tabvue_type_template_id_6808f4f4_staticRenderFns,
|
|
15475
15565
|
false,
|
|
15476
15566
|
null,
|
|
15477
15567
|
null,
|
|
@@ -20813,6 +20903,8 @@ var toast_component = normalizeComponent(
|
|
|
20813
20903
|
|
|
20814
20904
|
|
|
20815
20905
|
|
|
20906
|
+
|
|
20907
|
+
let queueResult = [];
|
|
20816
20908
|
function getType(value) {
|
|
20817
20909
|
if (value !== value) return 'NaN';
|
|
20818
20910
|
return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
|
|
@@ -20867,12 +20959,22 @@ class toast_VdToast extends vue_runtime_esm["a" /* default */].extend(components
|
|
|
20867
20959
|
this.isShow = false;
|
|
20868
20960
|
if (inBrowser && this.vm.$el) {
|
|
20869
20961
|
setTimeout(() => {
|
|
20870
|
-
this.vm.$el.parentNode.removeChild(this.vm.$el);
|
|
20962
|
+
this.vm.$el.parentNode && this.vm.$el.parentNode.removeChild(this.vm.$el);
|
|
20871
20963
|
}, 500);
|
|
20872
20964
|
}
|
|
20873
20965
|
}
|
|
20874
20966
|
}
|
|
20875
|
-
const Toast = options =>
|
|
20967
|
+
const Toast = options => {
|
|
20968
|
+
const NewOption = new toast_VdToast(options);
|
|
20969
|
+
queueResult.push(NewOption);
|
|
20970
|
+
return NewOption;
|
|
20971
|
+
};
|
|
20972
|
+
Toast.clear = () => {
|
|
20973
|
+
queueResult.forEach(toast => {
|
|
20974
|
+
toast.clear();
|
|
20975
|
+
});
|
|
20976
|
+
queueResult = [];
|
|
20977
|
+
};
|
|
20876
20978
|
/* harmony default export */ var packages_components_toast = (Toast);
|
|
20877
20979
|
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"75d8bda1-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/footer/index.vue?vue&type=template&id=2c9567c1
|
|
20878
20980
|
var footervue_type_template_id_2c9567c1_render = function render() {
|