uview-pro 0.0.1

package/components/u-car-keyboard/u-car-keyboard.vue

@@ -0,0 +1,236 @@
+<template>
+    <view class="u-keyboard" @touchmove.stop.prevent="() => {}">
+        <view class="u-keyboard-grids">
+            <view>
+                <view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
+                    <view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn" v-for="(item, j) in group" :key="j">
+                        {{ item }}
+                    </view>
+                </view>
+                <view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back" hover-class="u-hover-class">
+                    <u-icon :size="38" name="backspace" :bold="true"></u-icon>
+                </view>
+                <view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
+                    <text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
+                    /
+                    <text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { $u } from '../..';
+
+defineOptions({
+    name: 'u-car-keyboard'
+});
+
+/**
+ * u-car-keyboard 车牌号键盘
+ * @description 车牌号输入专用键盘，支持省份简称和字母数字切换，支持按键顺序打乱。
+ * @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
+ * @event {Function} change 按键被点击
+ * @event {Function} backspace 退格键被点击
+ */
+
+const props = defineProps({
+    /** 是否打乱键盘按键的顺序 */
+    random: { type: Boolean, default: false }
+});
+const emit = defineEmits(['change', 'backspace']);
+
+// 车牌输入时，abc=true为输入车牌号码，abc=false为输入省份中文简称
+const abc = ref(false);
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const areaList = computed(() => {
+    let data = [
+        '京',
+        '沪',
+        '粤',
+        '津',
+        '冀',
+        '豫',
+        '云',
+        '辽',
+        '黑',
+        '湘',
+        '皖',
+        '鲁',
+        '苏',
+        '浙',
+        '赣',
+        '鄂',
+        '桂',
+        '甘',
+        '晋',
+        '陕',
+        '蒙',
+        '吉',
+        '闽',
+        '贵',
+        '渝',
+        '川',
+        '青',
+        '琼',
+        '宁',
+        '挂',
+        '藏',
+        '港',
+        '澳',
+        '新',
+        '使',
+        '学'
+    ];
+    let tmp: string[][] = [];
+    // 打乱顺序
+    if (props.random) {
+        data = $u.randomArray(data);
+    }
+    tmp[0] = data.slice(0, 10);
+    tmp[1] = data.slice(10, 20);
+    tmp[2] = data.slice(20, 30);
+    tmp[3] = data.slice(30, 36);
+    return tmp;
+});
+
+const EngKeyBoardList = computed(() => {
+    let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M'];
+    let tmp: (string | number)[][] = [];
+    if (props.random) {
+        data = $u.randomArray(data);
+    }
+    tmp[0] = data.slice(0, 10);
+    tmp[1] = data.slice(10, 20);
+    tmp[2] = data.slice(20, 30);
+    tmp[3] = data.slice(30, 36);
+    return tmp;
+});
+
+/**
+ * 点击键盘按钮
+ */
+function carInputClick(i: number, j: number) {
+    let value = '';
+    // 不同模式，获取不同数组的值
+    if (abc.value) value = String(EngKeyBoardList.value[i][j]);
+    else value = String(areaList.value[i][j]);
+    emit('change', value);
+}
+
+/**
+ * 修改汽车牌键盘的输入模式，中文|英文
+ */
+function changeCarInputMode() {
+    abc.value = !abc.value;
+}
+
+/**
+ * 点击退格键
+ */
+function backspaceClick() {
+    emit('backspace');
+    if (timer) clearInterval(timer);
+    timer = setInterval(() => {
+        emit('backspace');
+    }, 250);
+}
+
+function clearTimer() {
+    if (timer) clearInterval(timer);
+    timer = null;
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-keyboard-grids {
+    background: rgb(215, 215, 217);
+    padding: 24rpx 0;
+    position: relative;
+}
+
+.u-keyboard-grids-item {
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.u-keyboard-grids-btn {
+    text-decoration: none;
+    width: 62rpx;
+    flex: 0 0 64rpx;
+    height: 80rpx;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    font-size: 36rpx;
+    text-align: center;
+    line-height: 80rpx;
+    background-color: #fff;
+    margin: 8rpx 5rpx;
+    border-radius: 8rpx;
+    box-shadow: 0 2rpx 0rpx #888992;
+    font-weight: 500;
+    justify-content: center;
+}
+
+.u-carinput-hover {
+    background-color: rgb(185, 188, 195) !important;
+}
+
+.u-keyboard-back {
+    position: absolute;
+    width: 96rpx;
+    right: 22rpx;
+    bottom: 32rpx;
+    height: 80rpx;
+    background-color: rgb(185, 188, 195);
+    @include vue-flex;
+    align-items: center;
+    border-radius: 8rpx;
+    justify-content: center;
+    box-shadow: 0 2rpx 0rpx #888992;
+}
+
+.u-keyboard-change {
+    font-size: 24rpx;
+    box-shadow: 0 2rpx 0rpx #888992;
+    position: absolute;
+    width: 96rpx;
+    left: 22rpx;
+    line-height: 1;
+    bottom: 32rpx;
+    height: 80rpx;
+    background-color: #ffffff;
+    @include vue-flex;
+    align-items: center;
+    border-radius: 8rpx;
+    justify-content: center;
+}
+
+.u-keyboard-change .inactive.zh {
+    transform: scale(0.85) translateY(-10rpx);
+}
+
+.u-keyboard-change .inactive.en {
+    transform: scale(0.85) translateY(10rpx);
+}
+
+.u-keyboard-change .active {
+    color: rgb(237, 112, 64);
+    font-size: 30rpx;
+}
+
+.u-keyboard-change .zh {
+    transform: translateY(-10rpx);
+}
+
+.u-keyboard-change .en {
+    transform: translateY(10rpx);
+}
+</style>

package/components/u-card/u-card.vue

@@ -0,0 +1,240 @@
+<template>
+    <view
+        class="u-card"
+        @tap.stop="onClick"
+        :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': Number(borderRadius) > 0 }"
+        :style="{
+            borderRadius: borderRadius + 'rpx',
+            margin: margin,
+            boxShadow: boxShadow
+        }"
+    >
+        <view
+            v-if="showHead"
+            class="u-card__head"
+            :style="[{ padding: padding + 'rpx' }, headStyle]"
+            :class="{
+                'u-border-bottom': headBorderBottom
+            }"
+            @tap="onHeadClick"
+        >
+            <view v-if="!slots.head" class="u-flex u-row-between">
+                <view class="u-card__head--left u-flex u-line-1" v-if="title">
+                    <image
+                        :src="thumb"
+                        class="u-card__head--left__thumb"
+                        mode="aspectFill"
+                        v-if="thumb"
+                        :style="{
+                            height: thumbWidth + 'rpx',
+                            width: thumbWidth + 'rpx',
+                            borderRadius: thumbCircle ? '100rpx' : '6rpx'
+                        }"
+                    ></image>
+                    <text
+                        class="u-card__head--left__title u-line-1"
+                        :style="{
+                            fontSize: titleSize + 'rpx',
+                            color: titleColor
+                        }"
+                    >
+                        {{ title }}
+                    </text>
+                </view>
+                <view class="u-card__head--right u-line-1" v-if="subTitle">
+                    <text
+                        class="u-card__head__title__text"
+                        :style="{
+                            fontSize: subTitleSize + 'rpx',
+                            color: subTitleColor
+                        }"
+                    >
+                        {{ subTitle }}
+                    </text>
+                </view>
+            </view>
+            <slot name="head" v-else />
+        </view>
+        <view @tap="onBodyClick" class="u-card__body" :style="[{ padding: padding + 'rpx' }, bodyStyle]">
+            <slot name="body" />
+        </view>
+        <view
+            v-if="showFoot"
+            class="u-card__foot"
+            @tap="onFootClick"
+            :style="[{ padding: slots.foot ? padding + 'rpx' : 0 }, footStyle]"
+            :class="{
+                'u-border-top': footBorderTop
+            }"
+        >
+            <slot name="foot" />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+defineOptions({
+    name: 'u-card'
+});
+
+/**
+ * card 卡片
+ * @description 卡片组件一般用于多个列表条目，且风格统一的场景
+ * @tutorial https://www.uviewui.com/components/card.html
+ * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
+ * @property {String} title 头部左边的标题
+ * @property {String} title-color 标题颜色（默认#303133）
+ * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
+ * @property {String} sub-title 头部右边的副标题
+ * @property {String} sub-title-color 副标题颜色（默认#909399）
+ * @property {String | Number} sub-title-size 副标题字体大小（默认26）
+ * @property {Boolean} border 是否显示边框（默认true）
+ * @property {String | Number} index 用于标识点击了第几个卡片
+ * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
+ * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
+ * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
+ * @property {Object} head-style 头部自定义样式，对象形式
+ * @property {Object} body-style 中部自定义样式，对象形式
+ * @property {Object} foot-style 底部自定义样式，对象形式
+ * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
+ * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
+ * @property {Boolean} show-head 是否显示头部（默认true）
+ * @property {Boolean} show-foot 是否显示尾部（默认true）
+ * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+ * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
+ * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
+ * @event {Function} click 整个卡片任意位置被点击时触发
+ * @event {Function} head-click 卡片头部被点击时触发
+ * @event {Function} body-click 卡片主体部分被点击时触发
+ * @event {Function} foot-click 卡片底部部分被点击时触发
+ * @example <u-card padding="30" title="card"></u-card>
+ */
+const props = defineProps({
+    /** 与屏幕两侧是否留空隙 */
+    full: { type: Boolean, default: false },
+    /** 标题 */
+    title: { type: String, default: '' },
+    /** 标题颜色 */
+    titleColor: { type: String, default: '#303133' },
+    /** 标题字体大小，单位rpx */
+    titleSize: { type: [Number, String], default: '30' },
+    /** 副标题 */
+    subTitle: { type: String, default: '' },
+    /** 副标题颜色 */
+    subTitleColor: { type: String, default: '#909399' },
+    /** 副标题字体大小，单位rpx */
+    subTitleSize: { type: [Number, String], default: '26' },
+    /** 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) */
+    border: { type: Boolean, default: true },
+    /** 用于标识点击了第几个 */
+    index: { type: [Number, String, Object], default: '' },
+    /** 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx" */
+    margin: { type: String, default: '30rpx' },
+    /** card卡片的圆角 */
+    borderRadius: { type: [Number, String], default: '16' },
+    /** 头部自定义样式，对象形式 */
+    headStyle: { type: Object, default: () => ({}) },
+    /** 主体自定义样式，对象形式 */
+    bodyStyle: { type: Object, default: () => ({}) },
+    /** 底部自定义样式，对象形式 */
+    footStyle: { type: Object, default: () => ({}) },
+    /** 头部是否下边框 */
+    headBorderBottom: { type: Boolean, default: true },
+    /** 底部是否有上边框 */
+    footBorderTop: { type: Boolean, default: true },
+    /** 标题左边的缩略图 */
+    thumb: { type: String, default: '' },
+    /** 缩略图宽高，单位rpx */
+    thumbWidth: { type: [String, Number], default: '60' },
+    /** 缩略图是否为圆形 */
+    thumbCircle: { type: Boolean, default: false },
+    /** 给head，body，foot的内边距 */
+    padding: { type: [String, Number], default: '30' },
+    /** 是否显示头部 */
+    showHead: { type: Boolean, default: true },
+    /** 是否显示尾部 */
+    showFoot: { type: Boolean, default: true },
+    /** 卡片外围阴影，字符串形式 */
+    boxShadow: { type: String, default: 'none' }
+});
+
+const emit = defineEmits(['click', 'head-click', 'body-click', 'foot-click']);
+const slots = useSlots();
+
+/**
+ * 整个卡片任意位置被点击时触发
+ */
+function onClick() {
+    emit('click', props.index);
+}
+/**
+ * 卡片头部被点击时触发
+ */
+function onHeadClick() {
+    emit('head-click', props.index);
+}
+/**
+ * 卡片主体部分被点击时触发
+ */
+function onBodyClick() {
+    emit('body-click', props.index);
+}
+/**
+ * 卡片底部部分被点击时触发
+ */
+function onFootClick() {
+    emit('foot-click', props.index);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-card {
+    position: relative;
+    overflow: hidden;
+    font-size: 28rpx;
+    background-color: #ffffff;
+    box-sizing: border-box;
+
+    &-full {
+        // 如果是与屏幕之间不留空隙，应该设置左右边距为0
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        width: 100%;
+    }
+
+    &--border:after {
+        border-radius: 16rpx;
+    }
+
+    &__head {
+        &--left {
+            color: $u-main-color;
+
+            &__thumb {
+                margin-right: 16rpx;
+            }
+
+            &__title {
+                max-width: 400rpx;
+            }
+        }
+
+        &--right {
+            color: $u-tips-color;
+            margin-left: 6rpx;
+        }
+    }
+
+    &__body {
+        color: $u-content-color;
+    }
+
+    &__foot {
+        color: $u-tips-color;
+    }
+}
+</style>

package/components/u-cell-group/u-cell-group.vue

@@ -0,0 +1,56 @@
+<template>
+    <view class="u-cell-box">
+        <view class="u-cell-title" v-if="title" :style="[titleStyle]">
+            {{ title }}
+        </view>
+        <view class="u-cell-item-box" :class="{ 'u-border-bottom u-border-top': border }">
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+    name: 'u-cell-group'
+});
+
+/**
+ * cellGroup 单元格父组件Group
+ * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
+ * @tutorial https://www.uviewui.com/components/cell.html
+ * @property {String} title 分组标题
+ * @property {Boolean} border 是否显示外边框（默认true）
+ * @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
+ * @example <u-cell-group title="设置喜好">
+ */
+
+defineProps({
+    /** 分组标题 */
+    title: { type: String, default: '' },
+    /** 是否显示分组list上下边框 */
+    border: { type: Boolean, default: true },
+    /** 分组标题的样式，对象形式，注意驼峰属性写法 */
+    /** 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'} */
+    titleStyle: { type: Object as () => Record<string, any>, default: () => ({}) }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-cell-box {
+    width: 100%;
+}
+
+.u-cell-title {
+    padding: 30rpx 32rpx 10rpx 32rpx;
+    font-size: 30rpx;
+    text-align: left;
+    color: $u-tips-color;
+}
+
+.u-cell-item-box {
+    background-color: #ffffff;
+    flex-direction: row;
+}
+</style>