@ohu-mobile/core
Version:
843 lines (842 loc) • 23.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Outline = exports.Basic = void 0;
var _ArrowRightSOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowRightSOutlined"));
var _ArrowLeftOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowLeftOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Tag = _interopRequireDefault(require("../Tag"));
require("../Tag/style");
var _Card = _interopRequireDefault(require("../Card"));
require("../Card/style");
var _Dialog = _interopRequireDefault(require("../Dialog"));
require("../Dialog/style");
var _Toast = _interopRequireDefault(require("../Toast"));
require("../Toast/style");
var _TreeSelect = _interopRequireDefault(require("../TreeSelect"));
require("../TreeSelect/style");
var _CheckboxGroup = _interopRequireDefault(require("../CheckboxGroup"));
require("../CheckboxGroup/style");
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
require("../Checkbox/style");
var _Form = _interopRequireDefault(require("../Form"));
require("../Form/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
title: 'Components/Form/Select',
parameters: {
component: _index.default,
options: {
showPanel: true
}
}
};
var Basic = exports.Basic = function Basic() {
return _vue.default.extend({
data: function data() {
return {
v1: '艺术',
v2: ['体育', '科学'],
v3: '计算机',
v4: '淳安县',
control: '淳安县'
};
},
methods: {
removeV2: function removeV2(value) {
var index = this.v2.indexOf(value);
if (index >= 0) {
this.v2.splice(index, 1);
}
},
loadData: function loadData(node) {
return new Promise(function (resolve, reject) {
if (node.value === '杭州') {
return setTimeout(function () {
resolve([{
title: '滨江区',
value: '滨江区',
isLeaf: true
}, {
title: '淳安县',
value: '淳安县',
isLeaf: true
}, {
title: '拱墅区',
value: '拱墅区',
isLeaf: true
}]);
}, 2000);
} else if (node.value === '湖州') {
return resolve([{
title: '长兴',
value: '长兴',
isLeaf: true
}]);
}
resolve([]);
});
}
},
render: function render() {
var _this = this;
var h = arguments[0];
return h("div", {
"class": "demo"
}, [h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["basic"]), h(_index.default, {
"style": "min-width: 165px;",
"attrs": {
"title": "选择科目",
"placeholder": "选择科目",
"maxHeight": "30vh",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"model": {
value: _this.v1,
callback: function callback($$v) {
_this.v1 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["confirm"]), h(_index.default, {
"style": "width: 100%;",
"attrs": {
"title": "选择科目",
"confirm": true,
"allowClear": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"model": {
value: _this.v1,
callback: function callback($$v) {
_this.v1 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["multiple"]), h(_index.default, {
"style": "min-width: 165px;",
"attrs": {
"title": "选择科目",
"multiple": true,
"max": 3,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"model": {
value: _this.v2,
callback: function callback($$v) {
_this.v2 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["disabled"]), h(_index.default, {
"attrs": {
"disabled": true,
"title": "选择科目",
"multiple": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;",
"model": {
value: _this.v2,
callback: function callback($$v) {
_this.v2 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["scopedSlots: control"]), h(_index.default, {
"style": "min-width: 165px;",
"attrs": {
"title": "选择科目",
"multiple": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"scopedSlots": {
control: function control(selectedOptions) {
if (selectedOptions instanceof Array) {
return selectedOptions.map(function (_ref) {
var label = _ref.label,
value = _ref.value;
return h(_Tag.default, {
"on": {
"click": function click(e) {
e.stopPropagation();
_Dialog.default.confirm({
title: "\u662F\u5426\u5220\u9664".concat(label),
onOk: function onOk() {
_this.removeV2(value);
}
});
}
},
"style": "margin-right: 5px;",
"attrs": {
"deleteable": true
}
}, [label]);
});
}
return h(_Tag.default, {
"attrs": {
"deleteable": true
}
}, [selectedOptions.label]);
}
},
"model": {
value: _this.v2,
callback: function callback($$v) {
_this.v2 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["native"]), h(_index.default, {
"style": "min-width: 165px;",
"attrs": {
"title": "选择科目",
"native": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术',
disabled: true
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"model": {
value: _this.v1,
callback: function callback($$v) {
_this.v1 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["popup custom"]), h(_index.default, {
"style": "min-width: 165px;",
"attrs": {
"title": "选择科目",
"icon": _ArrowRightSOutlined2.default,
"popupProps": {
position: 'right',
fullscreen: true,
mask: false
},
"headerProps": {
closeIcon: _ArrowLeftOutlined2.default,
center: true,
closeIconPosition: 'left'
},
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术',
disabled: true
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"model": {
value: _this.v1,
callback: function callback($$v) {
_this.v1 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["scoped-slots content\uFF08use TreeSelect\uFF09"]), h(_Form.default, {
"attrs": {
"initialValues": {
x: this.v4
},
"inline": true
}
}, [h(_Form.default.Field, {
"attrs": {
"name": "x",
"label": "x"
}
}, [h(_index.default, {
"style": "min-width: 165px;",
"attrs": {
"title": "选择高中",
"popupContentStyle": {
height: '100%'
},
"icon": _ArrowRightSOutlined2.default,
"fullScreen": true,
"placeholder": "选择高中"
},
"scopedSlots": {
control: function control() {
return _this.control;
},
content: function content(_ref2) {
var value = _ref2.value,
handleChange = _ref2.handleChange,
opened = _ref2.opened;
return h("div", {
"style": {
height: '100%'
}
}, [h(_CheckboxGroup.default, {
"attrs": {
"value": ['1', '2']
}
}, [h(_Checkbox.default, {
"attrs": {
"value": "1"
}
}, ["\u7537"]), h(_Checkbox.default, {
"attrs": {
"value": "2"
}
}, ["\u5973"])]), h(_TreeSelect.default, {
"style": {
height: '100%'
},
"attrs": {
"value": value,
"keyPath": ['杭州', '淳安县'],
"treeData": [{
title: '杭州',
value: '杭州',
hasChildren: true
}, {
title: '湖州',
value: '湖州',
hasChildren: true
}, {
title: '嘉兴',
value: '嘉兴',
hasChildren: true
}],
"loadData": _this.loadData
},
"on": {
"change": function change(value, _ref3) {
var node = _ref3.node,
path = _ref3.path;
_this.control = path.map(function (n) {
return n.title;
}).join('/');
handleChange(value, {
label: node.title,
value: node.value
});
}
}
})]);
}
}
})])])])]);
}
});
};
var Outline = exports.Outline = function Outline() {
return _vue.default.extend({
data: function data() {
return {
v1: '艺术',
v2: ['体育', '科学'],
v3: '计算机',
v: false
};
},
methods: {
removeV2: function removeV2(value) {
var index = this.v2.indexOf(value);
if (index >= 0) {
this.v2.splice(index, 1);
}
}
},
render: function render() {
var _this2 = this;
var h = arguments[0];
return h("div", {
"class": "demo"
}, [h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["basic"]), h(_index.default, {
"attrs": {
"outline": true,
"title": "选择科目",
"visible": this.v,
"placeholder": "选择科目",
"maxHeight": "30vh",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;",
"model": {
value: _this2.v1,
callback: function callback($$v) {
_this2.v1 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["confirm"]), h(_index.default, {
"attrs": {
"outline": true,
"title": "选择科目",
"confirm": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;",
"model": {
value: _this2.v1,
callback: function callback($$v) {
_this2.v1 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["confirm"]), h(_index.default, {
"attrs": {
"outline": true,
"title": "选择科目",
"confirm": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;",
"model": {
value: _this2.v1,
callback: function callback($$v) {
_this2.v1 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["multiple"]), h(_index.default, {
"attrs": {
"outline": true,
"title": "选择科目",
"multiple": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;",
"model": {
value: _this2.v2,
callback: function callback($$v) {
_this2.v2 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["beforeOpen"]), h(_index.default, {
"attrs": {
"outline": true,
"beforeOpen": function beforeOpen() {
return new Promise(function (resolve, reject) {
var instance = _Toast.default.loading('延时打开');
setTimeout(function () {
instance.close();
resolve(true);
}, 2000);
});
},
"title": "选择科目",
"placeholder": "选择科目",
"maxHeight": "30vh",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;"
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["scopedSlots: control"]), h(_index.default, {
"attrs": {
"outline": true,
"title": "选择科目",
"multiple": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术'
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;",
"scopedSlots": {
control: function control(selectedOptions) {
if (selectedOptions instanceof Array) {
return selectedOptions.map(function (_ref4) {
var label = _ref4.label,
value = _ref4.value;
return h(_Tag.default, {
"on": {
"click": function click(e) {
e.stopPropagation();
_Dialog.default.confirm({
title: "\u662F\u5426\u5220\u9664".concat(label),
onOk: function onOk() {
_this2.removeV2(value);
}
});
}
},
"style": "margin-right: 5px;",
"attrs": {
"deleteable": true
}
}, [label]);
});
}
return h(_Tag.default, {
"attrs": {
"deleteable": true
}
}, [selectedOptions.label]);
}
},
"model": {
value: _this2.v2,
callback: function callback($$v) {
_this2.v2 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["native"]), h(_index.default, {
"attrs": {
"outline": true,
"title": "选择科目",
"native": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术',
disabled: true
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;",
"model": {
value: _this2.v1,
callback: function callback($$v) {
_this2.v1 = $$v;
}
}
})]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["fullscreen"]), h(_index.default, {
"attrs": {
"outline": true,
"title": "选择科目",
"icon": _ArrowRightSOutlined2.default,
"fullScreen": true,
"placeholder": "选择科目",
"options": [{
label: '艺术',
value: '艺术',
disabled: true
}, {
label: '体育',
value: '体育'
}, {
label: '科学',
value: '科学'
}, {
label: '物理',
value: '物理'
}, {
label: '计算机',
value: '计算机'
}, {
label: '化学',
value: '化学'
}]
},
"style": "min-width: 165px;",
"model": {
value: _this2.v1,
callback: function callback($$v) {
_this2.v1 = $$v;
}
}
})])]);
}
});
};