uview-pro 0.0.1

package/components/u-row/u-row.vue

@@ -0,0 +1,95 @@
+<template>
+    <view
+        class="u-row"
+        :style="{
+            alignItems: uAlignItem,
+            justifyContent: uJustify
+        }"
+        @tap="onClick"
+    >
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue';
+
+defineOptions({
+    name: 'u-row'
+});
+
+/**
+ * row 行布局
+ * @description 通过基础的 12 分栏，迅速简便地创建布局。
+ * @tutorial https://www.uviewui.com/components/layout.html#row-props
+ * @property {String|Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0）
+ * @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)）
+ * @property {String} align 垂直排列方式（默认center）
+ * @example <u-row gutter="16"></u-row>
+ */
+
+const emit = defineEmits<{ (e: 'click'): void }>();
+
+const props = defineProps({
+    /** 给col添加间距，左右边距各占一半 */
+    gutter: { type: [String, Number], default: 20 },
+    /** 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) */
+    justify: { type: String, default: 'start' },
+    /** 垂直对齐方式，可选值为top、center、bottom */
+    align: { type: String, default: 'center' },
+    /** 是否阻止事件传播 */
+    stop: { type: Boolean, default: true }
+});
+
+// 提供 gutter 给子组件 u-col 使用
+provide('u-row-gutter', props.gutter);
+
+/**
+ * 计算水平排列方式
+ * @returns {string}
+ */
+const uJustify = computed(() => {
+    if (props.justify === 'end' || props.justify === 'start') return 'flex-' + props.justify;
+    else if (props.justify === 'around' || props.justify === 'between') return 'space-' + props.justify;
+    else return props.justify;
+});
+
+/**
+ * 计算垂直对齐方式
+ * @returns {string}
+ */
+const uAlignItem = computed(() => {
+    if (props.align === 'top') return 'flex-start';
+    if (props.align === 'bottom') return 'flex-end';
+    else return props.align;
+});
+
+/**
+ * 点击事件
+ * @param e 事件对象
+ */
+function onClick(e: Event) {
+    // 触发 click 事件
+    emit('click');
+}
+</script>
+
+<style lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-row {
+    // 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
+    /* #ifndef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+    @include vue-flex;
+    /* #endif */
+    flex-wrap: wrap;
+}
+
+.u-row:after {
+    /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+    display: table;
+    clear: both;
+    content: '';
+    /* #endif */
+}
+</style>

package/components/u-row-notice/u-row-notice.vue

