first
This commit is contained in:
1
node_modules/vant/es/cascader/index.css
generated
vendored
Normal file
1
node_modules/vant/es/cascader/index.css
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
.van-cascader__header{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:48px;padding:0 16px}.van-cascader__title{font-weight:500;font-size:16px;line-height:20px}.van-cascader__close-icon{color:#c8c9cc;font-size:22px}.van-cascader__close-icon:active{color:#969799}.van-cascader__tabs .van-tab{-webkit-box-flex:0;-webkit-flex:none;flex:none;padding:0 10px}.van-cascader__tabs.van-tabs--line .van-tabs__wrap{height:48px}.van-cascader__tabs .van-tabs__nav--complete{padding-right:6px;padding-left:6px}.van-cascader__tab{color:#323233;font-weight:500}.van-cascader__tab--unselected{color:#969799;font-weight:400}.van-cascader__option{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding:10px 16px;font-size:14px;line-height:20px}.van-cascader__option:active{background-color:#f2f3f5}.van-cascader__option--selected{color:#ee0a24;font-weight:500}.van-cascader__selected-icon{font-size:18px}.van-cascader__options{box-sizing:border-box;height:384px;padding-top:6px;overflow-y:auto;-webkit-overflow-scrolling:touch}
|
284
node_modules/vant/es/cascader/index.js
generated
vendored
Normal file
284
node_modules/vant/es/cascader/index.js
generated
vendored
Normal file
@ -0,0 +1,284 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import Tab from '../tab';
|
||||
import Tabs from '../tabs';
|
||||
import Icon from '../icon';
|
||||
|
||||
var _createNamespace = createNamespace('cascader'),
|
||||
createComponent = _createNamespace[0],
|
||||
bem = _createNamespace[1],
|
||||
t = _createNamespace[2];
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
title: String,
|
||||
value: [Number, String],
|
||||
fieldNames: Object,
|
||||
placeholder: String,
|
||||
activeColor: String,
|
||||
options: {
|
||||
type: Array,
|
||||
default: function _default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
tabs: [],
|
||||
activeTab: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
textKey: function textKey() {
|
||||
var _this$fieldNames;
|
||||
|
||||
return ((_this$fieldNames = this.fieldNames) == null ? void 0 : _this$fieldNames.text) || 'text';
|
||||
},
|
||||
valueKey: function valueKey() {
|
||||
var _this$fieldNames2;
|
||||
|
||||
return ((_this$fieldNames2 = this.fieldNames) == null ? void 0 : _this$fieldNames2.value) || 'value';
|
||||
},
|
||||
childrenKey: function childrenKey() {
|
||||
var _this$fieldNames3;
|
||||
|
||||
return ((_this$fieldNames3 = this.fieldNames) == null ? void 0 : _this$fieldNames3.children) || 'children';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
deep: true,
|
||||
handler: 'updateTabs'
|
||||
},
|
||||
value: function value(_value) {
|
||||
var _this = this;
|
||||
|
||||
if (_value || _value === 0) {
|
||||
var values = this.tabs.map(function (tab) {
|
||||
var _tab$selectedOption;
|
||||
|
||||
return (_tab$selectedOption = tab.selectedOption) == null ? void 0 : _tab$selectedOption[_this.valueKey];
|
||||
});
|
||||
|
||||
if (values.indexOf(_value) !== -1) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.updateTabs();
|
||||
}
|
||||
},
|
||||
created: function created() {
|
||||
this.updateTabs();
|
||||
},
|
||||
methods: {
|
||||
getSelectedOptionsByValue: function getSelectedOptionsByValue(options, value) {
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
var option = options[i];
|
||||
|
||||
if (option[this.valueKey] === value) {
|
||||
return [option];
|
||||
}
|
||||
|
||||
if (option[this.childrenKey]) {
|
||||
var selectedOptions = this.getSelectedOptionsByValue(option[this.childrenKey], value);
|
||||
|
||||
if (selectedOptions) {
|
||||
return [option].concat(selectedOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
updateTabs: function updateTabs() {
|
||||
var _this2 = this;
|
||||
|
||||
if (this.value || this.value === 0) {
|
||||
var selectedOptions = this.getSelectedOptionsByValue(this.options, this.value);
|
||||
|
||||
if (selectedOptions) {
|
||||
var optionsCursor = this.options;
|
||||
this.tabs = selectedOptions.map(function (option) {
|
||||
var tab = {
|
||||
options: optionsCursor,
|
||||
selectedOption: option
|
||||
};
|
||||
var next = optionsCursor.filter(function (item) {
|
||||
return item[_this2.valueKey] === option[_this2.valueKey];
|
||||
});
|
||||
|
||||
if (next.length) {
|
||||
optionsCursor = next[0][_this2.childrenKey];
|
||||
}
|
||||
|
||||
return tab;
|
||||
});
|
||||
|
||||
if (optionsCursor) {
|
||||
this.tabs.push({
|
||||
options: optionsCursor,
|
||||
selectedOption: null
|
||||
});
|
||||
}
|
||||
|
||||
this.$nextTick(function () {
|
||||
_this2.activeTab = _this2.tabs.length - 1;
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.tabs = [{
|
||||
options: this.options,
|
||||
selectedOption: null
|
||||
}];
|
||||
},
|
||||
onSelect: function onSelect(option, tabIndex) {
|
||||
var _this3 = this;
|
||||
|
||||
this.tabs[tabIndex].selectedOption = option;
|
||||
|
||||
if (this.tabs.length > tabIndex + 1) {
|
||||
this.tabs = this.tabs.slice(0, tabIndex + 1);
|
||||
}
|
||||
|
||||
if (option[this.childrenKey]) {
|
||||
var nextTab = {
|
||||
options: option[this.childrenKey],
|
||||
selectedOption: null
|
||||
};
|
||||
|
||||
if (this.tabs[tabIndex + 1]) {
|
||||
this.$set(this.tabs, tabIndex + 1, nextTab);
|
||||
} else {
|
||||
this.tabs.push(nextTab);
|
||||
}
|
||||
|
||||
this.$nextTick(function () {
|
||||
_this3.activeTab++;
|
||||
});
|
||||
}
|
||||
|
||||
var selectedOptions = this.tabs.map(function (tab) {
|
||||
return tab.selectedOption;
|
||||
}).filter(function (item) {
|
||||
return !!item;
|
||||
});
|
||||
var eventParams = {
|
||||
value: option[this.valueKey],
|
||||
tabIndex: tabIndex,
|
||||
selectedOptions: selectedOptions
|
||||
};
|
||||
this.$emit('input', option[this.valueKey]);
|
||||
this.$emit('change', eventParams);
|
||||
|
||||
if (!option[this.childrenKey]) {
|
||||
this.$emit('finish', eventParams);
|
||||
}
|
||||
},
|
||||
onClose: function onClose() {
|
||||
this.$emit('close');
|
||||
},
|
||||
renderHeader: function renderHeader() {
|
||||
var h = this.$createElement;
|
||||
|
||||
if (this.showHeader) {
|
||||
return h("div", {
|
||||
"class": bem('header')
|
||||
}, [h("h2", {
|
||||
"class": bem('title')
|
||||
}, [this.slots('title') || this.title]), this.closeable ? h(Icon, {
|
||||
"attrs": {
|
||||
"name": "cross"
|
||||
},
|
||||
"class": bem('close-icon'),
|
||||
"on": {
|
||||
"click": this.onClose
|
||||
}
|
||||
}) : null]);
|
||||
}
|
||||
},
|
||||
renderOptions: function renderOptions(options, selectedOption, tabIndex) {
|
||||
var _this4 = this;
|
||||
|
||||
var h = this.$createElement;
|
||||
|
||||
var renderOption = function renderOption(option) {
|
||||
var isSelected = selectedOption && option[_this4.valueKey] === selectedOption[_this4.valueKey];
|
||||
var Text = _this4.slots('option', {
|
||||
option: option,
|
||||
selected: isSelected
|
||||
}) || h("span", [option[_this4.textKey]]);
|
||||
return h("li", {
|
||||
"class": bem('option', {
|
||||
selected: isSelected
|
||||
}),
|
||||
"style": {
|
||||
color: isSelected ? _this4.activeColor : null
|
||||
},
|
||||
"on": {
|
||||
"click": function click() {
|
||||
_this4.onSelect(option, tabIndex);
|
||||
}
|
||||
}
|
||||
}, [Text, isSelected ? h(Icon, {
|
||||
"attrs": {
|
||||
"name": "success"
|
||||
},
|
||||
"class": bem('selected-icon')
|
||||
}) : null]);
|
||||
};
|
||||
|
||||
return h("ul", {
|
||||
"class": bem('options')
|
||||
}, [options.map(renderOption)]);
|
||||
},
|
||||
renderTab: function renderTab(item, tabIndex) {
|
||||
var h = this.$createElement;
|
||||
var options = item.options,
|
||||
selectedOption = item.selectedOption;
|
||||
var title = selectedOption ? selectedOption[this.textKey] : this.placeholder || t('select');
|
||||
return h(Tab, {
|
||||
"attrs": {
|
||||
"title": title,
|
||||
"titleClass": bem('tab', {
|
||||
unselected: !selectedOption
|
||||
})
|
||||
}
|
||||
}, [this.renderOptions(options, selectedOption, tabIndex)]);
|
||||
},
|
||||
renderTabs: function renderTabs() {
|
||||
var _this5 = this;
|
||||
|
||||
var h = this.$createElement;
|
||||
return h(Tabs, {
|
||||
"attrs": {
|
||||
"animated": true,
|
||||
"swipeable": true,
|
||||
"swipeThreshold": 0,
|
||||
"color": this.activeColor
|
||||
},
|
||||
"class": bem('tabs'),
|
||||
"model": {
|
||||
value: _this5.activeTab,
|
||||
callback: function callback($$v) {
|
||||
_this5.activeTab = $$v;
|
||||
}
|
||||
}
|
||||
}, [this.tabs.map(this.renderTab)]);
|
||||
}
|
||||
},
|
||||
render: function render() {
|
||||
var h = arguments[0];
|
||||
return h("div", {
|
||||
"class": bem()
|
||||
}, [this.renderHeader(), this.renderTabs()]);
|
||||
}
|
||||
});
|
82
node_modules/vant/es/cascader/index.less
generated
vendored
Normal file
82
node_modules/vant/es/cascader/index.less
generated
vendored
Normal file
@ -0,0 +1,82 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-cascader {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: @cascader-header-height;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: @cascader-title-font-size;
|
||||
line-height: @cascader-title-line-height;
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
color: @cascader-close-icon-color;
|
||||
font-size: @cascader-close-icon-size;
|
||||
|
||||
&:active {
|
||||
color: @cascader-close-icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
.van-tab {
|
||||
flex: none;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&.van-tabs--line .van-tabs__wrap {
|
||||
height: @cascader-tabs-height;
|
||||
}
|
||||
|
||||
.van-tabs__nav--complete {
|
||||
padding-right: 6px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__tab {
|
||||
color: @cascader-tab-color;
|
||||
font-weight: @font-weight-bold;
|
||||
|
||||
&--unselected {
|
||||
color: @cascader-unselected-tab-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px @padding-md;
|
||||
font-size: @font-size-md;
|
||||
line-height: @line-height-md;
|
||||
|
||||
&:active {
|
||||
background-color: @active-color;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
color: @cascader-active-color;
|
||||
font-weight: @font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
&__selected-icon {
|
||||
font-size: @cascader-selected-icon-size;
|
||||
}
|
||||
|
||||
&__options {
|
||||
box-sizing: border-box;
|
||||
height: @cascader-options-height;
|
||||
padding-top: 6px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
7
node_modules/vant/es/cascader/style/index.js
generated
vendored
Normal file
7
node_modules/vant/es/cascader/style/index.js
generated
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
import '../../style/base.css';
|
||||
import '../../info/index.css';
|
||||
import '../../icon/index.css';
|
||||
import '../../tab/index.css';
|
||||
import '../../sticky/index.css';
|
||||
import '../../tabs/index.css';
|
||||
import '../index.css';
|
7
node_modules/vant/es/cascader/style/less.js
generated
vendored
Normal file
7
node_modules/vant/es/cascader/style/less.js
generated
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
import '../../style/base.less';
|
||||
import '../../info/index.less';
|
||||
import '../../icon/index.less';
|
||||
import '../../tab/index.less';
|
||||
import '../../sticky/index.less';
|
||||
import '../../tabs/index.less';
|
||||
import '../index.less';
|
Reference in New Issue
Block a user