Demi
GitHub
commit
54dc6ac4e7
40 changed files with 1120 additions and 857 deletions
10
.github/ISSUE_TEMPLATE.md
vendored
10
.github/ISSUE_TEMPLATE.md
vendored
|
|
@ -1,18 +1,14 @@
|
|||
<!--
|
||||
注意：关于用法、咨询等问题，请到 iView Developer 提问：
|
||||
|
||||
https://dev.iviewui.com
|
||||
|
||||
<!--
|
||||
Bug 反馈、新功能请求，请到下面提交 issues：
|
||||
|
||||
https://www.iviewui.com/new-issue
|
||||
http://iview.talkingdata.com/#/new-issue
|
||||
|
||||
不是用上面的链接创建的 issue 会被立即关闭。
|
||||
-->
|
||||
<!--
|
||||
IMPORTANT: Please use the following link to create a new issue:
|
||||
|
||||
https://www.iviewui.com/new-issue
|
||||
http://iview.talkingdata.com/#/new-issue
|
||||
|
||||
If your issue was not created using the app above, it will be closed immediately.
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -130,11 +130,6 @@ If you want to contribute or have questions or bugs to report:
|
|||
- [iView-Area](https://github.com/iview/iview-area)
|
||||
- [iView-Editor](https://github.com/iview/iview-editor)
|
||||
|
||||
## Sponsors
|
||||
|
||||
|
||||
## Backers
|
||||
|
||||
|
||||
## License
|
||||
[MIT](http://opensource.org/licenses/MIT)
|
||||
|
|
|
|||
BIN
assets/pay.png
BIN
assets/pay.png
Binary file not shown.
|
Before Width: | Height: | Size: 158 KiB |
1048
dist/iview.js
vendored
1048
dist/iview.js
vendored
File diff suppressed because it is too large
Load diff
2
dist/iview.js.map
vendored
2
dist/iview.js.map
vendored
File diff suppressed because one or more lines are too long
4
dist/iview.min.js
vendored
4
dist/iview.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/iview.min.js.gz
vendored
BIN
dist/iview.min.js.gz
vendored
Binary file not shown.
2
dist/iview.min.js.map
vendored
2
dist/iview.min.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/styles/iview.css
vendored
2
dist/styles/iview.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,36 +1,47 @@
|
|||
<template>
|
||||
<div style="margin: 100px;width: 200px;">
|
||||
<AutoComplete placement="top" transfer v-model="value" icon="ios-search" :data="data" @on-search="handleSearch" @on-change="hc" :filter-method="fm">
|
||||
<AutoComplete
|
||||
placement="top"
|
||||
transfer
|
||||
v-model="value"
|
||||
icon="ios-search"
|
||||
:data="data"
|
||||
@on-search="onHandleSearch"
|
||||
@on-change="onChange"
|
||||
@on-select="onSelect"
|
||||
>
|
||||
<!--<Option v-for="item in data" :value="item" :label="item" :key="item">-->
|
||||
<!--<span style="color: red">{{ item }}</span>-->
|
||||
<!--<span style="color: red">{{ item }}</span>-->
|
||||
<!--</Option>-->
|
||||
</AutoComplete>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
||||
},
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
value: '',
|
||||
data: [],
|
||||
// data: ['Burns Bay Road', 'Downing Street', 'Wall Street']
|
||||
value: "",
|
||||
source: ["1", "2", "3", "11", "12", "13"],
|
||||
data: []
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
handleSearch (value) {
|
||||
this.data = !value ? [] : [
|
||||
value + '@qq.com',
|
||||
value + '@sina.com',
|
||||
value + '@163.com'
|
||||
]
|
||||
onHandleSearch (value) {
|
||||
let result = [];
|
||||
for (let val of this.source) {
|
||||
if (val.includes(value)) {
|
||||
result.push(val);
|
||||
}
|
||||
}
|
||||
this.data = result;
|
||||
},
|
||||
hc (v) {
|
||||
// console.log(v)
|
||||
onSelect (e) {
|
||||
console.log('onSelect', e);
|
||||
},
|
||||
onChange (v) {
|
||||
console.log("onChange", v);
|
||||
},
|
||||
fm (value, item) {
|
||||
return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<!--#6076-->
|
||||
<Carousel loop>
|
||||
<Carousel loop @on-change="onChange">
|
||||
<CarouselItem>
|
||||
<div class="demo-carousel">111111111111</div>
|
||||
</CarouselItem>
|
||||
|
|
@ -25,7 +25,9 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
onChange(oldIndex,newIndex){
|
||||
console.log(oldIndex,newIndex,'------')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
|
|
|
|||
|
|
@ -265,5 +265,5 @@
|
|||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -139,8 +139,9 @@
|
|||
<!--<br><br>-->
|
||||
<!--<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />-->
|
||||
<!--</div>-->
|
||||
<!--#6338-->
|
||||
<div style="width: 200px">
|
||||
<Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
|
||||
<Input search enter-button="搜索" clearable placeholder="Enter something..." />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -154,8 +155,8 @@
|
|||
select1: 'http',
|
||||
select2: 'com',
|
||||
select3: 'day',
|
||||
value7: ``
|
||||
}
|
||||
value7: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hs (val) {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,23 @@
|
|||
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<h2 style="margin-top:20px">#5327 feature</h2>
|
||||
<Select v-model='test' filterable clearable>
|
||||
<Option v-for='item in list' :value='item.value' :label="item.name" :key="item.value"></Option>
|
||||
<div slot="empty">2222</div>
|
||||
</Select>
|
||||
<h2 style="margin-top:20px">#5216</h2>
|
||||
<Select v-model="model11" filterable clearable>
|
||||
<OptionGroup label="分组">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</OptionGroup>
|
||||
</Select>
|
||||
<h2 style="margin-top:20px">Demo</h2>
|
||||
<Select v-model="model12">
|
||||
<OptionGroup label="分组">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</OptionGroup>
|
||||
</Select>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -44,8 +61,50 @@
|
|||
binterest: [
|
||||
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
test:'',
|
||||
list:[{
|
||||
name: '测试测试2',
|
||||
value:1
|
||||
},{
|
||||
name: 'dddddd',
|
||||
value:2
|
||||
},{
|
||||
name:'测试测试',
|
||||
value:8
|
||||
},{
|
||||
name: '\"年龄\"123',
|
||||
value:9
|
||||
}],
|
||||
cityList: [
|
||||
{
|
||||
value: 'New York',
|
||||
label: 'New York'
|
||||
},
|
||||
{
|
||||
value: 'London',
|
||||
label: 'London'
|
||||
},
|
||||
{
|
||||
value: 'Sydney',
|
||||
label: 'Sydney'
|
||||
},
|
||||
{
|
||||
value: 'Ottawa',
|
||||
label: 'Ottawa'
|
||||
},
|
||||
{
|
||||
value: 'Paris',
|
||||
label: 'Paris'
|
||||
},
|
||||
{
|
||||
value: 'Canberra',
|
||||
label: 'Canberra'
|
||||
}
|
||||
],
|
||||
model11: '',
|
||||
model12: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (name) {
|
||||
|
|
@ -55,11 +114,11 @@
|
|||
} else {
|
||||
this.$Message.error('Fail!');
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
handleReset (name) {
|
||||
this.$refs[name].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,103 +1,30 @@
|
|||
<template>
|
||||
<Form :model="formItem" :label-width="80">
|
||||
<FormItem label="Input">
|
||||
<Input v-model="formItem.input" placeholder="Enter something..."></Input>
|
||||
</FormItem>
|
||||
<FormItem label="Select">
|
||||
<Select v-model="formItem.select">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="DatePicker">
|
||||
<Row>
|
||||
<Col span="11">
|
||||
<DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
|
||||
</Col>
|
||||
<Col span="2" style="text-align: center">-</Col>
|
||||
<Col span="11">
|
||||
<TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem label="Radio">
|
||||
<RadioGroup v-model="formItem.radio">
|
||||
<Radio label="male">Male</Radio>
|
||||
<Radio label="female">Female</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Checkbox">
|
||||
<CheckboxGroup v-model="formItem.checkbox">
|
||||
<Checkbox label="Eat"></Checkbox>
|
||||
<Checkbox label="Sleep"></Checkbox>
|
||||
<Checkbox label="Run"></Checkbox>
|
||||
<Checkbox label="Movie"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Switch">
|
||||
<i-switch v-model="formItem.switch" size="large">
|
||||
<span slot="open">On</span>
|
||||
<span slot="close">Off</span>
|
||||
</i-switch>
|
||||
</FormItem>
|
||||
<FormItem label="Slider">
|
||||
<Slider v-model="formItem.slider" range></Slider>
|
||||
</FormItem>
|
||||
<FormItem label="Text">
|
||||
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary">Submit</Button>
|
||||
<Button type="default" ghost style="margin-left: 8px">Cancel</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div style="margin: 200px;">
|
||||
<Slider v-model="value5"></Slider>
|
||||
<Slider v-model="value6" :step="10" show-stops></Slider>
|
||||
<br><br>
|
||||
<Slider v-model="value7" range :marks="marks"></Slider>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formItem: {
|
||||
input: '',
|
||||
select: '',
|
||||
radio: 'male',
|
||||
checkbox: [],
|
||||
switch: true,
|
||||
date: '',
|
||||
time: '',
|
||||
slider: [20, 50],
|
||||
textarea: ''
|
||||
value5: 10,
|
||||
value6: 30,
|
||||
value7: [20, 100],
|
||||
marks: {
|
||||
0: '0°C',
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
100: {
|
||||
style: {
|
||||
color: '#1989FA'
|
||||
},
|
||||
label: this.$createElement('strong', '100%')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
|
||||
<!--<Modal v-model="modal1">-->
|
||||
<!--<Slider v-model="value2" range show-tip="always"></Slider>-->
|
||||
<!--</Modal>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--modal1: false,-->
|
||||
<!--value2: [20, 50],-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--ok () {-->
|
||||
<!--this.$Message.info('Clicked ok');-->
|
||||
<!--},-->
|
||||
<!--cancel () {-->
|
||||
<!--this.$Message.info('Clicked cancel');-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
</script>
|
||||
|
|
@ -1,90 +1,31 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-split">
|
||||
<Split v-model="split1">
|
||||
<div slot="left" class="demo-split-pane">
|
||||
左边面板
|
||||
</div>
|
||||
<div slot="right" class="demo-split-pane">
|
||||
右边面板
|
||||
</div>
|
||||
</Split>
|
||||
</div>
|
||||
<div class="demo-split">
|
||||
<Split v-model="split1" mode="vertical">
|
||||
<div slot="left" class="demo-split-pane">
|
||||
左边面板
|
||||
</div>
|
||||
<div slot="right" class="demo-split-pane">
|
||||
右边面板
|
||||
</div>
|
||||
</Split>
|
||||
</div>
|
||||
<div class="demo-split">
|
||||
<Split v-model="split1" v-bind:min="min1">
|
||||
<div slot="left" class="demo-split-pane">
|
||||
Left Pane
|
||||
</div>
|
||||
<div slot="right" class="demo-split-pane">
|
||||
Right Pane
|
||||
</div>
|
||||
</Split>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'split_pane_page',
|
||||
data () {
|
||||
return {
|
||||
offset: 0.6,
|
||||
offsetVertical: '250px',
|
||||
split1: 0.5
|
||||
split1: 0.6,
|
||||
min1: '400px'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMoving (e) {
|
||||
console.log(e.atMin, e.atMax)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.center-middle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.split-pane-page-wrapper {
|
||||
height: 600px;
|
||||
.pane {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.left-pane {
|
||||
background: sandybrown;
|
||||
}
|
||||
&.right-pane {
|
||||
background: palevioletred;
|
||||
}
|
||||
&.top-pane {
|
||||
background: sandybrown;
|
||||
}
|
||||
&.bottom-pane {
|
||||
background: palevioletred;
|
||||
}
|
||||
}
|
||||
.custom-trigger {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
.center-middle;
|
||||
box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
|
||||
cursor: row-resize;
|
||||
i.trigger-icon {
|
||||
.center-middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.demo-split{
|
||||
height: 300px;
|
||||
border: 1px solid #dddee1;
|
||||
height: 200px;
|
||||
border: 1px solid #dcdee2;
|
||||
}
|
||||
</style>
|
||||
.demo-split-pane{
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<style>
|
||||
.ivu-steps{
|
||||
background: greenyellow;
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,55 @@
|
|||
<template>
|
||||
<Tree :data="data3" :load-data="loadData" show-checkbox></Tree>
|
||||
<div>
|
||||
<Tree ref="treeRef" :data="data4" show-checkbox multiple></Tree>
|
||||
<Button @click="get">
|
||||
get
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
//验证bug #6139
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data3: [
|
||||
data4: [
|
||||
{
|
||||
title: 'parent',
|
||||
loading: false,
|
||||
children: []
|
||||
title: 'parent 1',
|
||||
expand: true,
|
||||
children: [
|
||||
{
|
||||
title: 'parent 1-1',
|
||||
expand: true,
|
||||
children: [
|
||||
{
|
||||
title: 'leaf 1-1-1',
|
||||
checked : false,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'leaf 1-1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'parent 1-2',
|
||||
expand: true,
|
||||
children: [
|
||||
{
|
||||
title: 'leaf 1-2-1',
|
||||
},
|
||||
{
|
||||
title: 'leaf 1-2-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData (item, callback) {
|
||||
setTimeout(() => {
|
||||
const isSet = Math.ceil(Math.random()*10)%2;
|
||||
let data = [];
|
||||
if( isSet ){
|
||||
data = [
|
||||
{
|
||||
title: 'children-1',
|
||||
loading: false,
|
||||
children: []
|
||||
}
|
||||
];
|
||||
}
|
||||
callback(data);
|
||||
}, 1000);
|
||||
get(){
|
||||
console.log(this.$refs.treeRef.getCheckedNodes())
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--<template>-->
|
||||
<!-- <Tree :data="data2" check-directly show-checkbox></Tree>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!-- export default {-->
|
||||
<!-- data () {-->
|
||||
<!-- return {-->
|
||||
<!-- data2: [-->
|
||||
<!-- {-->
|
||||
<!-- title: 'parent 1',-->
|
||||
<!-- expand: true,-->
|
||||
<!-- children: [-->
|
||||
<!-- {-->
|
||||
<!-- title: 'parent 1-1',-->
|
||||
<!-- expand: true,-->
|
||||
<!-- children: [-->
|
||||
<!-- {-->
|
||||
<!-- title: 'leaf 1-1-1'-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- title: 'leaf 1-1-2'-->
|
||||
<!-- }-->
|
||||
<!-- ]-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- title: 'parent 1-2',-->
|
||||
<!-- expand: true,-->
|
||||
<!-- children: [-->
|
||||
<!-- {-->
|
||||
<!-- title: 'leaf 1-2-1'-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- title: 'leaf 1-2-1'-->
|
||||
<!-- }-->
|
||||
<!-- ]-->
|
||||
<!-- }-->
|
||||
<!-- ]-->
|
||||
<!-- }-->
|
||||
<!-- ]-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--</script>-->
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "3.5.1",
|
||||
"version": "3.5.4",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
"homepage": "http://iview.talkingdata.com",
|
||||
"keywords": [
|
||||
"iview",
|
||||
"vue",
|
||||
|
|
|
|||
|
|
@ -48,6 +48,10 @@
|
|||
},
|
||||
offsetBottom: {
|
||||
type: Number
|
||||
},
|
||||
useCapture: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -78,8 +82,8 @@
|
|||
mounted () {
|
||||
// window.addEventListener('scroll', this.handleScroll, false);
|
||||
// window.addEventListener('resize', this.handleScroll, false);
|
||||
on(window, 'scroll', this.handleScroll);
|
||||
on(window, 'resize', this.handleScroll);
|
||||
on(window, 'scroll', this.handleScroll, this.useCapture);
|
||||
on(window, 'resize', this.handleScroll, this.useCapture);
|
||||
this.$nextTick(() => {
|
||||
this.handleScroll();
|
||||
});
|
||||
|
|
@ -87,8 +91,8 @@
|
|||
beforeDestroy () {
|
||||
// window.removeEventListener('scroll', this.handleScroll, false);
|
||||
// window.removeEventListener('resize', this.handleScroll, false);
|
||||
off(window, 'scroll', this.handleScroll);
|
||||
off(window, 'resize', this.handleScroll);
|
||||
off(window, 'scroll', this.handleScroll, this.useCapture);
|
||||
off(window, 'resize', this.handleScroll, this.useCapture);
|
||||
},
|
||||
methods: {
|
||||
handleScroll () {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
remote
|
||||
auto-complete
|
||||
:remote-method="remoteMethod"
|
||||
@on-change="handleChange"
|
||||
@on-select="handleSelect"
|
||||
@on-clickoutside="handleClickOutside"
|
||||
:transfer="transfer">
|
||||
<slot name="input">
|
||||
|
|
@ -87,8 +87,8 @@
|
|||
default: false
|
||||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'bottom']);
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'bottom', 'top-start', 'bottom-start', 'top-end', 'bottom-end']);
|
||||
},
|
||||
default: 'bottom'
|
||||
},
|
||||
|
|
@ -152,9 +152,10 @@
|
|||
remoteMethod (query) {
|
||||
this.$emit('on-search', query);
|
||||
},
|
||||
handleChange (val) {
|
||||
handleSelect (val) {
|
||||
if (val === undefined || val === null) return;
|
||||
this.currentValue = val;
|
||||
|
||||
this.$refs.input.blur();
|
||||
this.$emit('on-select', val);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -272,8 +272,10 @@
|
|||
},
|
||||
dotsEvent (event, n) {
|
||||
let curIndex = this.showCopyTrack ? this.copyTrackIndex : this.trackIndex;
|
||||
const oldCurrentIndex = this.currentIndex;
|
||||
if (event === this.trigger && curIndex !== n) {
|
||||
this.updateTrackIndex(n);
|
||||
this.$emit('on-change', oldCurrentIndex, this.currentIndex);
|
||||
this.$emit('input', n);
|
||||
// Reset autoplay timer when trigger be activated
|
||||
this.setAutoplay();
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
[selectPrefixCls + '-item-disabled']: item.disabled
|
||||
}]"
|
||||
v-for="(item, index) in querySelections"
|
||||
:key="index"
|
||||
@click="handleSelectItem(index)" v-html="item.display"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,18 @@
|
|||
:prefix-cls="prefixCls"
|
||||
:data="item"
|
||||
:tmp-item="tmpItem"
|
||||
@click.native.stop="handleClickItem(item)"
|
||||
@mouseenter.native.stop="handleHoverItem(item)"></Casitem>
|
||||
</ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
|
||||
@click.native.stop="handleClickItem(item, $event)"
|
||||
@mouseenter.native.stop="handleHoverItem(item)"
|
||||
></Casitem>
|
||||
</ul>
|
||||
<Caspanel
|
||||
v-if="sublist && sublist.length"
|
||||
:prefix-cls="prefixCls"
|
||||
:data="sublist"
|
||||
:disabled="disabled"
|
||||
:trigger="trigger"
|
||||
:change-on-select="changeOnSelect">
|
||||
</Caspanel>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -48,16 +57,25 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickItem (item) {
|
||||
isIcon(node){
|
||||
let nodeName = (node.nodeName || "").toLocaleUpperCase();
|
||||
let isIvu = node.classList.contains("ivu-icon");
|
||||
if(nodeName == "I" && isIvu){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
handleClickItem (item, ev) {
|
||||
let isIcon = this.isIcon(ev.target);
|
||||
if (this.trigger !== 'click' && item.children && item.children.length) return; // #1922
|
||||
this.handleTriggerItem(item, false, true);
|
||||
this.handleTriggerItem(item, false, true,isIcon);
|
||||
},
|
||||
handleHoverItem (item) {
|
||||
if (this.trigger !== 'hover' || !item.children || !item.children.length) return; // #1922
|
||||
this.handleTriggerItem(item, false, true);
|
||||
this.handleTriggerItem(item, false, true,false);
|
||||
},
|
||||
//#6158 -- default fromInit = false to fromInit = true;
|
||||
handleTriggerItem (item, fromInit = true, fromUser = false) {
|
||||
handleTriggerItem (item, fromInit = true, fromUser = false,isIcon=false) {
|
||||
if (item.disabled) return;
|
||||
|
||||
const cascader = findComponentUpward(this, 'Cascader');
|
||||
|
|
@ -90,7 +108,7 @@
|
|||
|
||||
if (item.children && item.children.length){
|
||||
this.sublist = item.children;
|
||||
this.dispatch('Cascader', 'on-result-change', {
|
||||
!isIcon && this.dispatch('Cascader', 'on-result-change', {
|
||||
lastValue: false,
|
||||
changeOnSelect: this.changeOnSelect,
|
||||
fromInit: fromInit
|
||||
|
|
@ -105,7 +123,7 @@
|
|||
}
|
||||
} else {
|
||||
this.sublist = [];
|
||||
this.dispatch('Cascader', 'on-result-change', {
|
||||
!isIcon && this.dispatch('Cascader', 'on-result-change', {
|
||||
lastValue: true,
|
||||
changeOnSelect: this.changeOnSelect,
|
||||
fromInit: fromInit
|
||||
|
|
|
|||
|
|
@ -75,8 +75,10 @@
|
|||
|
||||
return this.calendar(tableYear, tableMonth, (cell) => {
|
||||
// normalize date offset from the dates provided by jsCalendar
|
||||
// Comment out this code to fix daylight saving time bug
|
||||
// if (cell.date instanceof Date) cell.date.setTime(cell.date.getTime() + cell.date.getTimezoneOffset() * 60000);
|
||||
// Comment out this code to fix daylight saving time bug
|
||||
// https://www.cnblogs.com/hamsterPP/p/5415472.html
|
||||
if (cell.date instanceof Date) cell.date.setTime(cell.date.getTime() + cell.date.getTimezoneOffset() * 60000 + 480 * 60 * 1000);
|
||||
//if (cell.date instanceof Date) cell.date.setTime(clearHours(cell.date));
|
||||
|
||||
const time = cell.date && clearHours(cell.date);
|
||||
const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth();
|
||||
|
|
|
|||
|
|
@ -296,7 +296,11 @@
|
|||
},
|
||||
changePanelDate(panel, type, increment, updateOtherPanel = true){
|
||||
const current = new Date(this[`${panel}PanelDate`]);
|
||||
current[`set${type}`](current[`get${type}`]() + increment);
|
||||
if (panel === 'left') {
|
||||
current[`set${type}`](current[`get${type}`](), 0);
|
||||
} else {
|
||||
current[`set${type}`](current[`get${type}`]() + increment);
|
||||
}
|
||||
this[`${panel}PanelDate`] = current;
|
||||
|
||||
if (!updateOtherPanel) return;
|
||||
|
|
|
|||
|
|
@ -178,33 +178,35 @@
|
|||
return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
|
||||
},
|
||||
validate(trigger, callback = function () {}) {
|
||||
let rules = this.getFilteredRule(trigger);
|
||||
if (!rules || rules.length === 0) {
|
||||
if (!this.required) {
|
||||
callback();
|
||||
return true;
|
||||
}else {
|
||||
rules = [{required: true}];
|
||||
this.$nextTick(() => {
|
||||
let rules = this.getFilteredRule(trigger);
|
||||
if (!rules || rules.length === 0) {
|
||||
if (!this.required) {
|
||||
callback();
|
||||
return true;
|
||||
}else {
|
||||
rules = [{required: true}];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.validateState = 'validating';
|
||||
this.validateState = 'validating';
|
||||
|
||||
let descriptor = {};
|
||||
descriptor[this.prop] = rules;
|
||||
let descriptor = {};
|
||||
descriptor[this.prop] = rules;
|
||||
|
||||
const validator = new AsyncValidator(descriptor);
|
||||
let model = {};
|
||||
const validator = new AsyncValidator(descriptor);
|
||||
let model = {};
|
||||
|
||||
model[this.prop] = this.fieldValue;
|
||||
model[this.prop] = this.fieldValue;
|
||||
|
||||
validator.validate(model, { firstFields: true }, errors => {
|
||||
this.validateState = !errors ? 'success' : 'error';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
validator.validate(model, { firstFields: true }, errors => {
|
||||
this.validateState = !errors ? 'success' : 'error';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
|
||||
callback(this.validateMessage);
|
||||
callback(this.validateMessage);
|
||||
});
|
||||
this.validateDisabled = false;
|
||||
});
|
||||
this.validateDisabled = false;
|
||||
},
|
||||
resetField () {
|
||||
this.validateState = '';
|
||||
|
|
|
|||
|
|
@ -2,39 +2,41 @@
|
|||
<div :class="wrapClasses">
|
||||
<template v-if="type !== 'textarea'">
|
||||
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
|
||||
<i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !disabled" @click="handleClear"></i>
|
||||
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
|
||||
<i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
|
||||
<span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
|
||||
<transition name="fade">
|
||||
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
|
||||
</transition>
|
||||
<input
|
||||
:id="elementId"
|
||||
:autocomplete="autocomplete"
|
||||
:spellcheck="spellcheck"
|
||||
ref="input"
|
||||
:type="type"
|
||||
:class="inputClasses"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:maxlength="maxlength"
|
||||
:readonly="readonly"
|
||||
:name="name"
|
||||
:value="currentValue"
|
||||
:number="number"
|
||||
:autofocus="autofocus"
|
||||
@keyup.enter="handleEnter"
|
||||
@keyup="handleKeyup"
|
||||
@keypress="handleKeypress"
|
||||
@keydown="handleKeydown"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@compositionstart="handleComposition"
|
||||
@compositionupdate="handleComposition"
|
||||
@compositionend="handleComposition"
|
||||
@input="handleInput"
|
||||
@change="handleChange">
|
||||
<div :class="[prefixCls + '-inner-container']">
|
||||
<i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !disabled" @click="handleClear"></i>
|
||||
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
|
||||
<i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
|
||||
<span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
|
||||
<transition name="fade">
|
||||
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
|
||||
</transition>
|
||||
<input
|
||||
:id="elementId"
|
||||
:autocomplete="autocomplete"
|
||||
:spellcheck="spellcheck"
|
||||
ref="input"
|
||||
:type="type"
|
||||
:class="inputClasses"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:maxlength="maxlength"
|
||||
:readonly="readonly"
|
||||
:name="name"
|
||||
:value="currentValue"
|
||||
:number="number"
|
||||
:autofocus="autofocus"
|
||||
@keyup.enter="handleEnter"
|
||||
@keyup="handleKeyup"
|
||||
@keypress="handleKeypress"
|
||||
@keydown="handleKeydown"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@compositionstart="handleComposition"
|
||||
@compositionupdate="handleComposition"
|
||||
@compositionend="handleComposition"
|
||||
@input="handleInput"
|
||||
@change="handleChange">
|
||||
</div>
|
||||
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
|
||||
<div :class="[prefixCls + '-group-append', prefixCls + '-search']" v-else-if="search && enterButton" @click="handleSearch">
|
||||
<i class="ivu-icon ivu-icon-ios-search" v-if="enterButton === true"></i>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,9 @@
|
|||
:transfer="transfer"
|
||||
v-transfer-dom
|
||||
>
|
||||
<ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
|
||||
<ul v-show="showNotFoundLabel && !$slots.empty" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
|
||||
<!--feature #5327-->
|
||||
<ul v-if="showNotFoundLabel && $slots.empty" :class="[prefixCls + '-not-found']" @mousedown.prevent><li><slot name="empty"></slot></li></ul>
|
||||
<ul :class="prefixCls + '-dropdown-list'">
|
||||
<functional-options
|
||||
v-if="(!remote) || (remote && !loading)"
|
||||
|
|
@ -286,6 +288,8 @@
|
|||
hasExpectedValue: false,
|
||||
preventRemoteCall: false,
|
||||
filterQueryChange: false, // #4273
|
||||
// #6349
|
||||
hideMenuTimer: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -410,9 +414,8 @@
|
|||
const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option;
|
||||
if (!optionPassesFilter) continue;
|
||||
}
|
||||
|
||||
optionCounter = optionCounter + 1;
|
||||
selectOptions.push(this.processOption(option, selectedValues, optionCounter === currentIndex));
|
||||
selectOptions.push(this.processOption(option, selectedValues, currentIndex === optionCounter));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -442,9 +445,9 @@
|
|||
}
|
||||
},
|
||||
clearSingleSelect(){ // PUBLIC API
|
||||
this.$emit('on-clear');
|
||||
this.hideMenu();
|
||||
if (this.clearable) this.reset();
|
||||
this.$emit('on-clear'); // #6331
|
||||
},
|
||||
getOptionData(value){
|
||||
const option = this.flatOptions.find(({componentOptions}) => componentOptions.propsData.value === value);
|
||||
|
|
@ -472,7 +475,6 @@
|
|||
const optionValue = option.componentOptions.propsData.value;
|
||||
const disabled = option.componentOptions.propsData.disabled;
|
||||
const isSelected = values.includes(optionValue);
|
||||
|
||||
const propsData = {
|
||||
...option.componentOptions.propsData,
|
||||
selected: isSelected,
|
||||
|
|
@ -490,15 +492,18 @@
|
|||
},
|
||||
|
||||
validateOption({children, elm, propsData}){
|
||||
const value = propsData.value;
|
||||
const label = propsData.label || '';
|
||||
const textContent = (elm && elm.textContent) || (children || []).reduce((str, node) => {
|
||||
const nodeText = node.elm ? node.elm.textContent : node.text;
|
||||
return `${str} ${nodeText}`;
|
||||
}, '') || '';
|
||||
const stringValues = JSON.stringify([value, label, textContent]);
|
||||
const stringValues = [label, textContent];
|
||||
const query = this.query.toLowerCase().trim();
|
||||
return stringValues.toLowerCase().includes(query);
|
||||
const findValuesIndex = stringValues.findIndex(item=>{
|
||||
let itemToLowerCase = item.toLowerCase();
|
||||
return itemToLowerCase.includes(query);
|
||||
});
|
||||
return findValuesIndex === -1 ? false : true;
|
||||
},
|
||||
|
||||
toggleMenu (e, force) {
|
||||
|
|
@ -512,9 +517,22 @@
|
|||
this.broadcast('Drop', 'on-update-popper');
|
||||
}
|
||||
},
|
||||
updateFocusIndex(){
|
||||
this.focusIndex = this.flatOptions.findIndex((opt) => {
|
||||
if (!opt || !opt.componentOptions) return false;
|
||||
return opt.componentOptions.propsData.value === this.publicValue;
|
||||
});
|
||||
},
|
||||
hideMenu () {
|
||||
this.toggleMenu(null, false);
|
||||
setTimeout(() => this.unchangedQuery = true, ANIMATION_TIMEOUT);
|
||||
setTimeout(() =>{
|
||||
this.unchangedQuery = true;
|
||||
// resolve if we use filterable, dropItem not selected #6349
|
||||
this.hideMenuTimer = setTimeout(()=>{
|
||||
this.updateFocusIndex();
|
||||
this.hideMenuTimer = null;
|
||||
});
|
||||
}, ANIMATION_TIMEOUT);
|
||||
},
|
||||
onClickOutside(event){
|
||||
if (this.visible) {
|
||||
|
|
@ -632,7 +650,6 @@
|
|||
},
|
||||
onOptionClick(option) {
|
||||
if (this.multiple){
|
||||
|
||||
// keep the query for remote select
|
||||
if (this.remote) this.lastRemoteQuery = this.lastRemoteQuery || this.query;
|
||||
else this.lastRemoteQuery = '';
|
||||
|
|
@ -643,25 +660,19 @@
|
|||
} else {
|
||||
this.values = this.values.concat(option);
|
||||
}
|
||||
|
||||
this.isFocused = true; // so we put back focus after clicking with mouse on option elements
|
||||
} else {
|
||||
this.query = String(option.label).trim();
|
||||
this.query = '';
|
||||
this.values = [option];
|
||||
this.lastRemoteQuery = '';
|
||||
this.hideMenu();
|
||||
}
|
||||
|
||||
this.focusIndex = this.flatOptions.findIndex((opt) => {
|
||||
if (!opt || !opt.componentOptions) return false;
|
||||
return opt.componentOptions.propsData.value === option.value;
|
||||
});
|
||||
|
||||
if (this.filterable){
|
||||
const inputField = this.$el.querySelector('input[type="text"]');
|
||||
if (!this.autoComplete) this.$nextTick(() => inputField.focus());
|
||||
}
|
||||
this.broadcast('Drop', 'on-update-popper');
|
||||
this.$emit('on-select', this.publicValue); // # 4441
|
||||
setTimeout(() => {
|
||||
this.filterQueryChange = false;
|
||||
}, ANIMATION_TIMEOUT);
|
||||
|
|
@ -685,6 +696,9 @@
|
|||
this.query = query;
|
||||
this.unchangedQuery = this.visible;
|
||||
this.filterQueryChange = true;
|
||||
if(this.filterable){
|
||||
this.updateFocusIndex();
|
||||
}
|
||||
},
|
||||
toggleHeaderFocus({type}){
|
||||
if (this.disabled) {
|
||||
|
|
@ -704,13 +718,13 @@
|
|||
watch: {
|
||||
value(value){
|
||||
const {getInitialValue, getOptionData, publicValue, values} = this;
|
||||
|
||||
this.checkUpdateStatus();
|
||||
|
||||
const vModelValue = (publicValue && this.labelInValue) ?
|
||||
(this.multiple ? publicValue.map(({value}) => value) : publicValue.value) : publicValue;
|
||||
if (value === '') this.values = [];
|
||||
else if (checkValuesNotEqual(value,publicValue,values)) {
|
||||
else if (checkValuesNotEqual(value,vModelValue,values)) {
|
||||
this.$nextTick(() => this.values = getInitialValue().map(getOptionData).filter(Boolean));
|
||||
!(Array.isArray(value)) && this.dispatch('FormItem', 'on-form-change', this.publicValue);
|
||||
if (!this.multiple) this.dispatch('FormItem', 'on-form-change', this.publicValue);
|
||||
}
|
||||
},
|
||||
values(now, before){
|
||||
|
|
@ -772,14 +786,15 @@
|
|||
const optionInstance = findChild(this, ({$options}) => {
|
||||
return $options.componentName === 'select-item' && $options.propsData.value === optionValue;
|
||||
});
|
||||
|
||||
let bottomOverflowDistance = optionInstance.$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
|
||||
let topOverflowDistance = optionInstance.$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;
|
||||
if (bottomOverflowDistance > 0) {
|
||||
this.$refs.dropdown.$el.scrollTop += bottomOverflowDistance;
|
||||
}
|
||||
if (topOverflowDistance < 0) {
|
||||
this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
|
||||
if(optionInstance && optionInstance.$el ){
|
||||
let bottomOverflowDistance = optionInstance.$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
|
||||
let topOverflowDistance = optionInstance.$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;
|
||||
if (bottomOverflowDistance > 0) {
|
||||
this.$refs.dropdown.$el.scrollTop += bottomOverflowDistance;
|
||||
}
|
||||
if (topOverflowDistance < 0) {
|
||||
this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
|
||||
}
|
||||
}
|
||||
},
|
||||
dropVisible(open){
|
||||
|
|
|
|||
16
src/components/slider/marker.js
Normal file
16
src/components/slider/marker.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export default {
|
||||
name: 'SliderMarker',
|
||||
props: {
|
||||
mark: {
|
||||
type: [String, Object]
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
let label = typeof this.mark === 'string' ? this.mark : [this.mark.label];
|
||||
|
||||
return h('div', {
|
||||
class: 'ivu-slider-marks-item',
|
||||
style: this.mark.style || {}
|
||||
}, label);
|
||||
}
|
||||
};
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
:max="max"
|
||||
:step="step"
|
||||
:value="exportValue[0]"
|
||||
:disabled="disabled"
|
||||
:disabled="itemDisabled"
|
||||
:active-change="activeChange"
|
||||
@on-change="handleInputChange"></Input-number>
|
||||
<div
|
||||
|
|
@ -15,18 +15,37 @@
|
|||
ref="slider" @click.self="sliderClick"
|
||||
>
|
||||
<input type="hidden" :name="name" :value="exportValue">
|
||||
<template v-if="showStops">
|
||||
<div
|
||||
:class="[prefixCls + '-stop']"
|
||||
v-for="item in stops"
|
||||
:style="{ 'left': item + '%' }"
|
||||
@click.self="sliderClick"
|
||||
></div>
|
||||
</template>
|
||||
<div
|
||||
:class="[prefixCls + '-bar']"
|
||||
:style="barStyle"
|
||||
@click.self="sliderClick"></div>
|
||||
<template v-if="showStops">
|
||||
<div
|
||||
:class="[prefixCls + '-stop']"
|
||||
v-for="(item,index) in stops"
|
||||
:key="index"
|
||||
:style="{ 'left': item + '%' }"
|
||||
@click.self="sliderClick"
|
||||
></div>
|
||||
</template>
|
||||
<template v-if="markList.length > 0">
|
||||
<div
|
||||
v-for="(item, key) in markList"
|
||||
:key="key"
|
||||
:class="[prefixCls + '-stop']"
|
||||
:style="{ 'left': item.position + '%' }"
|
||||
@click.self="sliderClick"
|
||||
></div>
|
||||
<div class="ivu-slider-marks">
|
||||
<SliderMarker
|
||||
v-for="(item, key) in markList"
|
||||
:key="key"
|
||||
:mark="item.mark"
|
||||
:style="{ 'left': item.position + '%' }"
|
||||
@click.native="sliderClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
:class="[prefixCls + '-button-wrap']"
|
||||
:style="{left: minPosition + '%'}"
|
||||
|
|
@ -83,17 +102,19 @@
|
|||
<script>
|
||||
import InputNumber from '../../components/input-number/input-number.vue';
|
||||
import Tooltip from '../../components/tooltip/tooltip.vue';
|
||||
import SliderMarker from './marker';
|
||||
import { getStyle, oneOf } from '../../utils/assist';
|
||||
import { on, off } from '../../utils/dom';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
import mixinsForm from '../../mixins/form';
|
||||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
|
||||
const prefixCls = 'ivu-slider';
|
||||
|
||||
export default {
|
||||
name: 'Slider',
|
||||
mixins: [ Emitter ],
|
||||
components: { InputNumber, Tooltip },
|
||||
mixins: [ Emitter, mixinsForm ],
|
||||
components: { InputNumber, Tooltip, SliderMarker },
|
||||
props: {
|
||||
min: {
|
||||
type: Number,
|
||||
|
|
@ -154,6 +175,10 @@
|
|||
activeChange: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 3.5.4
|
||||
marks: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -200,7 +225,7 @@
|
|||
{
|
||||
[`${prefixCls}-input`]: this.showInput && !this.range,
|
||||
[`${prefixCls}-range`]: this.range,
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
[`${prefixCls}-disabled`]: this.itemDisabled
|
||||
}
|
||||
];
|
||||
},
|
||||
|
|
@ -254,6 +279,19 @@
|
|||
}
|
||||
return result;
|
||||
},
|
||||
markList() {
|
||||
if (!this.marks) return [];
|
||||
|
||||
const marksKeys = Object.keys(this.marks);
|
||||
return marksKeys.map(parseFloat)
|
||||
.sort((a, b) => a - b)
|
||||
.filter(point => point <= this.max && point >= this.min)
|
||||
.map(point => ({
|
||||
point,
|
||||
position: (point - this.min) * 100 / (this.max - this.min),
|
||||
mark: this.marks[point]
|
||||
}));
|
||||
},
|
||||
tipDisabled () {
|
||||
return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never';
|
||||
},
|
||||
|
|
@ -280,7 +318,7 @@
|
|||
return [min, max];
|
||||
},
|
||||
getCurrentValue (event, type) {
|
||||
if (this.disabled) {
|
||||
if (this.itemDisabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -304,7 +342,7 @@
|
|||
}
|
||||
},
|
||||
onPointerDown (event, type) {
|
||||
if (this.disabled) return;
|
||||
if (this.itemDisabled) return;
|
||||
event.preventDefault();
|
||||
this.pointerDown = type;
|
||||
|
||||
|
|
@ -386,7 +424,7 @@
|
|||
},
|
||||
|
||||
sliderClick (event) {
|
||||
if (this.disabled) return;
|
||||
if (this.itemDisabled) return;
|
||||
const currentX = this.getPointerX(event);
|
||||
const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
|
||||
let newPos = ((currentX - sliderOffsetLeft) / this.sliderWidth * this.valueRange) + this.min;
|
||||
|
|
@ -437,4 +475,4 @@
|
|||
this.observer.removeListener(this.$refs.slider, this.handleSetSliderWidth);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
|
@ -69,7 +69,10 @@
|
|||
prefix: 'ivu-split',
|
||||
offset: 0,
|
||||
oldOffset: 0,
|
||||
isMoving: false
|
||||
isMoving: false,
|
||||
computedMin: 0,
|
||||
computedMax: 0,
|
||||
currentValue: 0.5
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -98,12 +101,6 @@
|
|||
},
|
||||
offsetSize () {
|
||||
return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
|
||||
},
|
||||
computedMin () {
|
||||
return this.getComputedThresholdValue('min');
|
||||
},
|
||||
computedMax () {
|
||||
return this.getComputedThresholdValue('max');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -157,22 +154,35 @@
|
|||
this.$emit('on-move-start');
|
||||
},
|
||||
computeOffset(){
|
||||
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
|
||||
this.$nextTick(() => {
|
||||
this.computedMin = this.getComputedThresholdValue('min');
|
||||
this.computedMax = this.getComputedThresholdValue('max');
|
||||
let value = this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value;
|
||||
let anotherValue = this.getAnotherOffset(value);
|
||||
if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
|
||||
if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
|
||||
this.offset = value * 10000 / 100;
|
||||
this.currentValue = value;
|
||||
this.$emit('input', value);
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value () {
|
||||
this.computeOffset();
|
||||
value (val) {
|
||||
if (val !== this.currentValue) {
|
||||
this.currentValue = val;
|
||||
this.computeOffset();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.computeOffset();
|
||||
});
|
||||
|
||||
window.addEventListener('resize', ()=>{
|
||||
this.computeOffset();
|
||||
});
|
||||
on(window, 'resize', this.computeOffset);
|
||||
},
|
||||
beforeDestroy () {
|
||||
off(window, 'resize', this.computeOffset);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -100,6 +100,13 @@
|
|||
name: {
|
||||
type: String
|
||||
},
|
||||
custContentClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
custContentStyle: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -133,7 +140,8 @@
|
|||
`${prefixCls}-content`,
|
||||
{
|
||||
[`${prefixCls}-content-animated`]: this.animated
|
||||
}
|
||||
},
|
||||
this.custContentClass
|
||||
];
|
||||
},
|
||||
barClasses () {
|
||||
|
|
@ -154,6 +162,12 @@
|
|||
transform: `translateX(${p}) translateZ(0px)`
|
||||
};
|
||||
}
|
||||
const { custContentStyle } = this;
|
||||
if (custContentStyle) {
|
||||
for (const key in custContentStyle){
|
||||
style[key] = custContentStyle[key];
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
barStyle () {
|
||||
|
|
|
|||
|
|
@ -121,9 +121,9 @@
|
|||
const node = this.flatState[nodeKey].node;
|
||||
const parent = this.flatState[parentKey].node;
|
||||
if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards
|
||||
|
||||
if (node.checked == true) {
|
||||
this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked));
|
||||
// #6121
|
||||
this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked || node.disabled !== undefined ));
|
||||
this.$set(parent, 'indeterminate', !parent.checked);
|
||||
} else {
|
||||
this.$set(parent, 'checked', false);
|
||||
|
|
@ -160,10 +160,16 @@
|
|||
},
|
||||
updateTreeDown(node, changes = {}) {
|
||||
if (this.checkStrictly) return;
|
||||
|
||||
for (let key in changes) {
|
||||
this.$set(node, key, changes[key]);
|
||||
// after #6121
|
||||
if( key === 'checked' && node.disabled ){
|
||||
this.$set(node, key, node.checked);
|
||||
}else{
|
||||
this.$set(node, key, changes[key]);
|
||||
}
|
||||
// before -- this.$set(node, key, changes[key]);
|
||||
}
|
||||
|
||||
if (node[this.childrenKey]) {
|
||||
node[this.childrenKey].forEach(child => {
|
||||
this.updateTreeDown(child, changes);
|
||||
|
|
|
|||
14
src/mixins/form.js
Normal file
14
src/mixins/form.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
export default {
|
||||
inject: {
|
||||
FormInstance: {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
itemDisabled () {
|
||||
let state = this.disabled;
|
||||
if (!state && this.FormInstance) state = this.FormInstance.disabled;
|
||||
return state;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -68,6 +68,19 @@
|
|||
background-color: @slider-disabled-color;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&-marks{
|
||||
top: 0;
|
||||
left: 12px;
|
||||
width: 18px;
|
||||
height: 100%;
|
||||
|
||||
&-item{
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
color: @subsidiary-color;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{slider-prefix-cls}-disabled{
|
||||
|
|
|
|||
|
|
@ -159,7 +159,8 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.@{inputClass} {
|
||||
.@{inputClass},
|
||||
.@{inputClass}-inner-container {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ const isServer = Vue.prototype.$isServer;
|
|||
/* istanbul ignore next */
|
||||
export const on = (function() {
|
||||
if (!isServer && document.addEventListener) {
|
||||
return function(element, event, handler) {
|
||||
return function(element, event, handler, useCapture = false) {
|
||||
if (element && event && handler) {
|
||||
element.addEventListener(event, handler, false);
|
||||
element.addEventListener(event, handler, useCapture);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
|
|
@ -21,9 +21,9 @@ export const on = (function() {
|
|||
/* istanbul ignore next */
|
||||
export const off = (function() {
|
||||
if (!isServer && document.removeEventListener) {
|
||||
return function(element, event, handler) {
|
||||
return function(element, event, handler, useCapture = false) {
|
||||
if (element && event) {
|
||||
element.removeEventListener(event, handler, false);
|
||||
element.removeEventListener(event, handler, useCapture);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
|
|
|
|||
2
types/iview.components.d.ts
vendored
2
types/iview.components.d.ts
vendored
|
|
@ -37,7 +37,7 @@ export { Scroll } from './scroll';
|
|||
export { Split } from './split';
|
||||
export { Layout } from './layout';
|
||||
export { LoadingBar, LoadingBarConfig } from './loading-bar';
|
||||
export { Menu, MenuGroup, MenuItem, MenuSub } from './menu';
|
||||
export { Menu, MenuGroup, MenuItem, Submenu } from './menu';
|
||||
export { Message, MessageConfig } from './message';
|
||||
export { Modal, ModalInstance, ModalConfig } from './modal';
|
||||
export { Notice, NoticeConfig, NoticeGlobalConfig } from './notice';
|
||||
|
|
|
|||
6
types/menu.d.ts
vendored
6
types/menu.d.ts
vendored
|
|
@ -38,7 +38,7 @@ export declare class Menu extends Vue {
|
|||
*/
|
||||
$emit(eventName: 'on-select', name?: string | number): this;
|
||||
/**
|
||||
* 当 展开/收起 子菜单时触发
|
||||
* 当 展开/收起 子菜单时触发
|
||||
* @default 当前展开的 Submenu 的 name 值数组
|
||||
*/
|
||||
$emit(eventName: 'on-open-change', names: string[] | number[]): this;
|
||||
|
|
@ -78,7 +78,7 @@ export declare class MenuItem extends Vue {
|
|||
append?: boolean;
|
||||
}
|
||||
|
||||
export declare class MenuSub extends Vue {
|
||||
export declare class Submenu extends Vue {
|
||||
/**
|
||||
* 子菜单的唯一标识，必填
|
||||
*/
|
||||
|
|
@ -104,4 +104,4 @@ export declare class MenuGroup extends Vue {
|
|||
* @default 空
|
||||
*/
|
||||
title?: string;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue