Skip to content

Commit

Permalink
feat: 完善demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@Qymh
Qymh committed Aug 29, 2019
1 parent ba31ea5 commit d96cdc2
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 101 deletions.
29 changes: 18 additions & 11 deletions demo/js/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
<div class="settings__btn--1">重新初始化数据(联动转非联动)</div>
</div>
<div class="settings">
<div class="settings__btn--1">获取当前data(vConsole查看)</div>
<div class="settings__btn--1">获取当前data(console查看)</div>
</div>
<div class="settings">
<div class="settings__btn--1">获取当前index(vConsole查看)</div>
<div class="settings__btn--1">获取当前index(console查看)</div>
</div>
</div>

Expand All @@ -41,10 +41,10 @@
<div class="settings__btn--2">点击此处才会异步设置值</div>
</div>
<div class="settings">
<div class="settings__btn--2">获取当前data(vConsole查看)</div>
<div class="settings__btn--2">获取当前data(console查看)</div>
</div>
<div class="settings">
<div class="settings__btn--2">获取当前index(vConsole查看)</div>
<div class="settings__btn--2">获取当前index(console查看)</div>
</div>
</div>

Expand All @@ -64,10 +64,10 @@
<div class="settings__btn--4">点击设置key为20k 20k 20k 20k 20k</div>
</div>
<div class="settings">
<div class="settings__btn--4">获取当前data(vConsole查看)</div>
<div class="settings__btn--4">获取当前data(console查看)</div>
</div>
<div class="settings">
<div class="settings__btn--4">获取当前index(vConsole查看)</div>
<div class="settings__btn--4">获取当前index(console查看)</div>
</div>
</div>

Expand All @@ -87,10 +87,10 @@
<div class="settings__btn--5">点击将第一栏滚动到索引2</div>
</div>
<div class="settings">
<div class="settings__btn--5">获取当前data(vConsole查看)</div>
<div class="settings__btn--5">获取当前data(console查看)</div>
</div>
<div class="settings">
<div class="settings__btn--5">获取当前index(vConsole查看)</div>
<div class="settings__btn--5">获取当前index(console查看)</div>
</div>
</div>

Expand All @@ -110,19 +110,26 @@
<div class="settings__btn--6">点击设置key为 32 3201 320102</div>
</div>
<div class="settings">
<div class="settings__btn--6">获取当前data(vConsole查看)</div>
<div class="settings__btn--6">获取当前data(console查看)</div>
</div>
<div class="settings">
<div class="settings__btn--6">获取当前index(vConsole查看)</div>
<div class="settings__btn--6">获取当前index(console查看)</div>
</div>
</div>

<div class="box" style="background-color: #fbf9fe;">
<div class="box">
<div class="title">省市区非联动异步实测</div>
<div class="cell">
<div class="cell__title cell__title--7">当前数据：</div>
<div class="cell__details cell__details--7">点击显示</div>
</div>
<div class="inline7"></div>
<div class="settings">
<div class="settings__btn--7">获取当前data(console查看)</div>
</div>
<div class="settings">
<div class="settings__btn--7">获取当前index(console查看)</div>
</div>
</div>
</div>
</body>
Expand Down
110 changes: 68 additions & 42 deletions demo/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import QSelect from '@qymh/q-select/src/index';
import City from './lib/city';
import './style/demo.css';
import axios from 'axios/dist/axios';
import { deepClone } from '@qymh/q-select/src/uitls';

