Skip to content

Commit

Permalink
chore(picker): 优化代码风格与文档
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu committed Aug 25, 2023
1 parent 9e453c2 commit f035061
Show file tree
Hide file tree
Showing 12 changed files with 940 additions and 1,194 deletions.
306 changes: 146 additions & 160 deletions packages/nutui-taro-demo/src/dentry/pages/picker/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
@confirm="popupConfirm"
@cancel="show = false"
>
<nut-button block type="primary" style="margin-bottom: 20px">永远有效</nut-button>
<nut-button block type="primary" style="margin-bottom: 20px">底部按钮</nut-button>
</nut-picker>
</nut-popup>

Expand All @@ -36,185 +36,171 @@
<h2>异步获取</h2>
<nut-picker v-model="asyncValue" :columns="asyncColumns" title="城市选择" @confirm="confirm"></nut-picker>

<h2>自定义字段名</h2>
<nut-picker
:columns="customColumns"
:field-names="{
text: 'name',
value: 'code',
children: 'list'
}"
title="请选择城市"
@confirm="customCloumnConfirm"
>
</nut-picker>

<nut-toast :msg="msg" v-model:visible="showToast" type="text" />
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
import { PickerOption } from '@/packages/__VUE/picker/types';
export default {
props: {},
components: {
Header
const env = Taro.getEnv();
const selectedValue = ref(['ZheJiang']);
const selectedTime = ref(['Wednesday', 'Afternoon']);
const selectedCascader = ref(['FuJian', 'FuZhou', 'TaiJiang']);
const asyncValue = ref<string[]>();
const msg = ref();
const showToast = ref(false);
const popupValue = ref();
const columns = ref([
{ text: '南京', value: 'NanJing' },
{ text: '无锡', value: 'WuXi' },
{ text: '海北', value: 'ZangZu' },
{ text: '北京', value: 'BeiJing' },
{ text: '连云港', value: 'LianYunGang' },
{ text: '浙江', value: 'ZheJiang' },
{ text: '江苏', value: 'JiangSu' }
]);
const multipleColumns = ref([
[
{ text: '周一', value: 'Monday' },
{ text: '周二', value: 'Tuesday' },
{ text: '周三', value: 'Wednesday' },
{ text: '周四', value: 'Thursday' },
{ text: '周五', value: 'Friday' }
],
[
{ text: '上午', value: 'Morning' },
{ text: '下午', value: 'Afternoon' },
{ text: '晚上', value: 'Evening' }
]
]);
const cascaderColumns = ref([
{
text: '浙江',
value: 'ZheJiang',
children: [
{
text: '杭州',
value: 'HangZhou',
children: [
{ text: '西湖区', value: 'XiHu' },
{ text: '余杭区', value: 'YuHang' }
]
},
{
text: '温州',
value: 'WenZhou',
children: [
{ text: '鹿城区', value: 'LuCheng' },
{ text: '瓯海区', value: 'OuHai' }
]
}
]
},
setup() {
const env = Taro.getEnv();
const selectedValue = ref(['ZheJiang']);
const selectedTime = ref(['Wednesday', 'Afternoon']);
const selectedCascader = ref(['FuJian', 'FuZhou', 'TaiJiang']);
const asyncValue = ref<string[]>();
const msg = ref();
const showToast = ref(false);
const popupValue = ref();
const columns = ref([
{ text: '南京市', value: 'NanJing' },
{ text: '无锡市', value: 'WuXi' },
{ text: '海北藏族自治区', value: 'ZangZu' },
{ text: '北京市', value: 'BeiJing' },
{ text: '连云港市', value: 'LianYunGang' },
{ text: '浙江市', value: 'ZheJiang' },
{ text: '江苏市', value: 'JiangSu' }
]);
const multipleColumns = ref([
[
{ text: '周一', value: 'Monday' },
{ text: '周二', value: 'Tuesday' },
{ text: '周三', value: 'Wednesday' },
{ text: '周四', value: 'Thursday' },
{ text: '周五', value: 'Friday' }
],
[
{ text: '上午', value: 'Morning' },
{ text: '下午', value: 'Afternoon' },
{ text: '晚上', value: 'Evening' }
]
]);
const cascaderColumns = ref([
{
text: '福建',
value: 'FuJian',
children: [
{
text: '浙江',
value: 'ZheJiang',
text: '福州',
value: 'FuZhou',
children: [
{
text: '杭州',
value: 'HangZhou',
children: [
{ text: '西湖区', value: 'XiHu' },
{ text: '余杭区', value: 'YuHang' }
]
},
{
text: '温州',
value: 'WenZhou',
children: [
{ text: '鹿城区', value: 'LuCheng' },
{ text: '瓯海区', value: 'OuHai' }
]
}
{ text: '鼓楼区', value: 'GuLou' },
{ text: '台江区', value: 'TaiJiang' }
]
},
{
text: '福建',
value: 'FuJian',
text: '厦门',
value: 'XiaMen',
children: [
{
text: '福州',
value: 'FuZhou',
children: [
{ text: '鼓楼区', value: 'GuLou' },
{ text: '台江区', value: 'TaiJiang' }
]
},
{
text: '厦门',
value: 'XiaMen',
children: [
{ text: '思明区', value: 'SiMing' },
{ text: '海沧区', value: 'HaiCang' }
]
}
{ text: '思明区', value: 'SiMing' },
{ text: '海沧区', value: 'HaiCang' }
]
}
]);
const effectColumns = ref([
{ text: '2022-01', value: 'January' },
{ text: '2022-02', value: 'February' },
{ text: '2022-03', value: 'March' },
{ text: '2022-04', value: 'April' },
{ text: '2022-05', value: 'May' },
{ text: '2022-06', value: 'June' },
{ text: '2022-07', value: 'July' },
{ text: '2022-08', value: 'August' },
{ text: '2022-09', value: 'September' },
{ text: '2022-10', value: 'October' },
{ text: '2022-11', value: 'November' },
{ text: '2022-12', value: 'December' }
]);
const portColumns = ref([
]
}
]);
const asyncColumns = ref<PickerOption[]>([]);
const customColumns = ref([
{
name: '浙江',
code: 'ZheJiang',
list: [
{
text: '浙江',
value: 'ZheJiang',
children: []
name: '杭州',
code: 'HangZhou',
list: [
{ name: '西湖', code: 'XiHu' },
{ name: '余杭', code: 'YuHang' }
]
},
{
text: '福建',
value: 'FuJian',
children: []
name: '温州',
code: 'WenZhou',
list: [
{ name: '鹿城区', code: 'LuCheng' },
{ name: '瓯海区', code: 'OuHai' }
]
}
]);
const asyncColumns = ref<PickerOption[]>([]);
const show = ref(false);
const popupDesc = ref();
onMounted(() => {
setTimeout(() => {
asyncColumns.value = [
{ text: '南京市', value: 'NanJing' },
{ text: '无锡市', value: 'WuXi' },
{ text: '海北藏族自治区', value: 'ZangZu' },
{ text: '北京市', value: 'BeiJing' },
{ text: '连云港市', value: 'LianYunGang' },
{ text: '浙江市', value: 'ZheJiang' },
{ text: '江苏市', value: 'JiangSu' }
];
asyncValue.value = ['ZangZu'];
}, 1000);
});
const confirm = ({ selectedValue, selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
showToast.value = true;
msg.value = selectedOptions.map((val: any) => val.text).join(',');
};
const change = ({ selectedValue }: { selectedValue: string[] }) => {
console.log(selectedValue);
};
const popupConfirm = ({ selectedValue, selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
popupDesc.value = selectedOptions.map((val: any) => val.text).join(',');
show.value = false;
};
return {
selectedValue,
selectedTime,
selectedCascader,
asyncValue,
columns,
show,
multipleColumns,
cascaderColumns,
confirm,
change,
asyncColumns,
effectColumns,
showToast,
portColumns,
popupConfirm,
popupDesc,
msg,
env,
popupValue
};
]
}
]);
const show = ref(false);
const popupDesc = ref();
onMounted(() => {
setTimeout(() => {
asyncColumns.value = [
{ text: '南京', value: 'NanJing' },
{ text: '无锡', value: 'WuXi' },
{ text: '海北', value: 'ZangZu' },
{ text: '北京', value: 'BeiJing' },
{ text: '连云港', value: 'LianYunGang' },
{ text: '浙江', value: 'ZheJiang' },
{ text: '江苏', value: 'JiangSu' }
];
asyncValue.value = ['ZangZu'];
}, 1000);
});
const confirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
showToast.value = true;
msg.value = selectedOptions.map((val: any) => val.text).join(',');
};
const change = ({ selectedValue }: { selectedValue: string[] }) => {
console.log(selectedValue);
};
const popupConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
popupDesc.value = selectedOptions.map((val: any) => val.text).join(',');
show.value = false;
};
const customCloumnConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
showToast.value = true;
msg.value = selectedOptions.map((val: any) => val.name).join(',');
};
</script>
9 changes: 7 additions & 2 deletions src/packages/__VUE/picker/Column.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,11 @@ export default create({
fieldNames: {
type: Object as PropType<Required<PickerFieldNames>>,
default: () => ({})
},
// 特殊环境判断
taro: {
type: Boolean,
defualt: false
}
},
Expand Down Expand Up @@ -134,8 +139,8 @@ export default create({
const onTouchStart = (event: TouchEvent) => {
touch.start(event);
if (moving.value) {
let dom = roller.value as any;
if (moving.value && !props.taro) {
const dom = roller.value as any;
const { transform } = window.getComputedStyle(dom);
if (props.threeDimensional) {
const circle = Math.floor(parseInt(touchDeg.value as string) / 360);
Expand Down
2 changes: 1 addition & 1 deletion src/packages/__VUE/picker/baseProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default {
},
threeDimensional: {
type: Boolean,
default: true
default: false
},
swipeDuration: {
type: [Number, String],
Expand Down
Loading

0 comments on commit f035061

Please sign in to comment.