uview-pro 0.2.4 → 0.3.1

package/components/u-city-select/u-city-select.vue

@@ -1,264 +1,276 @@
-<template>
-    <u-popup
-        v-model="popupValue"
-        mode="bottom"
-        :popup="false"
-        :mask="true"
-        :closeable="true"
-        :safe-area-inset-bottom="true"
-        close-icon-color="#ffffff"
-        :z-index="uZIndex"
-        :maskCloseAble="props.maskCloseAble"
-        @close="close"
-    >
-        <u-tabs
-            v-if="popupValue"
-            :list="genTabsList"
-            :is-scroll="true"
-            :current="tabsIndex"
-            @change="tabsChange"
-            ref="tabs"
-        ></u-tabs>
-        <view class="area-box">
-            <view class="u-flex" :class="{ change: isChange }">
-                <!-- 省 -->
-                <view class="area-item">
-                    <view class="u-padding-10 u-bg-gray" style="height: 100%">
-                        <scroll-view :scroll-y="true" style="height: 100%">
-                            <u-cell-group>
-                                <u-cell-item
-                                    v-for="(item, index) in provincesList"
-                                    :title="item.label"
-                                    :arrow="false"
-                                    :index="index"
-                                    :key="index"
-                                    @click="provinceChange(index)"
-                                >
-                                    <template v-if="isChooseP && province === index" #right-icon>
-                                        <u-icon size="34" name="checkbox-mark"></u-icon>
-                                    </template>
-                                </u-cell-item>
-                            </u-cell-group>
-                        </scroll-view>
-                    </view>
-                </view>
-                <!-- 市 -->
-                <view class="area-item">
-                    <view class="u-padding-10 u-bg-gray" style="height: 100%">
-                        <scroll-view :scroll-y="true" style="height: 100%">
-                            <u-cell-group v-if="isChooseP">
-                                <u-cell-item
-                                    v-for="(item, index) in citys"
-                                    :title="item.label"
-                                    :arrow="false"
-                                    :index="index"
-                                    :key="index"
-                                    @click="cityChange(index)"
-                                >
-                                    <template v-if="isChooseC && city === index" #right-icon>
-                                        <u-icon size="34" name="checkbox-mark"></u-icon>
-                                    </template>
-                                </u-cell-item>
-                            </u-cell-group>
-                        </scroll-view>
-                    </view>
-                </view>
-                <!-- 区 -->
-                <view class="area-item">
-                    <view class="u-padding-10 u-bg-gray" style="height: 100%">
-                        <scroll-view :scroll-y="true" style="height: 100%">
-                            <u-cell-group v-if="isChooseC">
-                                <u-cell-item
-                                    v-for="(item, index) in areas"
-                                    :title="item.label"
-                                    :arrow="false"
-                                    :index="index"
-                                    :key="index"
-                                    @click="areaChange(index)"
-                                >
-                                    <template v-if="isChooseA && area === index" #right-icon>
-                                        <u-icon size="34" name="checkbox-mark"></u-icon>
-                                    </template>
-                                </u-cell-item>
-                            </u-cell-group>
-                        </scroll-view>
-                    </view>
-                </view>
-            </view>
-        </view>
-    </u-popup>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import provinces from '../../libs/util/province';
-import citysData from '../../libs/util/city';
-import areasData from '../../libs/util/area';
-import { CitySelectProps } from './types';
-
-defineOptions({
-    name: 'u-city-select'
-});
-
-/**
- * u-city-select 城市选择器
- * @description 用于选择省、市、区三级行政区域，支持回显和自定义初始值。
- * @property {Boolean} modelValue 控制弹窗显示与隐藏（v-model）
- * @property {Array} defaultRegion 默认选中的省市区名称数组，如 ['广东省', '广州市', '天河区']
- * @property {Array} areaCode 默认选中的省市区编码数组，如 ['440000', '440100', '440106']
- * @property {Boolean} maskCloseAble 是否允许点击遮罩关闭弹窗（默认 true）
- * @property {String|Number} zIndex 弹窗层级（默认 0，自动适配）
- * @event update:modelValue v-model 绑定值变化时触发
- * @event city-change 选择省市区后触发，返回选中的省市区对象
- * @example <u-city-select v-model="show" :defaultRegion="['广东省','广州市','天河区']" @city-change="onChange"></u-city-select>
- */
-const props = defineProps(CitySelectProps);
-
-// emits 定义
-const emit = defineEmits(['update:modelValue', 'city-change']);
-
-// 省市区选择相关响应式数据
-const cityValue = ref('');
-const isChooseP = ref(false); // 是否已选省
-const province = ref(0); // 省下标
-const provincesList = ref(provinces);
-const isChooseC = ref(false); // 是否已选市
-const city = ref(0); // 市下标
-const citys = ref(citysData[0]);
-const isChooseA = ref(false); // 是否已选区
-const area = ref(0); // 区下标
-const areas = ref(areasData[0][0]);
-const tabsIndex = ref(0);
-
-// v-model 双向绑定
-const popupValue = computed({
-    get: () => props.modelValue,
-    set: val => emit('update:modelValue', val)
-});
-
-// 是否切换到区级
-const isChange = computed(() => tabsIndex.value > 1);
-
-// 顶部 tab 列表
-const genTabsList = computed(() => {
-    const tabsList = [{ name: '请选择' }];
-    if (isChooseP.value) {
-        tabsList[0].name = provincesList.value[province.value].label;
-        tabsList[1] = { name: '请选择' };
-    }
-    if (isChooseC.value) {
-        tabsList[1].name = citys.value[city.value].label;
-        tabsList[2] = { name: '请选择' };
-    }
-    if (isChooseA.value) {
-        tabsList[2].name = areas.value[area.value].label;
-    }
-    return tabsList;
-});
-
-// z-index 计算
-const uZIndex = computed(() => (props.zIndex ? props.zIndex : (uni as any).$u?.zIndex?.popup || 1075));
-
-// 初始化选中项
-function init() {
-    if (props.areaCode.length === 3) {
-        setProvince('', props.areaCode[0]);
-        setCity('', props.areaCode[1]);
-        setArea('', props.areaCode[2]);
-    } else if (props.defaultRegion.length === 3) {
-        setProvince(props.defaultRegion[0], '');
-        setCity(props.defaultRegion[1], '');
-        setArea(props.defaultRegion[2], '');
-    }
-}
-
-// 选中省
-function setProvince(label = '', value = '') {
-    provincesList.value.forEach((v, k) => {
-        if (value ? v.value == value : v.label == label) {
-            provinceChange(k);
-        }
-    });
-}
-// 选中市
-function setCity(label = '', value = '') {
-    citys.value.forEach((v, k) => {
-        if (value ? v.value == value : v.label == label) {
-            cityChange(k);
-        }
-    });
-}
-// 选中区
-function setArea(label = '', value = '') {
-    areas.value.forEach((v, k) => {
-        if (value ? v.value == value : v.label == label) {
-            isChooseA.value = true;
-            area.value = k;
-        }
-    });
-}
-
-// 关闭弹窗
-function close() {
-    emit('update:modelValue', false);
-}
-// tab 切换
-function tabsChange(index: number) {
-    tabsIndex.value = index;
-}
-// 省点击
-function provinceChange(index: number) {
-    isChooseP.value = true;
-    isChooseC.value = false;
-    isChooseA.value = false;
-    province.value = index;
-    citys.value = citysData[index];
-    tabsIndex.value = 1;
-}
-// 市点击
-function cityChange(index: number) {
-    isChooseC.value = true;
-    isChooseA.value = false;
-    city.value = index;
-    areas.value = areasData[province.value][index];
-    tabsIndex.value = 2;
-}
-// 区点击
-function areaChange(index: number) {
-    isChooseA.value = true;
-    area.value = index;
-    const result = {
-        province: provincesList.value[province.value],
-        city: citys.value[city.value],
-        area: areas.value[area.value]
-    };
-    emit('city-change', result);
-    close();
-}
-
-// 挂载时初始化
-onMounted(init);
-</script>
-
-<style lang="scss">
-.area-box {
-    width: 100%;
-    overflow: hidden;
-    height: 800rpx;
-
-    > view {
-        width: 150%;
-        transition: transform 0.3s ease-in-out 0s;
-        transform: translateX(0);
-
-        &.change {
-            transform: translateX(-33.3333333%);
-        }
-    }
-
-    .area-item {
-        width: 33.3333333%;
-        height: 800rpx;
-    }
-}
-</style>
+<template>
+    <u-popup
+        v-model="popupValue"
+        :class="customClass"
+        :style="$u.toStyle(customStyle)"
+        mode="bottom"
+        :popup="false"
+        :mask="true"
+        :closeable="true"
+        :safe-area-inset-bottom="true"
+        close-icon-color="#ffffff"
+        :z-index="uZIndex"
+        :maskCloseAble="props.maskCloseAble"
+        @close="close"
+    >
+        <u-tabs
+            v-if="popupValue"
+            :list="genTabsList"
+            :is-scroll="true"
+            :current="tabsIndex"
+            @change="tabsChange"
+            ref="tabs"
+        ></u-tabs>
+        <view class="area-box">
+            <view class="u-flex" :class="{ change: isChange }">
+                <!-- 省 -->
+                <view class="area-item">
+                    <view class="u-padding-10 u-bg-gray" style="height: 100%">
+                        <scroll-view :scroll-y="true" style="height: 100%">
+                            <u-cell-group>
+                                <u-cell-item
+                                    v-for="(item, index) in provincesList"
+                                    :title="item.label"
+                                    :arrow="false"
+                                    :index="index"
+                                    :key="index"
+                                    @click="provinceChange(index)"
+                                >
+                                    <template v-if="isChooseP && province === index" #right-icon>
+                                        <u-icon size="34" name="checkbox-mark"></u-icon>
+                                    </template>
+                                </u-cell-item>
+                            </u-cell-group>
+                        </scroll-view>
+                    </view>
+                </view>
+                <!-- 市 -->
+                <view class="area-item">
+                    <view class="u-padding-10 u-bg-gray" style="height: 100%">
+                        <scroll-view :scroll-y="true" style="height: 100%">
+                            <u-cell-group v-if="isChooseP">
+                                <u-cell-item
+                                    v-for="(item, index) in citys"
+                                    :title="item.label"
+                                    :arrow="false"
+                                    :index="index"
+                                    :key="index"
+                                    @click="cityChange(index)"
+                                >
+                                    <template v-if="isChooseC && city === index" #right-icon>
+                                        <u-icon size="34" name="checkbox-mark"></u-icon>
+                                    </template>
+                                </u-cell-item>
+                            </u-cell-group>
+                        </scroll-view>
+                    </view>
+                </view>
+                <!-- 区 -->
+                <view class="area-item">
+                    <view class="u-padding-10 u-bg-gray" style="height: 100%">
+                        <scroll-view :scroll-y="true" style="height: 100%">
+                            <u-cell-group v-if="isChooseC">
+                                <u-cell-item
+                                    v-for="(item, index) in areas"
+                                    :title="item.label"
+                                    :arrow="false"
+                                    :index="index"
+                                    :key="index"
+                                    @click="areaChange(index)"
+                                >
+                                    <template v-if="isChooseA && area === index" #right-icon>
+                                        <u-icon size="34" name="checkbox-mark"></u-icon>
+                                    </template>
+                                </u-cell-item>
+                            </u-cell-group>
+                        </scroll-view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </u-popup>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-city-select',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import provinces from '../../libs/util/province';
+import citysData from '../../libs/util/city';
+import areasData from '../../libs/util/area';
+import { CitySelectProps } from './types';
+import { $u } from '../..';
+
+/**
+ * u-city-select 城市选择器
+ * @description 用于选择省、市、区三级行政区域，支持回显和自定义初始值。
+ * @property {Boolean} modelValue 控制弹窗显示与隐藏（v-model）
+ * @property {Array} defaultRegion 默认选中的省市区名称数组，如 ['广东省', '广州市', '天河区']
+ * @property {Array} areaCode 默认选中的省市区编码数组，如 ['440000', '440100', '440106']
+ * @property {Boolean} maskCloseAble 是否允许点击遮罩关闭弹窗（默认 true）
+ * @property {String|Number} zIndex 弹窗层级（默认 0，自动适配）
+ * @event update:modelValue v-model 绑定值变化时触发
+ * @event city-change 选择省市区后触发，返回选中的省市区对象
+ * @example <u-city-select v-model="show" :defaultRegion="['广东省','广州市','天河区']" @city-change="onChange"></u-city-select>
+ */
+const props = defineProps(CitySelectProps);
+
+// emits 定义
+const emit = defineEmits(['update:modelValue', 'city-change']);
+
+// 省市区选择相关响应式数据
+const cityValue = ref('');
+const isChooseP = ref(false); // 是否已选省
+const province = ref(0); // 省下标
+const provincesList = ref(provinces);
+const isChooseC = ref(false); // 是否已选市
+const city = ref(0); // 市下标
+const citys = ref(citysData[0]);
+const isChooseA = ref(false); // 是否已选区
+const area = ref(0); // 区下标
+const areas = ref(areasData[0][0]);
+const tabsIndex = ref(0);
+
+// v-model 双向绑定
+const popupValue = computed({
+    get: () => props.modelValue,
+    set: val => emit('update:modelValue', val)
+});
+
+// 是否切换到区级
+const isChange = computed(() => tabsIndex.value > 1);
+
+// 顶部 tab 列表
+const genTabsList = computed(() => {
+    const tabsList = [{ name: '请选择' }];
+    if (isChooseP.value) {
+        tabsList[0].name = provincesList.value[province.value].label;
+        tabsList[1] = { name: '请选择' };
+    }
+    if (isChooseC.value) {
+        tabsList[1].name = citys.value[city.value].label;
+        tabsList[2] = { name: '请选择' };
+    }
+    if (isChooseA.value) {
+        tabsList[2].name = areas.value[area.value].label;
+    }
+    return tabsList;
+});
+
+// z-index 计算
+const uZIndex = computed(() => (props.zIndex ? props.zIndex : (uni as any).$u?.zIndex?.popup || 1075));
+
+// 初始化选中项
+function init() {
+    if (props.areaCode.length === 3) {
+        setProvince('', props.areaCode[0]);
+        setCity('', props.areaCode[1]);
+        setArea('', props.areaCode[2]);
+    } else if (props.defaultRegion.length === 3) {
+        setProvince(props.defaultRegion[0], '');
+        setCity(props.defaultRegion[1], '');
+        setArea(props.defaultRegion[2], '');
+    }
+}
+
+// 选中省
+function setProvince(label = '', value = '') {
+    provincesList.value.forEach((v, k) => {
+        if (value ? v.value == value : v.label == label) {
+            provinceChange(k);
+        }
+    });
+}
+// 选中市
+function setCity(label = '', value = '') {
+    citys.value.forEach((v, k) => {
+        if (value ? v.value == value : v.label == label) {
+            cityChange(k);
+        }
+    });
+}
+// 选中区
+function setArea(label = '', value = '') {
+    areas.value.forEach((v, k) => {
+        if (value ? v.value == value : v.label == label) {
+            isChooseA.value = true;
+            area.value = k;
+        }
+    });
+}
+
+// 关闭弹窗
+function close() {
+    emit('update:modelValue', false);
+}
+// tab 切换
+function tabsChange(index: number) {
+    tabsIndex.value = index;
+}
+// 省点击
+function provinceChange(index: number) {
+    isChooseP.value = true;
+    isChooseC.value = false;
+    isChooseA.value = false;
+    province.value = index;
+    citys.value = citysData[index];
+    tabsIndex.value = 1;
+}
+// 市点击
+function cityChange(index: number) {
+    isChooseC.value = true;
+    isChooseA.value = false;
+    city.value = index;
+    areas.value = areasData[province.value][index];
+    tabsIndex.value = 2;
+}
+// 区点击
+function areaChange(index: number) {
+    isChooseA.value = true;
+    area.value = index;
+    const result = {
+        province: provincesList.value[province.value],
+        city: citys.value[city.value],
+        area: areas.value[area.value]
+    };
+    emit('city-change', result);
+    close();
+}
+
+// 挂载时初始化
+onMounted(init);
+</script>
+
+<style lang="scss">
+.area-box {
+    width: 100%;
+    overflow: hidden;
+    height: 800rpx;
+
+    > view {
+        width: 150%;
+        transition: transform 0.3s ease-in-out 0s;
+        transform: translateX(0);
+
+        &.change {
+            transform: translateX(-33.3333333%);
+        }
+    }
+
+    .area-item {
+        width: 33.3333333%;
+        height: 800rpx;
+    }
+}
+</style>

