yangdan8
GitHub
commit
f3ea5e9d78
34 changed files with 3359 additions and 18589 deletions
45
.gitignore
vendored
45
.gitignore
vendored
|
|
@ -1,22 +1,23 @@
|
|||
*.iml
|
||||
.idea
|
||||
.ipr
|
||||
.iws
|
||||
*.diff
|
||||
*.patch
|
||||
*.bak
|
||||
.DS_Store
|
||||
node_modules/
|
||||
node_modules2/
|
||||
.project
|
||||
.settings
|
||||
npm-debug.log
|
||||
.*proj
|
||||
.svn/
|
||||
*.swp
|
||||
*.swo
|
||||
*.log
|
||||
examples/dist/
|
||||
yarn-error.log
|
||||
test/unit/coverage
|
||||
.vscode
|
||||
*.iml
|
||||
.idea
|
||||
.ipr
|
||||
.iws
|
||||
*.diff
|
||||
*.patch
|
||||
*.bak
|
||||
.DS_Store
|
||||
node_modules/
|
||||
node_modules2/
|
||||
.project
|
||||
.settings
|
||||
npm-debug.log
|
||||
.*proj
|
||||
.svn/
|
||||
*.swp
|
||||
*.swo
|
||||
*.log
|
||||
examples/dist/
|
||||
yarn-error.log
|
||||
test/unit/coverage
|
||||
.vscode
|
||||
package-lock.json
|
||||
|
|
|
|||
5132
dist/iview.js
vendored
5132
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
8
dist/iview.min.js
vendored
8
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,70 +1,60 @@
|
|||
<template>
|
||||
<div>
|
||||
<Row>
|
||||
<i-col span="18">
|
||||
<i-button v-on:click="setValue">setValue</i-button>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<Cascader :data="data" v-model="value1" transfer></Cascader>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Alert show-icon>#6158</Alert>
|
||||
<Cascader :data="data" v-model="value" :load-data="loadData"></Cascader>
|
||||
<Cascader :data="data2" v-model="value2" change-on-select :load-data="loadData" @on-change="handlerChange"></Cascader>
|
||||
<p style="margin-top:2rem">异步加载数据同时赋初值会导致不能正确的显示</p>
|
||||
<p>所有数据均相同，第二个级联增加change-on-select</p>
|
||||
<p>第一个北京、故宫、故宫3级正常</p>
|
||||
<p>第二个强制将值设置为['beijing']</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value1: [],
|
||||
value: ['beijing','gugong','gugong3'],
|
||||
value2: ['beijing','gugong','gugong3'],
|
||||
data: [{
|
||||
value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331',
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
children: [{
|
||||
value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c',
|
||||
label: '故宫'
|
||||
}, {
|
||||
value: 'tiantan',
|
||||
label: '天坛'
|
||||
}, {
|
||||
value: 'wangfujing',
|
||||
label: '王府井'
|
||||
}]
|
||||
}, {
|
||||
value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b',
|
||||
label: '江苏',
|
||||
children: [{
|
||||
value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',
|
||||
label: '南京',
|
||||
children: [{
|
||||
value: '44736384-0ede-41ba-bf7a-59c84241851a',
|
||||
label: '夫子庙中国第一庙来自南京',
|
||||
children:[{
|
||||
value: '44736384-0ede-41ba-bf7a-59c84241851c',
|
||||
label:'自定义产品系统来自黑龙江地区'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'suzhou',
|
||||
label: '苏州',
|
||||
children: [{
|
||||
value: 'zhuozhengyuan',
|
||||
label: '拙政园',
|
||||
}, {
|
||||
value: 'shizilin',
|
||||
label: '狮子林',
|
||||
}]
|
||||
}],
|
||||
level: 1,
|
||||
loading: false,
|
||||
children: [
|
||||
|
||||
|
||||
]
|
||||
}],
|
||||
data2: [{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
level: 1,
|
||||
loading: false,
|
||||
children: [
|
||||
|
||||
|
||||
]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setValue() {
|
||||
var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a";
|
||||
var x = v.split(',')
|
||||
var x1 = x[0].toString();
|
||||
var x2 = x[1].toString();
|
||||
var x3 = x[2].toString();
|
||||
|
||||
this.value1 = x;
|
||||
handlerChange(val,selectData){
|
||||
console.log(val,selectData,'-----val');
|
||||
},
|
||||
loadData(item,callback){
|
||||
item.loading = true;
|
||||
setTimeout(() => {
|
||||
if(item.level === 1){
|
||||
item.children=[
|
||||
{label: '故宫',value:'gugong',level: 2,loading: false,children:[]},
|
||||
{label: '故宫2',value:'gugong2',level: 2,children:[]}
|
||||
];
|
||||
}else if(item.level === 2){
|
||||
item.children=[{label: '故宫3级',value:'gugong3',level: 3}]
|
||||
}
|
||||
item.loading = false;
|
||||
callback();
|
||||
}, 600);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -72,6 +62,80 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<!--<template>-->
|
||||
<!-- <div>-->
|
||||
<!-- <Row>-->
|
||||
<!-- <i-col span="18">-->
|
||||
<!-- <i-button v-on:click="setValue">setValue</i-button>-->
|
||||
<!-- </i-col>-->
|
||||
<!-- <i-col span="4">-->
|
||||
<!-- <Cascader :data="data" v-model="value1" transfer></Cascader>-->
|
||||
<!-- </i-col>-->
|
||||
<!-- </Row>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!-- export default {-->
|
||||
<!-- data () {-->
|
||||
<!-- return {-->
|
||||
<!-- value1: [],-->
|
||||
<!-- data: [{-->
|
||||
<!-- value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331',-->
|
||||
<!-- label: '北京',-->
|
||||
<!-- children: [{-->
|
||||
<!-- value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c',-->
|
||||
<!-- label: '故宫'-->
|
||||
<!-- }, {-->
|
||||
<!-- value: 'tiantan',-->
|
||||
<!-- label: '天坛'-->
|
||||
<!-- }, {-->
|
||||
<!-- value: 'wangfujing',-->
|
||||
<!-- label: '王府井'-->
|
||||
<!-- }]-->
|
||||
<!-- }, {-->
|
||||
<!-- value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b',-->
|
||||
<!-- label: '江苏',-->
|
||||
<!-- children: [{-->
|
||||
<!-- value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',-->
|
||||
<!-- label: '南京',-->
|
||||
<!-- children: [{-->
|
||||
<!-- value: '44736384-0ede-41ba-bf7a-59c84241851a',-->
|
||||
<!-- label: '夫子庙中国第一庙来自南京',-->
|
||||
<!-- children:[{-->
|
||||
<!-- value: '44736384-0ede-41ba-bf7a-59c84241851c',-->
|
||||
<!-- label:'自定义产品系统来自黑龙江地区'-->
|
||||
<!-- }]-->
|
||||
<!-- }]-->
|
||||
<!-- }, {-->
|
||||
<!-- value: 'suzhou',-->
|
||||
<!-- label: '苏州',-->
|
||||
<!-- children: [{-->
|
||||
<!-- value: 'zhuozhengyuan',-->
|
||||
<!-- label: '拙政园',-->
|
||||
<!-- }, {-->
|
||||
<!-- value: 'shizilin',-->
|
||||
<!-- label: '狮子林',-->
|
||||
<!-- }]-->
|
||||
<!-- }],-->
|
||||
<!-- }]-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- methods: {-->
|
||||
<!-- setValue() {-->
|
||||
<!-- var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a";-->
|
||||
<!-- var x = v.split(',')-->
|
||||
<!-- var x1 = x[0].toString();-->
|
||||
<!-- var x2 = x[1].toString();-->
|
||||
<!-- var x3 = x[2].toString();-->
|
||||
|
||||
</style>
|
||||
<!-- this.value1 = x;-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- mounted () {-->
|
||||
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--</script>-->
|
||||
<!--<style>-->
|
||||
|
||||
<!--</style>-->
|
||||
|
|
|
|||
|
|
@ -72,6 +72,9 @@
|
|||
:formatter="value => `${value}%`"
|
||||
:parser="value => value.replace('%', '')"></InputNumber>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<InputNumber :min="100" :max="3000" v-model="value4" style="width: 200px" :active-change="false"></InputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -81,6 +84,7 @@
|
|||
value1: 1800000,
|
||||
value2: 55,
|
||||
value3: 100,
|
||||
value4 : null,
|
||||
valueNull:null,
|
||||
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
|
||||
parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
|
||||
|
|
|
|||
|
|
@ -1,39 +1,43 @@
|
|||
<template>
|
||||
<Select v-model="model1" style="width:200px">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
<div>
|
||||
<p>With desc</p>
|
||||
<Button @click="info(false)">Info</Button>
|
||||
<Button @click="success(false)">Success</Button>
|
||||
<Button @click="warning(false)">Warning</Button>
|
||||
<Button @click="error(false)">Error</Button>
|
||||
<p>Only title</p>
|
||||
<Button @click="info(true)">Info</Button>
|
||||
<Button @click="success(true)">Success</Button>
|
||||
<Button @click="warning(true)">Warning</Button>
|
||||
<Button @click="error(true)">Error</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
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'
|
||||
}
|
||||
],
|
||||
model1: 'Sydney'
|
||||
methods: {
|
||||
info (nodesc) {
|
||||
this.$Notice.info({
|
||||
title: 'Notification title',
|
||||
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
|
||||
});
|
||||
},
|
||||
success (nodesc) {
|
||||
this.$Notice.success({
|
||||
title: 'Notification title',
|
||||
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
|
||||
});
|
||||
},
|
||||
warning (nodesc) {
|
||||
this.$Notice.warning({
|
||||
title: 'Notification title',
|
||||
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
|
||||
});
|
||||
},
|
||||
error (nodesc) {
|
||||
this.$Notice.error({
|
||||
title: 'Notification title',
|
||||
desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,18 @@
|
|||
<Progress :percent="65" status="wrong"></Progress>
|
||||
<Progress :percent="100"></Progress>
|
||||
<Progress :percent="25" hide-info></Progress>
|
||||
<Progress :percent="10" :stroke-width="20" text-inside></Progress>
|
||||
<Progress :percent="90" :stroke-color="color1"></Progress>
|
||||
<Progress :percent="90" :stroke-color="color2" status="active"></Progress>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
color1: '#ff6600',
|
||||
color2: ['#108ee9', '#87d068']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-switch v-model="m1" :loading="loading">
|
||||
<i-switch v-model="m1" :loading="loading" @on-change="change" :before-change="beforeChange">
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
|
|
@ -32,6 +32,8 @@
|
|||
<br><br>
|
||||
<i-switch :disabled="disabled"></i-switch>
|
||||
<Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
|
||||
<Divider></Divider>
|
||||
<i-switch v-model="switch1" true-color="#13ce66" false-color="#ff4949" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -40,12 +42,27 @@
|
|||
return {
|
||||
m1: true,
|
||||
disabled: true,
|
||||
loading: false
|
||||
loading: false,
|
||||
switch1: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (status) {
|
||||
console.log(status)
|
||||
},
|
||||
beforeChange () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$Modal.confirm({
|
||||
title: '切换确认',
|
||||
content: '您确认要切换开关状态吗？',
|
||||
onOk: () => {
|
||||
resolve();
|
||||
},
|
||||
onCancel: () => {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,60 @@
|
|||
<!--<template>-->
|
||||
<!-- <Tabs :animated="false" value="name1">-->
|
||||
<!-- <Tab-pane label="标签一" name="name1">-->
|
||||
<!-- <Table :columns="columns1"></Table>-->
|
||||
<!-- </Tab-pane>-->
|
||||
<!-- <Tab-pane label="标签二" name="name2">-->
|
||||
<!-- <Table :columns="columns1"></Table>-->
|
||||
<!-- </Tab-pane>-->
|
||||
<!-- <Tab-pane label="标签三" name="name3">-->
|
||||
<!-- <Table :columns="columns1" ></Table>-->
|
||||
<!-- </Tab-pane>-->
|
||||
<!-- </Tabs>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!-- export default {-->
|
||||
<!-- data() {-->
|
||||
<!-- return {-->
|
||||
<!-- columns1: [-->
|
||||
<!-- {-->
|
||||
<!-- title: '姓名',-->
|
||||
<!-- key: 'name'-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- title: '年龄',-->
|
||||
<!-- key: 'age'-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- title: '地址',-->
|
||||
<!-- key: 'address'-->
|
||||
<!-- }-->
|
||||
<!-- ],-->
|
||||
<!-- data1: [-->
|
||||
<!-- {-->
|
||||
<!-- name: '王小明',-->
|
||||
<!-- age: 18,-->
|
||||
<!-- address: '北京市朝阳区芍药居'-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- name: '张小刚',-->
|
||||
<!-- age: 25,-->
|
||||
<!-- address: '北京市海淀区西二旗'-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- name: '李小红',-->
|
||||
<!-- age: 30,-->
|
||||
<!-- address: '上海市浦东新区世纪大道'-->
|
||||
<!-- },-->
|
||||
<!-- {-->
|
||||
<!-- name: '周小伟',-->
|
||||
<!-- age: 26,-->
|
||||
<!-- address: '深圳市南山区深南大道'-->
|
||||
<!-- }-->
|
||||
<!-- ]-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--</script>-->
|
||||
<template>
|
||||
<div>
|
||||
<Button @click="showSecond = !showSecond">change</Button>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,70 @@
|
|||
<style scoped>
|
||||
.top,.bottom{
|
||||
text-align: center;
|
||||
}
|
||||
.center{
|
||||
width: 300px;
|
||||
margin: 10px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.center-left{
|
||||
float: left;
|
||||
}
|
||||
.center-right{
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div style="margin: 200px;">
|
||||
<Tooltip always placement="top-end" :content="text" :delay="1000" theme="light">
|
||||
<Button @click="disabled = true">延时1秒显示</Button>
|
||||
</Tooltip>
|
||||
<Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
|
||||
<Button @click="handleChange">change</Button>
|
||||
</Tooltip>
|
||||
<Button @click="handleChange">change</Button>
|
||||
<Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
|
||||
<Button>Click</Button>
|
||||
</Poptip>
|
||||
<div>
|
||||
<div class="top">
|
||||
<Tooltip content="Top Left text" placement="top-start">
|
||||
<Button>Top Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Top Center text" placement="top">
|
||||
<Button>Top Center</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Top Right text" placement="top-end">
|
||||
<Button>Top Right</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="center-left">
|
||||
<Tooltip content="Left Top text" placement="left-start">
|
||||
<Button>Left Top</Button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Left Center text" placement="left">
|
||||
<Button>Left Center</Button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Left Bottom text" placement="left-end">
|
||||
<Button>Left Bottom</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="center-right">
|
||||
<Tooltip content="Right Top text" placement="right-start">
|
||||
<Button>Right Top</Button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Right Center text" placement="right">
|
||||
<Button>Right Center</Button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Right Bottom text" placement="right-end">
|
||||
<Button>Right Bottom</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<Tooltip content="Bottom Left text" placement="bottom-start">
|
||||
<Button>Bottom Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Bottom Center text" placement="bottom">
|
||||
<Button>Bottom Center</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Bottom Right text" placement="bottom-end">
|
||||
<Button>Bottom Right</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
text: 'Tooltip 文字提示'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange () {
|
||||
this.text = '提示'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,81 @@
|
|||
<template>
|
||||
<Tree :data="data2" check-directly show-checkbox></Tree>
|
||||
<Tree :data="data3" :load-data="loadData" show-checkbox></Tree>
|
||||
</template>
|
||||
<script>
|
||||
//验证bug #6139
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data2: [
|
||||
data3: [
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
title: 'parent',
|
||||
loading: false,
|
||||
children: []
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>-->
|
||||
|
|
|
|||
16057
package-lock.json
generated
16057
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -44,14 +44,14 @@
|
|||
"url": "https://github.com/iview/iview/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"async-validator": "^1.10.0",
|
||||
"async-validator": "^1.12.2",
|
||||
"deepmerge": "^2.2.1",
|
||||
"element-resize-detector": "^1.2.0",
|
||||
"js-calendar": "^1.2.3",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"popper.js": "^1.14.6",
|
||||
"tinycolor2": "^1.4.1",
|
||||
"v-click-outside-x": "^3.5.6"
|
||||
"v-click-outside-x": "^4.0.19"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.5.2"
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
auto-complete
|
||||
:remote-method="remoteMethod"
|
||||
@on-change="handleChange"
|
||||
@on-clickoutside="handleClickOutside"
|
||||
:transfer="transfer">
|
||||
<slot name="input">
|
||||
<i-input
|
||||
|
|
@ -113,7 +114,8 @@
|
|||
computed: {
|
||||
inputIcon () {
|
||||
let icon = '';
|
||||
if (this.clearable && this.currentValue) {
|
||||
//#6161 #7
|
||||
if (this.clearable && this.currentValue && !this.disabled) {
|
||||
icon = 'ios-close';
|
||||
} else if (this.icon) {
|
||||
icon = this.icon;
|
||||
|
|
@ -167,6 +169,11 @@
|
|||
this.currentValue = '';
|
||||
this.$refs.select.reset();
|
||||
this.$emit('on-clear');
|
||||
},
|
||||
handleClickOutside(){
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.blur();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -56,7 +56,8 @@
|
|||
if (this.trigger !== 'hover' || !item.children || !item.children.length) return; // #1922
|
||||
this.handleTriggerItem(item, false, true);
|
||||
},
|
||||
handleTriggerItem (item, fromInit = false, fromUser = false) {
|
||||
//#6158 -- default fromInit = false to fromInit = true;
|
||||
handleTriggerItem (item, fromInit = true, fromUser = false) {
|
||||
if (item.disabled) return;
|
||||
|
||||
const cascader = findComponentUpward(this, 'Cascader');
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
},
|
||||
methods: {
|
||||
updateModel (update) {
|
||||
this.childrens = findComponentsDownward(this, 'Checkbox');
|
||||
this.childrens = findComponentsDownward(this, 'Checkbox', 'CheckboxGroup');
|
||||
if (this.childrens) {
|
||||
const { value } = this;
|
||||
this.childrens.forEach(child => {
|
||||
|
|
|
|||
|
|
@ -37,14 +37,10 @@
|
|||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.disabled) return;
|
||||
const $parent = findComponentUpward(this, 'Dropdown');
|
||||
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
|
||||
|
||||
if (this.disabled) {
|
||||
this.$nextTick(() => {
|
||||
$parent.currentVisible = true;
|
||||
});
|
||||
} else if (hasChildren) {
|
||||
if (hasChildren) {
|
||||
this.$parent.$emit('on-haschild-click');
|
||||
} else {
|
||||
if ($parent && $parent.$options.name === 'Dropdown') {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
@blur="blur"
|
||||
@keydown.stop="keyDown"
|
||||
@input="change"
|
||||
ref="precisionCursor"
|
||||
@mouseup="preventDefault"
|
||||
@change="change"
|
||||
:readonly="readonly || !editable"
|
||||
|
|
@ -219,7 +220,6 @@
|
|||
if (this.disabled || this.readonly) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const targetVal = Number(e.target.value);
|
||||
let val = Number(this.currentValue);
|
||||
const step = Number(this.step);
|
||||
|
|
@ -256,7 +256,8 @@
|
|||
if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision));
|
||||
|
||||
const {min, max} = this;
|
||||
if (val!==null) {
|
||||
// #6245
|
||||
if ( val!==null && !this.activeChange ) {
|
||||
if (val > max) {
|
||||
val = max;
|
||||
} else if (val < min) {
|
||||
|
|
@ -305,15 +306,24 @@
|
|||
this.setValue(null);
|
||||
return;
|
||||
}
|
||||
if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later
|
||||
if (event.type == 'input' && val.match(/^\-?\.?$|\.$/g)) return; // prevent fire early if decimal. If no more input the change event will fire later
|
||||
|
||||
//#fixed when setting the precision val, input point cannot show problem
|
||||
const precision = this.precision;
|
||||
let cacheVal = this.currentValue;
|
||||
if( precision ){
|
||||
const valMatchPointArr = (val+'').match(/\./g);
|
||||
if( valMatchPointArr && valMatchPointArr.length >= 2 ){
|
||||
cacheVal = this.currentValue + '.';
|
||||
}
|
||||
}
|
||||
|
||||
val = Number(val);
|
||||
|
||||
if (!isNaN(val)) {
|
||||
if (!isNaN(val) ) {
|
||||
this.currentValue = val;
|
||||
this.setValue(val);
|
||||
} else {
|
||||
event.target.value = this.currentValue;
|
||||
event.target.value = cacheVal;
|
||||
}
|
||||
},
|
||||
changeVal (val) {
|
||||
|
|
@ -338,6 +348,14 @@
|
|||
},
|
||||
currentValue (val) {
|
||||
this.changeVal(val);
|
||||
//optimization - Solve the problem of cursor positioning inaccuracy
|
||||
this.$nextTick(()=>{
|
||||
if( this.precision ){
|
||||
const currentValueLength = ( this.currentValue || 0 ).toString().length;
|
||||
const precisionCursor = this.$refs.precisionCursor;
|
||||
precisionCursor.selectionStart = precisionCursor.selectionEnd = currentValueLength;
|
||||
}
|
||||
});
|
||||
},
|
||||
min () {
|
||||
this.changeVal(this.currentValue);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div :class="wrapClasses">
|
||||
<div :class="outerClasses">
|
||||
<div :class="innerClasses">
|
||||
<div :class="bgClasses" :style="bgStyle"></div><div :class="successBgClasses" :style="successBgStyle"></div>
|
||||
<div :class="bgClasses" :style="bgStyle"><div class="ivu-progress-inner-text" v-if="textInside">{{ percent }}%</div></div><div :class="successBgClasses" :style="successBgStyle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="!hideInfo" :class="textClasses">
|
||||
|
|
@ -54,7 +54,11 @@
|
|||
default: false
|
||||
},
|
||||
strokeColor: {
|
||||
type: String
|
||||
type: [String, Array]
|
||||
},
|
||||
textInside: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -89,7 +93,11 @@
|
|||
};
|
||||
|
||||
if (this.strokeColor) {
|
||||
style['background-color'] = this.strokeColor;
|
||||
if (typeof this.strokeColor === 'string') {
|
||||
style['background-color'] = this.strokeColor;
|
||||
} else {
|
||||
style['background-image'] = `linear-gradient(to right, ${this.strokeColor[0]} 0%, ${this.strokeColor[1]} 100%)`;
|
||||
}
|
||||
}
|
||||
|
||||
return style;
|
||||
|
|
@ -108,7 +116,7 @@
|
|||
`${prefixCls}`,
|
||||
`${prefixCls}-${this.currentStatus}`,
|
||||
{
|
||||
[`${prefixCls}-show-info`]: !this.hideInfo,
|
||||
[`${prefixCls}-show-info`]: !this.hideInfo && !this.textInside,
|
||||
[`${prefixCls}-vertical`]: this.vertical
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -227,8 +227,9 @@
|
|||
this.inputLength = this.$refs.input.value.length * 12 + 20;
|
||||
this.$emit('on-keydown');
|
||||
},
|
||||
handleInputDelete () {
|
||||
if (this.multiple && this.selectedMultiple.length && this.query === '') {
|
||||
handleInputDelete (e) {
|
||||
const targetValue = e.target.value;
|
||||
if (this.multiple && this.selectedMultiple.length && this.query === '' && targetValue === '' ) {
|
||||
this.removeTag(this.selectedMultiple[this.selectedMultiple.length - 1]);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -544,6 +544,7 @@
|
|||
event.preventDefault();
|
||||
this.hideMenu();
|
||||
this.isFocused = true;
|
||||
this.$emit('on-clickoutside', event);
|
||||
} else {
|
||||
this.caretPosition = -1;
|
||||
this.isFocused = false;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<span
|
||||
tabindex="0"
|
||||
:class="wrapClasses"
|
||||
:style="wrapStyles"
|
||||
@click="toggle"
|
||||
@keydown.space="toggle"
|
||||
>
|
||||
|
|
@ -15,9 +16,7 @@
|
|||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-switch';
|
||||
|
||||
export default {
|
||||
name: 'iSwitch',
|
||||
mixins: [ Emitter ],
|
||||
|
|
@ -52,7 +51,14 @@
|
|||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
trueColor: {
|
||||
type: String
|
||||
},
|
||||
falseColor: {
|
||||
type: String
|
||||
},
|
||||
beforeChange: Function
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -71,23 +77,45 @@
|
|||
}
|
||||
];
|
||||
},
|
||||
wrapStyles () {
|
||||
let style = {};
|
||||
if (this.trueColor && this.currentValue === this.trueValue) {
|
||||
style['border-color'] = this.trueColor;
|
||||
style['background-color'] = this.trueColor;
|
||||
} else if (this.falseColor && this.currentValue === this.falseValue) {
|
||||
style['border-color'] = this.falseColor;
|
||||
style['background-color'] = this.falseColor;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
innerClasses () {
|
||||
return `${prefixCls}-inner`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToggle () {
|
||||
const checked = this.currentValue === this.trueValue ? this.falseValue : this.trueValue;
|
||||
this.currentValue = checked;
|
||||
this.$emit('input', checked);
|
||||
this.$emit('on-change', checked);
|
||||
this.dispatch('FormItem', 'on-form-change', checked);
|
||||
},
|
||||
toggle (event) {
|
||||
event.preventDefault();
|
||||
if (this.disabled || this.loading) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const checked = this.currentValue === this.trueValue ? this.falseValue : this.trueValue;
|
||||
|
||||
this.currentValue = checked;
|
||||
this.$emit('input', checked);
|
||||
this.$emit('on-change', checked);
|
||||
this.dispatch('FormItem', 'on-form-change', checked);
|
||||
if (!this.beforeChange) {
|
||||
return this.handleToggle();
|
||||
}
|
||||
const before = this.beforeChange();
|
||||
if (before && before.then) {
|
||||
before.then(() => {
|
||||
this.handleToggle();
|
||||
});
|
||||
} else {
|
||||
this.handleToggle();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="prefixCls" v-show="show" :style="contentStyle"><slot></slot></div>
|
||||
<div :class="prefixCls" v-if="show" :style="contentStyle"><slot></slot></div>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-tabs-tabpane';
|
||||
|
|
|
|||
|
|
@ -235,9 +235,11 @@
|
|||
},
|
||||
handleLeftCheckedKeysChange (keys) {
|
||||
this.leftCheckedKeys = keys;
|
||||
this.handleCheckedKeys();
|
||||
},
|
||||
handleRightCheckedKeysChange (keys) {
|
||||
this.rightCheckedKeys = keys;
|
||||
this.handleCheckedKeys();
|
||||
},
|
||||
handleCheckedKeys () {
|
||||
const sourceSelectedKeys = this.getValidKeys('left');
|
||||
|
|
|
|||
|
|
@ -71,7 +71,9 @@
|
|||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
appearByClickArrow: false
|
||||
appearByClickArrow: false,
|
||||
// #6139
|
||||
loadingChildrenState : true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -105,7 +107,7 @@
|
|||
];
|
||||
},
|
||||
showArrow () {
|
||||
return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading);
|
||||
return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading && this.loadingChildrenState);
|
||||
},
|
||||
showLoading () {
|
||||
return 'loading' in this.data && this.data.loading;
|
||||
|
|
@ -188,6 +190,8 @@
|
|||
if (children.length) {
|
||||
this.$set(this.data, this.childrenKey, children);
|
||||
this.$nextTick(() => this.handleExpand());
|
||||
}else{
|
||||
this.loadingChildrenState = false;
|
||||
}
|
||||
});
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.fade-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.make-motion(@className, @keyframeName, @animation-time-quick);
|
||||
.@{className}-enter-active, .@{className}-appear {
|
||||
opacity: 0;
|
||||
animation-timing-function: linear;
|
||||
|
|
@ -27,4 +27,4 @@
|
|||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.motion-common() {
|
||||
animation-duration: @animation-time;
|
||||
.motion-common(@time) {
|
||||
animation-duration: @time;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName, @time: @animation-time) {
|
||||
.@{className}-enter-active, .@{className}-appear {
|
||||
.motion-common();
|
||||
.motion-common(@time);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-leave-active {
|
||||
.motion-common();
|
||||
.motion-common(@time);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter-active, .@{className}-appear {
|
||||
|
|
@ -29,4 +29,4 @@
|
|||
|
||||
.collapse-transition {
|
||||
transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,6 +35,13 @@
|
|||
border-radius: 100px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
&-text{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
&-vertical &-inner {
|
||||
height: 100%;
|
||||
|
|
@ -52,10 +59,17 @@
|
|||
}
|
||||
|
||||
&-bg {
|
||||
text-align: right;
|
||||
border-radius: 100px;
|
||||
background-color: @primary-color;
|
||||
transition: all @transition-time linear;
|
||||
position: relative;
|
||||
&:after{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&-success-bg{
|
||||
border-radius: 100px;
|
||||
|
|
|
|||
|
|
@ -198,6 +198,7 @@
|
|||
|
||||
// Animation
|
||||
@animation-time : .3s;
|
||||
@animation-time-quick : .15s;
|
||||
@transition-time : .2s;
|
||||
@ease-in-out : ease-in-out;
|
||||
|
||||
|
|
|
|||
|
|
@ -212,11 +212,18 @@ export function findComponentDownward (context, componentName) {
|
|||
}
|
||||
|
||||
// Find components downward
|
||||
export function findComponentsDownward (context, componentName) {
|
||||
export function findComponentsDownward (context, componentName, ignoreComponentNames = []) {
|
||||
if (!Array.isArray(ignoreComponentNames)) {
|
||||
ignoreComponentNames = [ignoreComponentNames]
|
||||
}
|
||||
return context.$children.reduce((components, child) => {
|
||||
if (child.$options.name === componentName) components.push(child);
|
||||
const foundChilds = findComponentsDownward(child, componentName);
|
||||
return components.concat(foundChilds);
|
||||
if (ignoreComponentNames.indexOf(child.$options.name) < 0) {
|
||||
const foundChilds = findComponentsDownward(child, componentName);
|
||||
return components.concat(foundChilds);
|
||||
} else {
|
||||
return components
|
||||
}
|
||||
}, []);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue