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>
|
||||
<div :class="classes" v-clickoutside="handleClose">
|
||||
<i-input
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:value.sync="displayRender"
|
||||
:size="size"
|
||||
:placeholder="placeholder"
|
||||
@on-focus="onFocus"></i-input>
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||
<div :class="[prefixCls + '-rel']" @click="toggleOpen">
|
||||
<slot>
|
||||
<i-input
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:value.sync="displayRender"
|
||||
:size="size"
|
||||
:placeholder="placeholder"></i-input>
|
||||
<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">
|
||||
<div>
|
||||
<Caspanel
|
||||
|
|
@ -125,6 +128,13 @@
|
|||
handleClose () {
|
||||
this.visible = false;
|
||||
},
|
||||
toggleOpen () {
|
||||
if (this.visible) {
|
||||
this.handleClose();
|
||||
} else {
|
||||
this.onFocus();
|
||||
}
|
||||
},
|
||||
onFocus () {
|
||||
this.visible = true;
|
||||
if (!this.value.length) {
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
compiled () {
|
||||
this.searchLabel = this.$el.innerHTML;
|
||||
},
|
||||
events: {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,13 @@
|
|||
@cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
|
||||
|
||||
.@{cascader-prefix-cls} {
|
||||
position: relative;
|
||||
//position: relative;
|
||||
line-height: normal;
|
||||
|
||||
&-rel{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.@{css-prefix}input{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,72 +1,67 @@
|
|||
<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>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: [],
|
||||
data: []
|
||||
text: '未选择',
|
||||
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: {
|
||||
updateData () {
|
||||
setTimeout(() => {
|
||||
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);
|
||||
handleChange (value, selectedData) {
|
||||
this.text = selectedData.map(o => o.label).join(', ');
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,67 +1,24 @@
|
|||
<template>
|
||||
<i-button type="primary" @click="modal1 = true">i-selelct加入width样式</i-button>
|
||||
<i-button type="primary" @click="modal2 = true">i-selelct没有加入width样式</i-button>
|
||||
|
||||
<Modal
|
||||
:visible.sync="modal1"
|
||||
title="普通的Modal对话框标题">
|
||||
<i-select :model.sync="model1" :style="modalStyle">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
:visible.sync="modal2"
|
||||
title="普通的Modal对话框标题">
|
||||
<i-select :model.sync="model1" :style="modalStyle">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</Modal>
|
||||
<i-select :model.sync="model9" style="width:200px">
|
||||
<i-option value="beijing" label="北京市">
|
||||
<span>北京</span>
|
||||
<span style="float:right;color:#ccc">Beiing</span>
|
||||
</i-option>
|
||||
<i-option value="shanghai" label="上海市">
|
||||
<span>上海</span>
|
||||
<span style="float:right;color:#ccc">ShangHai</span>
|
||||
</i-option>
|
||||
<i-option value="shenzhen" label="深圳市">
|
||||
<span>深圳</span>
|
||||
<span style="float:right;color:#ccc">ShenZhen</span>
|
||||
</i-option>
|
||||
</i-select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
modal1: false,
|
||||
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
|
||||
model9: 'shanghai'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue