drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Normalise v-ckick-outside-x for Select

Browse source
This commit is contained in:
Graham Fairweather 2018-05-22 07:33:43 +02:00
parent d552ad18d7
commit 4a9974f631
2 changed files with 682 additions and 489 deletions
Download patch file Download diff file Expand all files Collapse all files

808
examples/routers/select.vue
View file

@ -1,296 +1,421 @@
<!--<template>--> <!--<template>-->
<!--<div>--> <!--<div>-->
<!--{{ model10 }} - --> <!--{{model10}} - -->
<!--{{ model11 }}--> <!--{{model11}}-->
<!--<Select v-model="model10" style="width:260px">--> <!--<Select -->
<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>--> <!--v-model="model10" -->
<!--</Select>--> <!--style="width:260px">-->
<!--<Select v-model="model11" style="width:260px">--> <!--<Option -->
<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>--> <!--v-for="(item, index) in cityList" -->
<!--</Select>--> <!--:value="item.value" -->
<!--</div>--> <!--:key="index">{{item.label}}</Option>-->
<!--</Select>-->
<!--<Select -->
<!--v-model="model11" -->
<!--style="width:260px">-->
<!--<Option -->
<!--v-for="(item, index) in cityList" -->
<!--:value="item.value" -->
<!--:key="index">{{item.label}}</Option>-->
<!--</Select>-->
<!--</div>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data() {-->
<!--return {--> <!--return {-->
<!--cityList: [],--> <!--cityList: [],-->
<!--model10: '',--> <!--model10: '',-->
<!--model11: '',--> <!--model11: '',-->
<!--model12: ''--> <!--model12: '',-->
<!--}--> <!--};-->
<!--},--> <!--},-->
<!--mounted () {--> <!--mounted() {-->
<!--setTimeout(() => {--> <!--setTimeout(() => {-->
<!--this.cityList = [--> <!--this.cityList = [-->
<!--{--> <!--{-->
<!--value: 'beijing',--> <!--value: 'beijing',-->
<!--label: '北京市'--> <!--label: '北京市',-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'shanghai',--> <!--value: 'shanghai',-->
<!--label: '上海市'--> <!--label: '上海市',-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'shenzhen',--> <!--value: 'shenzhen',-->
<!--label: '深圳市'--> <!--label: '深圳市',-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'hangzhou',--> <!--value: 'hangzhou',-->
<!--label: '杭州市'--> <!--label: '杭州市',-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'nanjing',--> <!--value: 'nanjing',-->
<!--label: '南京市'--> <!--label: '南京市',-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'chongqing',--> <!--value: 'chongqing',-->
<!--label: '重庆市'--> <!--label: '重庆市',-->
<!--}--> <!--},-->
<!--];--> <!--];-->
<!--}, 1000);--> <!--}, 1000);-->
<!--}--> <!--},-->
<!--}--> <!--};-->
<!--</script>--> <!--</script>-->
<!--<template>--> <!--<template>-->
<!--<div>--> <!--<div>-->
<!--<Select v-model="value">--> <!--<Select v-model="value">-->
<!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>--> <!--<Option -->
<!--</Select>--> <!--v-for="item in list" -->
<!--<Button @click="setList">set list</Button>--> <!--:value="item.value" -->
<!--</div>--> <!--:label="item.label" -->
<!--:key="item.value"></Option>-->
<!--</Select>-->
<!--<Button @click="setList">set list</Button>-->
<!--</div>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data() {-->
<!--return {--> <!--return {-->
<!--value: '',--> <!--value: '',-->
<!--list: []--> <!--list: [],-->
<!--}--> <!--};-->
<!--},--> <!--},-->
<!--methods: {--> <!--methods: {-->
<!--setList () {--> <!--setList() {-->
<!--let list = [];--> <!--const list = [];-->
<!--for (let i = 0; i < 400; i++) {--> <!--for (let i = 0; i < 400; i++) {-->
<!--list.push({--> <!--list.push({-->
<!--value: 'value' + i,--> <!--value: `value${i}`,-->
<!--label: 'label' + i--> <!--label: `label${i}`,-->
<!--});--> <!--});-->
<!--}--> <!--}-->
<!--this.list = list;--> <!--this.list = list;-->
<!--}--> <!--},-->
<!--}--> <!--},-->
<!--}--> <!--};-->
<!--</script>--> <!--</script>-->
<!--<template>--> <!--<template>-->
<!--<div style="width: 400px;margin: 50px;">--> <!--<div style="width: 400px;margin: 50px;">-->
<!--<div>data: {{ model13 }}</div>--> <!--<div>data: {{model13}}</div>-->
<!--<Row>--> <!--<Row>-->
<!--<Col span="12" style="padding-right:10px">--> <!--<Col -->
<!--<Select--> <!--span="12" -->
<!--size="small"--> <!--style="padding-right:10px">-->
<!--placeholder="提示提示"--> <!--<Select-->
<!--v-model="model13"--> <!--v-model="model13"-->
<!--filterable--> <!--:remote-method="remoteMethod1"-->
<!--remote--> <!--:loading="loading1"-->
<!--transfer--> <!--size="small"-->
<!--:remote-method="remoteMethod1"--> <!--placeholder="提示提示"-->
<!--:loading="loading1">--> <!--filterable-->
<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>--> <!--remote-->
<!--</Select>--> <!--transfer>-->
<!--<Option -->
<!--v-for="(option, index) in options1" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>--> <!--</Col>-->
<!--<Col span="12">--> <!--<Col span="12">-->
<!--<Select--> <!--<Select-->
<!--v-model="model14"--> <!--v-model="model14"-->
<!--multiple--> <!--:remote-method="remoteMethod2"-->
<!--filterable--> <!--:loading="loading2"-->
<!--remote--> <!--multiple-->
<!--:remote-method="remoteMethod2"--> <!--filterable-->
<!--:loading="loading2">--> <!--remote>-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>--> <!--<Option -->
<!--</Select>--> <!--v-for="(option, index) in options2" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>--> <!--</Col>-->
<!--</Row>--> <!--</Row>-->
<!--</div>--> <!--</div>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data() {-->
<!--return {--> <!--return {-->
<!--model13: '',--> <!--model13: '',-->
<!--loading1: false,--> <!--loading1: false,-->
<!--options1: [],--> <!--options1: [],-->
<!--model14: [],--> <!--model14: [],-->
<!--loading2: false,--> <!--loading2: false,-->
<!--options2: [],--> <!--options2: [],-->
<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']--> <!--list: [-->
<!--}--> <!--'Alabama',-->
<!--},--> <!--'Alaska',-->
<!--methods: {--> <!--'Arizona',-->
<!--remoteMethod1 (query) {--> <!--'Arkansas',-->
<!--if (query !== '') {--> <!--'California',-->
<!--this.loading1 = true;--> <!--'Colorado',-->
<!--setTimeout(() => {--> <!--'Connecticut',-->
<!--this.loading1 = false;--> <!--'Delaware',-->
<!--const list = this.list.map(item => {--> <!--'Florida',-->
<!--return {--> <!--'Georgia',-->
<!--value: item,--> <!--'Hawaii',-->
<!--label: item--> <!--'Idaho',-->
<!--'Illinois',-->
<!--'Indiana',-->
<!--'Iowa',-->
<!--'Kansas',-->
<!--'Kentucky',-->
<!--'Louisiana',-->
<!--'Maine',-->
<!--'Maryland',-->
<!--'Massachusetts',-->
<!--'Michigan',-->
<!--'Minnesota',-->
<!--'Mississippi',-->
<!--'Missouri',-->
<!--'Montana',-->
<!--'Nebraska',-->
<!--'Nevada',-->
<!--'New hampshire',-->
<!--'New jersey',-->
<!--'New mexico',-->
<!--'New york',-->
<!--'North carolina',-->
<!--'North dakota',-->
<!--'Ohio',-->
<!--'Oklahoma',-->
<!--'Oregon',-->
<!--'Pennsylvania',-->
<!--'Rhode island',-->
<!--'South carolina',-->
<!--'South dakota',-->
<!--'Tennessee',-->
<!--'Texas',-->
<!--'Utah',-->
<!--'Vermont',-->
<!--'Virginia',-->
<!--'Washington',-->
<!--'West virginia',-->
<!--'Wisconsin',-->
<!--'Wyoming',-->
<!--],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1(query) {-->
<!--if (query !== '') {-->
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2(query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--},-->
<!--},-->
<!--};--> <!--};-->
<!--});-->
<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2 (query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>--> <!--</script>-->
<!--<template>--> <!--<template>-->
<!--<div style="width: 300px">--> <!--<div style="width: 300px">-->
<!--<Select--> <!--<Select-->
<!--v-model="model14"--> <!--v-model="model14"-->
<!--multiple--> <!--:remote-method="remoteMethod2"-->
<!--filterable--> <!--:loading="loading2"-->
<!--remote--> <!--multiple-->
<!--:remote-method="remoteMethod2"--> <!--filterable-->
<!--:loading="loading2">--> <!--remote>-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>--> <!--<Option -->
<!--</Select>--> <!--v-for="(option, index) in options2" -->
<!--</div>--> <!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</div>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data() {-->
<!--return {--> <!--return {-->
<!--model13: '',--> <!--model13: '',-->
<!--loading1: false,--> <!--loading1: false,-->
<!--options1: [],--> <!--options1: [],-->
<!--model14: [],--> <!--model14: [],-->
<!--loading2: false,--> <!--loading2: false,-->
<!--options2: [],--> <!--options2: [],-->
<!--list: ['a', 'b', 'c']--> <!--list: ['a', 'b', 'c'],-->
<!--}--> <!--};-->
<!--},--> <!--},-->
<!--methods: {--> <!--methods: {-->
<!--remoteMethod2 (query) {--> <!--remoteMethod2(query) {-->
<!--if (query !== '') {--> <!--if (query !== '') {-->
<!--this.loading2 = true;--> <!--this.loading2 = true;-->
<!--setTimeout(() => {--> <!--setTimeout(() => {-->
<!--this.loading2 = false;--> <!--this.loading2 = false;-->
<!--const list = this.list.map(item => {--> <!--const list = this.list.map((item) => ({-->
<!--return {--> <!--value: item,-->
<!--value: item,--> <!--label: item,-->
<!--label: item--> <!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--},-->
<!--},-->
<!--};--> <!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>--> <!--</script>-->
<!--<template>--> <!--<template>-->
<!--<Row>--> <!--<Row>-->
<!--<Col span="12" style="padding-right:10px">--> <!--<Col -->
<!--<Select--> <!--span="12" -->
<!--v-model="model13"--> <!--style="padding-right:10px">-->
<!--filterable--> <!--<Select-->
<!--remote--> <!--v-model="model13"-->
<!--:remote-method="remoteMethod1"--> <!--:remote-method="remoteMethod1"-->
<!--:loading="loading1">--> <!--:loading="loading1"-->
<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>--> <!--filterable-->
<!--</Select>--> <!--remote>-->
<!--<Option -->
<!--v-for="(option, index) in options1" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>--> <!--</Col>-->
<!--<Col span="12">--> <!--<Col span="12">-->
<!--<Select--> <!--<Select-->
<!--v-model="model14"--> <!--v-model="model14"-->
<!--multiple--> <!--:remote-method="remoteMethod2"-->
<!--filterable--> <!--:loading="loading2"-->
<!--remote--> <!--multiple-->
<!--:remote-method="remoteMethod2"--> <!--filterable-->
<!--:loading="loading2">--> <!--remote>-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>--> <!--<Option -->
<!--</Select>--> <!--v-for="(option, index) in options2" -->
<!--:value="option.value" -->
<!--:key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>--> <!--</Col>-->
<!--</Row>--> <!--</Row>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data() {-->
<!--return {--> <!--return {-->
<!--model13: '',--> <!--model13: '',-->
<!--loading1: false,--> <!--loading1: false,-->
<!--options1: [],--> <!--options1: [],-->
<!--model14: [],--> <!--model14: [],-->
<!--loading2: false,--> <!--loading2: false,-->
<!--options2: [],--> <!--options2: [],-->
<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']--> <!--list: [-->
<!--}--> <!--'Alabama',-->
<!--},--> <!--'Alaska',-->
<!--methods: {--> <!--'Arizona',-->
<!--remoteMethod1 (query) {--> <!--'Arkansas',-->
<!--if (query !== '') {--> <!--'California',-->
<!--this.loading1 = true;--> <!--'Colorado',-->
<!--setTimeout(() => {--> <!--'Connecticut',-->
<!--this.loading1 = false;--> <!--'Delaware',-->
<!--const list = this.list.map(item => {--> <!--'Florida',-->
<!--return {--> <!--'Georgia',-->
<!--value: item,--> <!--'Hawaii',-->
<!--label: item--> <!--'Idaho',-->
<!--'Illinois',-->
<!--'Indiana',-->
<!--'Iowa',-->
<!--'Kansas',-->
<!--'Kentucky',-->
<!--'Louisiana',-->
<!--'Maine',-->
<!--'Maryland',-->
<!--'Massachusetts',-->
<!--'Michigan',-->
<!--'Minnesota',-->
<!--'Mississippi',-->
<!--'Missouri',-->
<!--'Montana',-->
<!--'Nebraska',-->
<!--'Nevada',-->
<!--'New hampshire',-->
<!--'New jersey',-->
<!--'New mexico',-->
<!--'New york',-->
<!--'North carolina',-->
<!--'North dakota',-->
<!--'Ohio',-->
<!--'Oklahoma',-->
<!--'Oregon',-->
<!--'Pennsylvania',-->
<!--'Rhode island',-->
<!--'South carolina',-->
<!--'South dakota',-->
<!--'Tennessee',-->
<!--'Texas',-->
<!--'Utah',-->
<!--'Vermont',-->
<!--'Virginia',-->
<!--'Washington',-->
<!--'West virginia',-->
<!--'Wisconsin',-->
<!--'Wyoming',-->
<!--],-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1(query) {-->
<!--if (query !== '') {-->
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2(query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map((item) => ({-->
<!--value: item,-->
<!--label: item,-->
<!--}));-->
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--},-->
<!--},-->
<!--};--> <!--};-->
<!--});-->
<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2 (query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>--> <!--</script>-->
<!--<template>--> <!--<template>-->
@ -356,7 +481,9 @@
<!--style="width:200px"--> <!--style="width:200px"-->
<!--&gt;--> <!--&gt;-->
<!--<i-option value="beijing">New York</i-option>--> <!--<i-option value="beijing">New York</i-option>-->
<!--<i-option value="shanghai" disabled>London</i-option>--> <!--<i-option -->
<!--value="shanghai" -->
<!--disabled>London</i-option>-->
<!--<i-option value="shenzhen">Sydney</i-option>--> <!--<i-option value="shenzhen">Sydney</i-option>-->
<!--</i-select>--> <!--</i-select>-->
<!--<br>--> <!--<br>-->
@ -396,15 +523,21 @@
<!--v-model="model9"--> <!--v-model="model9"-->
<!--style="width:200px"--> <!--style="width:200px"-->
<!--&gt;--> <!--&gt;-->
<!--<i-option value="New York" label="New York">--> <!--<i-option -->
<!--value="New York" -->
<!--label="New York">-->
<!--<span>New York</span>--> <!--<span>New York</span>-->
<!--<span style="float:right;color:#ccc">America</span>--> <!--<span style="float:right;color:#ccc">America</span>-->
<!--</i-option>--> <!--</i-option>-->
<!--<i-option value="London" label="London">--> <!--<i-option -->
<!--value="London" -->
<!--label="London">-->
<!--<span>London</span>--> <!--<span>London</span>-->
<!--<span style="float:right;color:#ccc">U.K.</span>--> <!--<span style="float:right;color:#ccc">U.K.</span>-->
<!--</i-option>--> <!--</i-option>-->
<!--<i-option value="Sydney" label="Sydney">--> <!--<i-option -->
<!--value="Sydney" -->
<!--label="Sydney">-->
<!--<span>Sydney</span>--> <!--<span>Sydney</span>-->
<!--<span style="float:right;color:#ccc">Australian</span>--> <!--<span style="float:right;color:#ccc">Australian</span>-->
<!--</i-option>--> <!--</i-option>-->
@ -461,11 +594,11 @@
<!--&gt;--> <!--&gt;-->
<!--<i-select--> <!--<i-select-->
<!--v-model="model13"--> <!--v-model="model13"-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1"-->
<!--filterable--> <!--filterable-->
<!--remote--> <!--remote-->
<!--clearable--> <!--clearable-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1"-->
<!--&gt;--> <!--&gt;-->
<!--<i-option--> <!--<i-option-->
<!--v-for="(option, index) in options1"--> <!--v-for="(option, index) in options1"-->
@ -477,12 +610,12 @@
<!--<i-col span="12">--> <!--<i-col span="12">-->
<!--<i-select--> <!--<i-select-->
<!--v-model="model14"--> <!--v-model="model14"-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2"-->
<!--multiple--> <!--multiple-->
<!--filterable--> <!--filterable-->
<!--remote--> <!--remote-->
<!--clearable--> <!--clearable>-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">-->
<!--<i-option--> <!--<i-option-->
<!--v-for="(option, index) in options2"--> <!--v-for="(option, index) in options2"-->
<!--:value="option.value"--> <!--:value="option.value"-->
@ -495,8 +628,8 @@
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data(){--> <!--data() {-->
<!--return {--> <!--return {-->
<!--cityList: [--> <!--cityList: [-->
<!--{--> <!--{-->
@ -626,77 +759,120 @@
<!--},--> <!--},-->
<!--methods: {--> <!--methods: {-->
<!--remoteMethod1(query){--> <!--remoteMethod1(query) {-->
<!--if (query !== '') {--> <!--if (query !== '') {-->
<!--this.loading1 = true;--> <!--this.loading1 = true;-->
<!--setTimeout(() => {--> <!--setTimeout(() => {-->
<!--this.loading1 = false;--> <!--this.loading1 = false;-->
<!--const list = this.list.map(item => ({--> <!--const list = this.list.map((item) => ({-->
<!--value: item,--> <!--value: item,-->
<!--label: item,--> <!--label: item,-->
<!--}));--> <!--}));-->
<!--this.options1 = list--> <!--this.options1 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--}, 1500);--> <!--}, 1500);-->
<!--} else {--> <!--} else {-->
<!--this.options1 = [];--> <!--this.options1 = [];-->
<!--}--> <!--}-->
<!--},--> <!--},-->
<!--remoteMethod2(query){--> <!--remoteMethod2(query) {-->
<!--if (query !== '') {--> <!--if (query !== '') {-->
<!--this.loading2 = true;--> <!--this.loading2 = true;-->
<!--setTimeout(() => {--> <!--setTimeout(() => {-->
<!--this.loading2 = false;--> <!--this.loading2 = false;-->
<!--const list = this.list.map(item => ({--> <!--const list = this.list.map((item) => ({-->
<!--value: item,--> <!--value: item,-->
<!--label: item,--> <!--label: item,-->
<!--}));--> <!--}));-->
<!--this.options2 = list--> <!--this.options2 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
<!--}, 200);--> <!--}, 200);-->
<!--} else {--> <!--} else {-->
<!--this.options2 = [];--> <!--this.options2 = [];-->
<!--}--> <!--}-->
<!--},--> <!--},-->
<!--},--> <!--},-->
<!--};--> <!--};-->
<!--</script>--> <!--</script>-->
<template> <template>
<div> <div>
<Select v-model="model1" size="small" style="width:200px;" > <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model1"
size="small"
style="width:200px;" >
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
<Select v-model="model10" size="small" multiple style="width:260px" > <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model10"
size="small"
multiple
style="width:260px" >
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
<br><br> <br><br>
<Select v-model="model1" size="large" style="width:200px" clearable @on-clear="onClear"> <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model1"
size="large"
style="width:200px"
clearable
@on-clear="onClear">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
<Select v-model="model10" size="large" multiple style="width:260px"> <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model10"
size="large"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
<br><br> <br><br>
<Select v-model="model1" style="width:200px"> <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model1"
style="width:200px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
<Select v-model="model11" multiple style="width:260px"> <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model11"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
<Select v-model="model10" multiple style="width:260px"> <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
<br><br> <br><br>
@ -709,8 +885,14 @@
<br><br> <br><br>
<br><br> <br><br>
<br><br> <br><br>
<Select v-model="model10" multiple style="width:260px"> <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
<br><br> <br><br>
@ -722,50 +904,56 @@
<br><br> <br><br>
<br><br> <br><br>
<br><br> <br><br>
<Select v-model="model10" multiple style="width:260px"> <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> v-model="model10"
multiple
style="width:260px">
<Option
v-for="item in cityList"
:value="item.value"
:key="item.value">{{item.label}}</Option>
</Select> </Select>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
cityList: [ cityList: [
{ {
value: 'New York', value: 'New York',
label: 'New York' label: 'New York',
}, },
{ {
value: '中国', value: '中国',
label: '中国' label: '中国',
}, },
{ {
value: 'Sydney', value: 'Sydney',
label: 'Sydney' label: 'Sydney',
}, },
{ {
value: 'Ottawa', value: 'Ottawa',
label: 'Ottawa' label: 'Ottawa',
}, },
{ {
value: 'Paris', value: 'Paris',
label: 'Paris' label: 'Paris',
}, },
{ {
value: 'Canberra', value: 'Canberra',
label: 'Canberra' label: 'Canberra',
} },
], ],
model1: '', model1: '',
model10: [], model10: [],
model11: [] model11: [],
} };
}, },
methods: { methods: {
onClear(){ onClear() {
console.log('onClear'); console.log('onClear');
} },
} },
} };
</script> </script>

5
src/components/select/select.vue
View file

@ -2,6 +2,7 @@
<div <div
:class="classes" :class="classes"
v-click-outside.capture="onClickOutside" v-click-outside.capture="onClickOutside"
v-click-outside:mousedown.capture="onClickOutside"
> >
<div <div
ref="reference" ref="reference"
@ -465,6 +466,10 @@
}, },
onClickOutside(event){ onClickOutside(event){
if (this.visible) { if (this.visible) {
if (event.type === 'mousedown') {
event.preventDefault();
return;
}
if (this.filterable) { if (this.filterable) {
const input = this.$el.querySelector('input[type="text"]'); const input = this.$el.querySelector('input[type="text"]');