function normalizeCity(data) {
data.map(v => {
Expand Down Expand Up @@ -426,57 +427,53 @@ $setBtn6.forEach((v, i) => {

// 省市区非联动异步实测
const $show7 = document.querySelector('.cell__title--7');
let province = [];
let city = [];
let area = [];
const $click7 = document.querySelector('.cell__details--7');
const ax = axios.create();
async function get(code) {
if (!code) {
return [];
}
const data = await ax.get('https://restapi.amap.com/v3/config/district', {
const data = await ax.get('https://g46tw.sse.codesandbox.io/area', {
params: {
key: '7c4c08ad5e1dcbca9601f09fab939f68',
keywords: code || '',
extensions: 'base'
key: code
}
});
return data.data.districts[0].districts.map(v => ({
key: v.adcode,
value: v.name
}));
return data.data;
}
Promise.all([get('100000'), get('410000'), get('410300')]).then(values => {
province = values[0];
city = values[1];
area = values[2];

const base = [province, city, area];
let qSelect7;

const qSelect7 = new QSelect({
$click7.addEventListener('click', () => {
qSelect7.show();
});

ax.get('https://g46tw.sse.codesandbox.io/init').then(res => {
const baseData = res.data;
qSelect7 = new QSelect({
title: '省市区非联动异步实测',
data: base,
target: '.inline7',
data: deepClone(baseData),
cancelBtn: '重置',
ready(data, key) {
$show7.textContent = `数据:${data.join(',')},key:${key.join(',')}`;
},
change(weight, data, key) {
async change(weight, data, key) {
const curKey = key[weight];
switch (weight) {
case 0:
qSelect7.setLoading();
get(curKey).then(res => {
let res;
try {
switch (weight) {
case 0:
qSelect7.setLoading();
res = await get(curKey);
if (res.length) {
get(res[0].key).then(inner => {
qSelect7
.setColumnData([1, 2], [res, inner])
.then(([data, key]) => {
$show7.textContent = `数据:${data.join(',')},key:${key.join(
','
)}`;
qSelect7.cancelLoading();
});
});
const inner = await get(res[0].key);
qSelect7
.setColumnData([1, 2], [res, inner])
.then(([data, key]) => {
$show7.textContent = `数据:${data.join(',')},key:${key.join(
','
)}`;
qSelect7.cancelLoading();
});
} else {
qSelect7.setColumnData(1, res).then(([data, key]) => {
$show7.textContent = `数据:${data.join(',')},key:${key.join(
Expand All @@ -485,25 +482,54 @@ Promise.all([get('100000'), get('410000'), get('410300')]).then(values => {
qSelect7.cancelLoading();
});
}
});
break;
case 1:
qSelect7.setLoading();
get(curKey).then(res => {
break;
case 1:
qSelect7.setLoading();
res = await get(curKey);
qSelect7.setColumnData(2, res).then(([data, key]) => {
$show7.textContent = `数据:${data.join(',')},key:${key.join(
','
)}`;
qSelect7.cancelLoading();
});
});
break;
case 2:
break;
case 2:
$show7.textContent = `数据:${data.join(',')},key:${key.join(',')}`;
break;
}
} catch (error) {
qSelect7.setData(deepClone(baseData)).then(([data, key]) => {
$show7.textContent = `数据:${data.join(',')},key:${key.join(',')}`;
qSelect7.cancelLoading();
// eslint-disable-next-line
alert('接口出错,重新选择');
});
}
},
confirm(data, key) {
$show7.textContent = `数据:${data.join(',')},key:${key.join(',')}`;
},
cancel() {
qSelect7.setData(deepClone(baseData)).then(([data, key]) => {
$show7.textContent = `数据:${data.join(',')},key:${key.join(',')}`;
qSelect7.cancelLoading();
});
}
});
});

const $setBtn7 = document.querySelectorAll('.settings__btn--7');
$setBtn7.forEach((v, i) => {
v.addEventListener('click', () => {
switch (i) {
case 0:
// eslint-disable-next-line
console.log(qSelect7.getData());
break;
case 1:
// eslint-disable-next-line
console.log(qSelect7.getIndex());
break;
}
});
});
95 changes: 51 additions & 44 deletions demo/vue/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,20 +97,22 @@
</div>
<div>
<cell force title="省市区非联动异步实测" />
<cell hideDetails :title="title6" @click="doClick6" />
<cell :title="title6" @click="doClick6" />
<q-select
ref="select6"
v-model="show6"
title="省市区非联动异步实测"
:data="data6"
inline
:loading="loading6"
@ready="doReady6"
@show="doShow6"
@hide="doHide6"
@change="doChange6"
@confirm="doConfirm6"
/>
<btn v-for="(item, index) in btn6" :key="index" @click="doSet6(index)">
{{ item }}
</btn>
</div>
</div>
</template>
Expand Down Expand Up @@ -290,7 +292,7 @@ export default {
'获取当前data(console查看)',
'获取当前index(console查看)'
],
btn6: [],
btn6: ['获取当前data(console查看)', '获取当前index(console查看)'],
btn7: [],
newData1: [
{
Expand All @@ -316,18 +318,8 @@ export default {
this.data1 = [baseArr1];
this.baseArr2 = [baseArr2];
this.data3 = [baseArr2, baseArr2, baseArr2, baseArr2, baseArr2];
let province = [];
let city = [];
let area = [];
Promise.all([
this.get('100000'),
this.get('410000'),
this.get('410300')
]).then(values => {
province = values[0];
city = values[1];
area = values[2];
this.$refs.select6.setData([province, city, area]);
ax.get('https://g46tw.sse.codesandbox.io/init').then(res => {
this.data6 = res.data;
this.loading6 = false;
});
},
Expand Down Expand Up @@ -577,17 +569,12 @@ export default {
if (!code) {
return [];
}
const data = await ax.get('https://restapi.amap.com/v3/config/district', {
const data = await ax.get('https://g46tw.sse.codesandbox.io/area', {
params: {
key: '7c4c08ad5e1dcbca9601f09fab939f68',
keywords: code || '',
extensions: 'base'
key: code
}
});
return data.data.districts[0].districts.map(v => ({
key: v.adcode,
value: v.name
}));
return data.data;
},
doConfirm5(data, key) {
this.title5 = `数据:${data.join(',')},key:${key.join(',')}`;
Expand All @@ -613,40 +600,60 @@ export default {
doConfirm6(data, key) {
this.title6 = `数据:${data.join(',')},key:${key.join(',')}`;
},
doChange6(weight, data, key) {
async doChange6(weight, data, key) {
const curKey = key[weight];
switch (weight) {
case 0:
this.loading6 = true;
this.get(curKey).then(res => {
let res;
try {
this.loading6 = true;
switch (weight) {
case 0:
res = await this.get(curKey);
if (res.length) {
this.get(res[0].key).then(inner => {
this.$refs.select6
.setColumnData([1, 2], [res, inner])
.then(([data, key]) => {
this.title6 = `数据:${data.join(',')},key:${key.join(',')}`;
this.loading6 = false;
});
});
const inner = await this.get(res[0].key);
this.$refs.select6
.setColumnData([1, 2], [res, inner])
.then(([data, key]) => {
this.title6 = `数据:${data.join(',')},key:${key.join(',')}`;
this.loading6 = false;
});
} else {
this.$refs.select6.setColumnData(1, res).then(([data, key]) => {
this.title6 = `数据:${data.join(',')},key:${key.join(',')}`;
this.loading6 = false;
});
}
});
break;
case 1:
this.loading6 = true;
this.get(curKey).then(res => {
break;
case 1:
res = await this.get(curKey);
this.$refs.select6.setColumnData(2, res).then(([data, key]) => {
this.title6 = `数据:${data.join(',')},key:${key.join(',')}`;
this.loading6 = false;
});
});
break;
case 2:
break;
case 2:
this.title6 = `数据:${data.join(',')},key:${key.join(',')}`;
this.loading6 = false;
break;
}
} catch (error) {
this.$refs.select6.setData(this.data6).then(([data, key]) => {
this.title6 = `数据:${data.join(',')},key:${key.join(',')}`;
this.loading6 = false;
// eslint-disable-next-line
alert('接口出错,重新选择');
});
}
},
doSet6(i) {
switch (i) {
case 0:
// eslint-disable-next-line
console.log(this.$refs.select6.getData());
break;
case 1:
// eslint-disable-next-line
console.log(this.$refs.select6.getIndex());
break;
}
}
}
Expand Down
Loading

0 comments on commit d96cdc2

Please sign in to comment.