@@ -0,0 +1,273 @@
+<template>
+    <view v-if="props.show" class="u-notice-bar" :style="{ background: computeBgColor, padding: props.padding }" :class="[props.type ? `u-type-${props.type}-light-bg` : '']">
+        <view class="u-direction-row">
+            <view class="u-icon-wrap">
+                <u-icon class="u-left-icon" v-if="props.volumeIcon" name="volume-fill" :size="props.volumeSize" :color="computeColor"></u-icon>
+            </view>
+            <view class="u-notice-box" id="u-notice-box">
+                <view class="u-notice-content" id="u-notice-content" :style="{ animationDuration: animationDuration, animationPlayState: animationPlayState }">
+                    <text class="u-notice-text" @tap="click" :style="textStyle" :class="['u-type-' + props.type]">{{ showText }}</text>
+                </view>
+            </view>
+            <view class="u-icon-wrap">
+                <u-icon @click="getMore" class="u-right-icon" v-if="props.moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
+                <u-icon @click="close" class="u-right-icon" v-if="props.closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
+
+defineOptions({ name: 'u-row-notice' });
+
+/**
+ * u-row-notice 水平滚动通告栏
+ * @property {Array} list 显示的内容，数组
+ * @property {String} type 显示的主题，success|error|primary|info|warning|none
+ * @property {Boolean} volumeIcon 是否显示左侧的音量图标
+ * @property {Boolean} moreIcon 是否显示右侧的右箭头图标
+ * @property {Boolean} closeIcon 是否显示右侧的关闭图标
+ * @property {Boolean} autoplay 是否自动播放
+ * @property {String} color 文字颜色，各图标也会使用文字颜色
+ * @property {String} bgColor 背景颜色
+ * @property {Boolean} show 是否显示
+ * @property {String|Number} fontSize 字体大小，单位rpx
+ * @property {String|Number} volumeSize 音量喇叭的大小
+ * @property {String|Number} speed 水平滚动时的滚动速度，即每秒滚动多少rpx
+ * @property {String} playState 播放状态，play-播放，paused-暂停
+ * @property {String|Number} padding 通知的边距
+ */
+
+const props = defineProps({
+    /** 显示的内容，数组 */
+    list: {
+        type: Array as () => string[],
+        default: () => []
+    },
+    /** 显示的主题，success|error|primary|info|warning|none */
+    type: {
+        type: String,
+        default: 'warning'
+    },
+    /** 是否显示左侧的音量图标 */
+    volumeIcon: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示右侧的右箭头图标 */
+    moreIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示右侧的关闭图标 */
+    closeIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否自动播放 */
+    autoplay: {
+        type: Boolean,
+        default: true
+    },
+    /** 文字颜色，各图标也会使用文字颜色 */
+    color: {
+        type: String,
+        default: ''
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 是否显示 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /** 字体大小，单位rpx */
+    fontSize: {
+        type: [Number, String],
+        default: 26
+    },
+    /** 音量喇叭的大小 */
+    volumeSize: {
+        type: [Number, String],
+        default: 34
+    },
+    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
+    speed: {
+        type: [Number, String],
+        default: 160
+    },
+    /** 播放状态，play-播放，paused-暂停 */
+    playState: {
+        type: String,
+        default: 'play'
+    },
+    /** 通知的边距 */
+    padding: {
+        type: [Number, String],
+        default: '18rpx 24rpx'
+    }
+});
+
+const emit = defineEmits<{ (e: 'click'): void; (e: 'close'): void; (e: 'getMore'): void }>();
+const instance = getCurrentInstance();
+const textWidth = ref(0); // 滚动的文字宽度
+const animationDuration = ref('10s'); // 动画执行时间
+const animationPlayState = ref('paused'); // 动画的开始和结束执行
+const showText = ref(''); // 显示的文本
+
+/**
+ * 计算字体颜色，如果没有自定义的，就用uview主题颜色
+ */
+const computeColor = computed(() => {
+    if (props.color) return props.color;
+    // 如果是无主题，就默认使用content-color
+    else if (props.type === 'none') return '#606266';
+    else return props.type;
+});
+
+/**
+ * 文字内容的样式
+ */
+const textStyle = computed(() => {
+    const style: Record<string, any> = {};
+    if (props.color) style.color = props.color;
+    else if (props.type === 'none') style.color = '#606266';
+    style.fontSize = props.fontSize + 'rpx';
+    return style;
+});
+
+/**
+ * 计算背景颜色
+ */
+const computeBgColor = computed(() => {
+    if (props.bgColor) return props.bgColor;
+    else if (props.type === 'none') return 'transparent';
+});
+
+/**
+ * 初始化滚动宽度和动画
+ */
+function initSize() {
+    nextTick(() => {
+        uni.createSelectorQuery()
+            .in(instance?.proxy)
+            .select('#u-notice-content')
+            .boundingClientRect()
+            .exec(ret => {
+                textWidth.value = ret[0]?.width || 0;
+                // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
+                // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
+                animationDuration.value = `${textWidth.value / uni.upx2px(Number(props.speed))}s`;
+                // 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
+                animationPlayState.value = 'paused';
+                setTimeout(() => {
+                    if (props.playState === 'play' && props.autoplay) animationPlayState.value = 'running';
+                }, 10);
+            });
+    });
+}
+
+watch(
+    () => props.list,
+    val => {
+        showText.value = val.join('，');
+        initSize();
+    },
+    { immediate: true }
+);
+
+watch(
+    () => props.playState,
+    val => {
+        animationPlayState.value = val === 'play' ? 'running' : 'paused';
+    }
+);
+
+watch(
+    () => props.speed,
+    () => {
+        initSize();
+    }
+);
+
+onMounted(() => {
+    initSize();
+});
+
+/**
+ * 点击通告栏
+ */
+function click() {
+    emit('click');
+}
+
+/**
+ * 点击关闭按钮
+ */
+function close() {
+    emit('close');
+}
+
+/**
+ * 点击更多箭头按钮
+ */
+function getMore() {
+    emit('getMore');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+.u-notice-bar {
+    padding: 18rpx 24rpx;
+    overflow: hidden;
+}
+.u-direction-row {
+    @include vue-flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.u-left-icon {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+}
+.u-notice-box {
+    flex: 1;
+    @include vue-flex;
+    overflow: hidden;
+    margin-left: 12rpx;
+}
+.u-right-icon {
+    margin-left: 12rpx;
+    display: inline-flex;
+    align-items: center;
+}
+.u-notice-content {
+    animation: u-loop-animation 10s linear infinite both;
+    text-align: right;
+    // 这一句很重要，为了能让滚动左右连接起来
+    padding-left: 100%;
+    @include vue-flex;
+    flex-wrap: nowrap;
+}
+.u-notice-text {
+    font-size: 26rpx;
+    word-break: keep-all;
+    white-space: nowrap;
+}
+@keyframes u-loop-animation {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+    100% {
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+</style>

package/components/u-search/u-search.vue

@@ -0,0 +1,298 @@
+<template>
+    <view
+        class="u-search"
+        @tap="clickHandler"
+        :style="{
+            margin: margin
+        }"
+    >
+        <view
+            class="u-content"
+            :style="{
+                backgroundColor: bgColor,
+                borderRadius: shape == 'round' ? '100rpx' : '10rpx',
+                border: borderStyle,
+                height: height + 'rpx'
+            }"
+        >
+            <view class="u-icon-wrap">
+                <u-icon class="u-clear-icon" :size="30" :name="searchIcon" :color="searchIconColor ? searchIconColor : color"></u-icon>
+            </view>
+            <input
+                confirm-type="search"
+                @blur="blur"
+                :value="modelValue"
+                @confirm="search"
+                @input="inputChange"
+                :disabled="disabled"
+                @focus="getFocus"
+                :focus="focus"
+                :maxlength="maxlength"
+                placeholder-class="u-placeholder-class"
+                :placeholder="placeholder"
+                :placeholder-style="`color: ${placeholderColor}`"
+                class="u-input"
+                type="text"
+                :style="[
+                    {
+                        textAlign: inputAlign,
+                        color: color,
+                        backgroundColor: bgColor
+                    },
+                    inputStyle
+                ]"
+            />
+            <view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear">
+                <u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon>
+            </view>
+        </view>
+        <view :style="[actionStyle]" class="u-action" :class="[showActionBtn || show ? 'u-action-active' : '']" @tap.stop.prevent="custom">{{ actionText }}</view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+
+defineOptions({ name: 'u-search' });
+
+/**
+ * search 搜索框
+ * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
+ * @tutorial https://www.uviewui.com/components/search.html
+ * @property {String} shape 搜索框形状，round-圆形，square-方形（默认round）
+ * @property {String} bg-color 搜索框背景颜色（默认#f2f2f2）
+ * @property {String} border-color 边框颜色，配置了颜色，才会有边框
+ * @property {String} placeholder 占位文字内容（默认“请输入关键字”）
+ * @property {Boolean} clearabled 是否启用清除控件（默认true）
+ * @property {Boolean} focus 是否自动获得焦点（默认false）
+ * @property {Boolean} show-action 是否显示右侧控件（默认true）
+ * @property {String} action-text 右侧控件文字（默认“搜索”）
+ * @property {Object} action-style 右侧控件的样式，对象形式
+ * @property {String} input-align 输入框内容水平对齐方式（默认left）
+ * @property {Object} input-style 自定义输入框样式，对象形式
+ * @property {Boolean} disabled 是否启用输入框（默认false）
+ * @property {String} search-icon-color 搜索图标的颜色，默认同输入框字体颜色
+ * @property {String} color 输入框字体颜色（默认#606266）
+ * @property {String} placeholder-color placeholder的颜色（默认#909399）
+ * @property {String} search-icon 输入框左边的图标，可以为uView图标名称或图片路径
+ * @property {String} margin 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"
+ * @property {Boolean} animation 是否开启动画，见上方说明（默认false）
+ * @property {String} value 输入框初始值
+ * @property {String | Number} maxlength 输入框最大能输入的长度，-1为不限制长度
+ * @property {Boolean} input-style input输入框的样式，可以定义文字颜色，大小等，对象形式
+ * @property {String | Number} height 输入框高度，单位rpx（默认64）
+ * @event {Function} change 输入框内容发生变化时触发
+ * @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
+ * @event {Function} custom 用户点击右侧控件时触发
+ * @event {Function} clear 用户点击清除按钮时触发
+ * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
+ */
+
+const props = defineProps({
+    /** 搜索框形状，round-圆形，square-方形 */
+    shape: { type: String, default: 'round' },
+    /** 搜索框背景色，默认值#f2f2f2 */
+    bgColor: { type: String, default: '#f2f2f2' },
+    /** 占位提示文字 */
+    placeholder: { type: String, default: '请输入关键字' },
+    /** 是否启用清除控件 */
+    clearabled: { type: Boolean, default: true },
+    /** 是否自动聚焦 */
+    focus: { type: Boolean, default: false },
+    /** 是否在搜索框右侧显示取消按钮 */
+    showAction: { type: Boolean, default: true },
+    /** 右边控件的样式 */
+    actionStyle: { type: Object, default: () => ({}) },
+    /** 取消按钮文字 */
+    actionText: { type: String, default: '搜索' },
+    /** 输入框内容对齐方式，可选值为 left|center|right */
+    inputAlign: { type: String, default: 'left' },
+    /** 是否启用输入框 */
+    disabled: { type: Boolean, default: false },
+    /** 开启showAction时，是否在input获取焦点时才显示 */
+    animation: { type: Boolean, default: false },
+    /** 边框颜色，只要配置了颜色，才会有边框 */
+    borderColor: { type: String, default: 'none' },
+    /** 输入框的初始化内容 */
+    modelValue: { type: String, default: '' },
+    /** 搜索框高度，单位rpx */
+    height: { type: [Number, String], default: 64 },
+    /** input输入框的样式，可以定义文字颜色，大小等，对象形式 */
+    inputStyle: { type: Object, default: () => ({}) },
+    /** 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档) */
+    maxlength: { type: [Number, String], default: '-1' },
+    /** 搜索图标的颜色，默认同输入框字体颜色 */
+    searchIconColor: { type: String, default: '' },
+    /** 输入框字体颜色 */
+    color: { type: String, default: '#606266' },
+    /** placeholder的颜色 */
+    placeholderColor: { type: String, default: '#909399' },
+    /** 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法 */
+    margin: { type: String, default: '0' },
+    /** 左边输入框的图标，可以为uView图标名称或图片路径 */
+    searchIcon: { type: String, default: 'search' }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'search', 'custom', 'clear', 'focus', 'blur', 'click']);
+
+// 绑定输入框的值
+const keyword = ref(props.modelValue);
+// 是否显示右边的清除图标
+const showClear = ref(false);
+// 控制右侧动画展开
+const show = ref(false);
+// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
+const focused = ref(props.focus);
+
+// 监听v-model和props.value变化
+watch(
+    () => props.modelValue,
+    nVal => {
+        keyword.value = nVal;
+    }
+);
+watch(keyword, nVal => {
+    emit('update:modelValue', nVal);
+    emit('change', nVal);
+});
+
+/**
+ * 是否显示右侧action按钮
+ */
+const showActionBtn = computed(() => {
+    if (!props.animation && props.showAction) return true;
+    else return false;
+});
+/**
+ * 边框样式
+ */
+const borderStyle = computed(() => {
+    if (props.borderColor) return `1px solid ${props.borderColor}`;
+    else return 'none';
+});
+
+/**
+ * 监听input事件获取输入框内容的变化
+ */
+function inputChange(e: any) {
+    keyword.value = e.detail.value;
+}
+/**
+ * 清空输入
+ * 也可以作为用户通过ref形式调用清空输入框内容
+ */
+function clear() {
+    keyword.value = '';
+    // 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)
+    nextTick(() => {
+        emit('clear');
+    });
+}
+/**
+ * 确定搜索
+ */
+function search(e: any) {
+    emit('search', e.detail.value);
+    try {
+        // #ifdef H5 || MP
+        uni.hideKeyboard();
+        // #endif
+    } catch (e) {}
+}
+/**
+ * 点击右边自定义按钮的事件
+ */
+function custom() {
+    emit('custom', keyword.value);
+    try {
+        // #ifdef H5 || MP
+        uni.hideKeyboard();
+        // #endif
+    } catch (e) {}
+}
+/**
+ * 获取焦点
+ */
+function getFocus() {
+    focused.value = true;
+    // 开启右侧搜索按钮展开的动画效果
+    if (props.animation && props.showAction) show.value = true;
+    emit('focus', keyword.value);
+}
+/**
+ * 失去焦点
+ */
+function blur() {
+    // 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+    // 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+    setTimeout(() => {
+        focused.value = false;
+    }, 100);
+    show.value = false;
+    emit('blur', keyword.value);
+}
+/**
+ * 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页
+ */
+function clickHandler() {
+    if (props.disabled) emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-search {
+    @include vue-flex;
+    align-items: center;
+    flex: 1;
+}
+
+.u-content {
+    @include vue-flex;
+    align-items: center;
+    padding: 0 18rpx;
+    flex: 1;
+}
+
+.u-clear-icon {
+    @include vue-flex;
+    align-items: center;
+}
+
+.u-input {
+    flex: 1;
+    font-size: 28rpx;
+    line-height: 1;
+    margin: 0 10rpx;
+    color: $u-tips-color;
+}
+
+.u-close-wrap {
+    width: 40rpx;
+    height: 100%;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.u-placeholder-class {
+    color: $u-tips-color;
+}
+
+.u-action {
+    font-size: 28rpx;
+    color: $u-main-color;
+    width: 0;
+    overflow: hidden;
+    transition: all 0.3s;
+    white-space: nowrap;
+    text-align: center;
+}
+
+.u-action-active {
+    width: 80rpx;
+    margin-left: 10rpx;
+}
+</style>