package/components/u-col/types.ts

@@ -1,30 +1,32 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { AlignType, JustifyType } from '../../types/global';
-
-/**
- * u-col 布局单元格 Props
- * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
- * @property {String|Number} span 栅格占据的列数，总12等分（默认12）
- * @property {String|Number} offset 分栏左边偏移，计算方式与span相同（默认0）
- * @property {JustifyType} justify 水平排列方式，可选值为start、end、center、around、between（默认start）
- * @property {AlignType} align 垂直对齐方式，可选值为top、center、bottom（默认center）
- * @property {String} textAlign 文字对齐方式（默认left）
- * @property {Boolean} stop 是否阻止事件传播（默认true）
- */
-
-export const ColProps = {
-    /** 占父容器宽度的多少等分，总分为12份 */
-    span: { type: [Number, String] as PropType<number | string>, default: 12 },
-    /** 指定栅格左侧的间隔数(总12栏) */
-    offset: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 水平排列方式 */
-    justify: { type: String as PropType<JustifyType>, default: 'start' },
-    /** 垂直对齐方式 */
-    align: { type: String as PropType<AlignType>, default: 'center' },
-    /** 文字对齐方式 */
-    textAlign: { type: String, default: 'left' },
-    /** 是否阻止事件传播 */
-    stop: { type: Boolean, default: true }
-};
-
-export type ColProps = ExtractPropTypes<typeof ColProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { AlignType, JustifyType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * u-col 布局单元格 Props
+ * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+ * @property {String|Number} span 栅格占据的列数，总12等分（默认12）
+ * @property {String|Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+ * @property {JustifyType} justify 水平排列方式，可选值为start、end、center、around、between（默认start）
+ * @property {AlignType} align 垂直对齐方式，可选值为top、center、bottom（默认center）
+ * @property {String} textAlign 文字对齐方式（默认left）
+ * @property {Boolean} stop 是否阻止事件传播（默认true）
+ */
+
+export const ColProps = {
+    ...baseProps,
+    /** 占父容器宽度的多少等分，总分为12份 */
+    span: { type: [Number, String] as PropType<number | string>, default: 12 },
+    /** 指定栅格左侧的间隔数(总12栏) */
+    offset: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 水平排列方式 */
+    justify: { type: String as PropType<JustifyType>, default: 'start' },
+    /** 垂直对齐方式 */
+    align: { type: String as PropType<AlignType>, default: 'center' },
+    /** 文字对齐方式 */
+    textAlign: { type: String, default: 'left' },
+    /** 是否阻止事件传播 */
+    stop: { type: Boolean, default: true }
+};
+
+export type ColProps = ExtractPropTypes<typeof ColProps>;