Merge branch 'master' of https://github.com/iview/iview into carousel
This commit is contained in:
Rijn
commit
538b964bf9
5 changed files with 94 additions and 128 deletions
|
|
@ -1,14 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="classes" v-clickoutside="handleClose">
|
<div :class="classes" v-clickoutside="handleClose">
|
||||||
<i-input
|
<div :class="[prefixCls + '-rel']" @click="toggleOpen">
|
||||||
readonly
|
<slot>
|
||||||
:disabled="disabled"
|
<i-input
|
||||||
:value.sync="displayRender"
|
readonly
|
||||||
:size="size"
|
:disabled="disabled"
|
||||||
:placeholder="placeholder"
|
:value.sync="displayRender"
|
||||||
@on-focus="onFocus"></i-input>
|
:size="size"
|
||||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
|
:placeholder="placeholder"></i-input>
|
||||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
|
||||||
|
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
<Dropdown v-show="visible" transition="slide-up">
|
<Dropdown v-show="visible" transition="slide-up">
|
||||||
<div>
|
<div>
|
||||||
<Caspanel
|
<Caspanel
|
||||||
|
|
@ -125,6 +128,13 @@
|
||||||
handleClose () {
|
handleClose () {
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
},
|
},
|
||||||
|
toggleOpen () {
|
||||||
|
if (this.visible) {
|
||||||
|
this.handleClose();
|
||||||
|
} else {
|
||||||
|
this.onFocus();
|
||||||
|
}
|
||||||
|
},
|
||||||
onFocus () {
|
onFocus () {
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
if (!this.value.length) {
|
if (!this.value.length) {
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
|
this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
ready () {
|
compiled () {
|
||||||
this.searchLabel = this.$el.innerHTML;
|
this.searchLabel = this.$el.innerHTML;
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,13 @@
|
||||||
@cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
|
@cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
|
||||||
|
|
||||||
.@{cascader-prefix-cls} {
|
.@{cascader-prefix-cls} {
|
||||||
position: relative;
|
//position: relative;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
|
||||||
|
&-rel{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.@{css-prefix}input{
|
.@{css-prefix}input{
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,67 @@
|
||||||
<template>
|
<template>
|
||||||
<Cascader :data="data" :value.sync="value" change-on-select></Cascader>
|
{{ text }}
|
||||||
|
<Cascader :data="data" @on-change="handleChange">
|
||||||
|
<a href="javascript:void(0)">选择</a>
|
||||||
|
</Cascader>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
value: [],
|
text: '未选择',
|
||||||
data: []
|
data: [{
|
||||||
|
value: 'beijing',
|
||||||
|
label: '北京',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'gugong',
|
||||||
|
label: '故宫'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'tiantan',
|
||||||
|
label: '天坛'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'wangfujing',
|
||||||
|
label: '王府井'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
value: 'jiangsu',
|
||||||
|
label: '江苏',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'nanjing',
|
||||||
|
label: '南京',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'fuzimiao',
|
||||||
|
label: '夫子庙',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'suzhou',
|
||||||
|
label: '苏州',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'zhuozhengyuan',
|
||||||
|
label: '拙政园',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'shizilin',
|
||||||
|
label: '狮子林',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateData () {
|
handleChange (value, selectedData) {
|
||||||
setTimeout(() => {
|
this.text = selectedData.map(o => o.label).join(', ');
|
||||||
this.data = [{
|
|
||||||
value: 'beijing',
|
|
||||||
label: '北京',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: 'gugong',
|
|
||||||
label: '故宫'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'tiantan',
|
|
||||||
label: '天坛'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'wangfujing',
|
|
||||||
label: '王府井'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
value: 'jiangsu',
|
|
||||||
label: '江苏',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: 'nanjing',
|
|
||||||
label: '南京',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: 'fuzimiao',
|
|
||||||
label: '夫子庙'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'suzhou',
|
|
||||||
label: '苏州',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
value: 'zhuozhengyuan',
|
|
||||||
label: '拙政园'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'shizilin',
|
|
||||||
label: '狮子林'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}];
|
|
||||||
setTimeout(() => {
|
|
||||||
this.value = ['beijing', 'tiantan'];
|
|
||||||
}, 1000);
|
|
||||||
}, 1000);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
ready () {
|
|
||||||
this.updateData();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,67 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<i-button type="primary" @click="modal1 = true">i-selelct加入width样式</i-button>
|
<i-select :model.sync="model9" style="width:200px">
|
||||||
<i-button type="primary" @click="modal2 = true">i-selelct没有加入width样式</i-button>
|
<i-option value="beijing" label="北京市">
|
||||||
|
<span>北京</span>
|
||||||
<Modal
|
<span style="float:right;color:#ccc">Beiing</span>
|
||||||
:visible.sync="modal1"
|
</i-option>
|
||||||
title="普通的Modal对话框标题">
|
<i-option value="shanghai" label="上海市">
|
||||||
<i-select :model.sync="model1" :style="modalStyle">
|
<span>上海</span>
|
||||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
<span style="float:right;color:#ccc">ShangHai</span>
|
||||||
</i-select>
|
</i-option>
|
||||||
</Modal>
|
<i-option value="shenzhen" label="深圳市">
|
||||||
|
<span>深圳</span>
|
||||||
<Modal
|
<span style="float:right;color:#ccc">ShenZhen</span>
|
||||||
:visible.sync="modal2"
|
</i-option>
|
||||||
title="普通的Modal对话框标题">
|
</i-select>
|
||||||
<i-select :model.sync="model1" :style="modalStyle">
|
|
||||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
|
||||||
</i-select>
|
|
||||||
</Modal>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
modal1: false,
|
model9: 'shanghai'
|
||||||
modal2: false,
|
|
||||||
modalStyle: '',
|
|
||||||
cityList: [
|
|
||||||
{
|
|
||||||
value: 'beijing',
|
|
||||||
label: '北京市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'shanghai',
|
|
||||||
label: '上海市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'shenzhen',
|
|
||||||
label: '深圳市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'hangzhou',
|
|
||||||
label: '杭州市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'nanjing',
|
|
||||||
label: '南京市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'chongqing',
|
|
||||||
label: '重庆市'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
model1: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
modalStyle: function(){
|
|
||||||
let s = ""
|
|
||||||
if (this.modal1)
|
|
||||||
s = "width: 200px"
|
|
||||||
if (this.modal2)
|
|
||||||
s = ""
|
|
||||||
return s
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue