jmash-core-mp 0.1.21 → 0.1.22

package/src/components/common/jmash-textarea.mpx

@@ -1,88 +1,88 @@
-<template>
-  <!-- 多行文本输入框 -->
-  <view class="jmash-textarea">
-    <textarea class="jmash-textarea-input" value="{{ textValue }}" placeholder="{{ placeholder }}"
-      placeholder-class="jmash-textarea-placeholder" maxlength="{{ maxlength }}" bind:input="getValue" />
-    <view wx:if="{{ maxlength > 0 }}" class="jmash-textarea-length"
-      style="{{ textValue.length === maxlength ? 'color: red' : '' }}">
-      {{ textValue.length }}/{{ maxlength }}
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { createComponent } from "@mpxjs/core";
-
-createComponent({
-  /**
-   * 组件的属性列表
-   */
-  properties: {
-    // 输入框的内容
-    textValue: {
-      type: String,
-      value: "",
-    },
-    // 输入框为空时占位符
-    placeholder: {
-      type: String,
-      value: "",
-    },
-    // 最大输入长度
-    maxlength: {
-      type: Number,
-      value: -1,
-    },
-  },
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-    // 获取值
-    getValue(e: any) {
-      this.triggerEvent("getValue", e.detail.value);
-    },
-  },
-});
-</script>
-
-<style lang="scss">
-@use "../../styles/index.scss" as *;
-
-.jmash-textarea {
-  background-color: $white-color;
-  border-radius: 10rpx;
-  padding: 30rpx;
-  box-sizing: border-box;
-  margin: 20rpx 30rpx 0;
-  width: 690rpx;
-
-  .jmash-textarea-input {
-    height: 200rpx;
-    width: 100%;
-    font-size: 28rpx;
-    font-weight: 400;
-    color: $font-color;
-  }
-
-  .jmash-textarea-placeholder {
-    font-size: 28rpx;
-    font-weight: 400;
-    color: $font-color-grey-opacity;
-  }
-
-  .jmash-textarea-length {
-    font-size: 24rpx;
-    font-weight: 400;
-    color: $font-color;
-    text-align: right;
-  }
-}
-</style>
-
-<script type="application/json">
-{
-  "component": true,
-  "usingComponents": {}
-}
-</script>
+<template>
+  <!-- 多行文本输入框 -->
+  <view class="jmash-textarea">
+    <textarea class="jmash-textarea-input" value="{{ textValue }}" placeholder="{{ placeholder }}"
+      placeholder-class="jmash-textarea-placeholder" maxlength="{{ maxlength }}" bind:input="getValue" />
+    <view wx:if="{{ maxlength > 0 }}" class="jmash-textarea-length"
+      style="{{ textValue.length === maxlength ? 'color: red' : '' }}">
+      {{ textValue.length }}/{{ maxlength }}
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { createComponent } from "@mpxjs/core";
+
+createComponent({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 输入框的内容
+    textValue: {
+      type: String,
+      value: "",
+    },
+    // 输入框为空时占位符
+    placeholder: {
+      type: String,
+      value: "",
+    },
+    // 最大输入长度
+    maxlength: {
+      type: Number,
+      value: -1,
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 获取值
+    getValue(e: any) {
+      this.triggerEvent("getValue", e.detail.value);
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+@use "../../styles/index.scss" as *;
+
+.jmash-textarea {
+  background-color: $white-color;
+  border-radius: 10rpx;
+  padding: 30rpx;
+  box-sizing: border-box;
+  margin: 20rpx 30rpx 0;
+  width: 690rpx;
+
+  .jmash-textarea-input {
+    height: 200rpx;
+    width: 100%;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: $font-color;
+  }
+
+  .jmash-textarea-placeholder {
+    font-size: 28rpx;
+    font-weight: 400;
+    color: $font-color-grey-opacity;
+  }
+
+  .jmash-textarea-length {
+    font-size: 24rpx;
+    font-weight: 400;
+    color: $font-color;
+    text-align: right;
+  }
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {}
+}
+</script>

package/src/components/common/jmash-top-navigation.mpx

@@ -1,204 +1,204 @@
-<template>
-    <!-- 顶部导航栏（支持滚动变色效果） -->
-    <view class="nav-bar" style="background-color: {{ style.color || (indexBg ? 'transparent' : '#ffffff' ) }};">
-        <view class="nav-bar-content"
-            style="color: {{ currentTitleColor }}; height: {{ style.height }}px;padding-top: {{ style.paddingTop }}px;">
-            <!-- 左侧区域 -->
-            <view class="nav-bar-left" slot="left">
-                <view class="left-icon" wx:if="{{ leftIcon }}"
-                    bind:tap="{{ leftIcon === 'home' ? 'handleIndex' : 'handleReturn' }}">
-                    <cube-icon type="{{ leftIcon === 'home' ? 'home' : 'back' }}" size="30rpx"
-                        color="{{ currentTitleColor }}" />
-                </view>
-                <slot />
-            </view>
-
-            <!-- 标题区域 -->
-            <view class="nav-bar-title" wx:if="{{ title }}">
-                {{ title }}
-            </view>
-
-            <!-- 右侧区域 -->
-            <view class="nav-bar-right">
-                <slot name="right" />
-            </view>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-import mpx, { createComponent, ref } from "@mpxjs/core";
-
-createComponent({
-    options: {
-        multipleSlots: true,
-    },
-    properties: {
-        // 左侧按钮（'home':首页图标, 'back':返回图标，不传或空字符串不显示）
-        leftIcon: {
-            type: String,
-            value: "",
-        },
-        // 标题
-        title: {
-            type: String,
-            value: "",
-        },
-        // 是否首页导航栏透明背景
-        indexBg: {
-            type: Boolean,
-            value: false,
-        },
-        // 是否开启字体渐变 白-黑（滚动变色时）
-        isGradient: {
-            type: Boolean,
-            value: false
-        },
-        // 字体的颜色
-        titleColor: {
-            type: String,
-            value: "#333",
-        }
-    },
-    setup() {
-        // 样式控制对象
-        const style = ref({
-            // 导航栏的高度
-            height: mpx.getMenuButtonBoundingClientRect().bottom - mpx.getMenuButtonBoundingClientRect().top,
-            // 导航栏顶部内边距
-            paddingTop: mpx.getMenuButtonBoundingClientRect().top,
-            // 背景透明色
-            color: "",
-        });
-        // 当前标题颜色
-        const currentTitleColor = ref("#333");
-
-        return {
-            style,
-            currentTitleColor,
-        }
-    },
-    lifetimes: {
-        attached() {
-            // 初始化
-            this.updateStyles();
-        }
-    },
-    methods: {
-        // 更新样式
-        updateStyles() {
-            // 标题颜色始终使用 titleColor（用户自定义或默认值）
-            this.currentTitleColor = this.titleColor;
-            // 透明背景模式
-            if (this.indexBg) {
-                this.style.color = "rgba(255, 255, 255, 0)";
-            }
-        },
-
-        // 返回上一级
-        handleReturn() {
-            mpx.navigateBack();
-        },
-
-        // 返回首页
-        handleIndex() {
-            mpx.reLaunch({ url: "/pages/tabbar/home" });
-        },
-
-        // 计算导航栏透明度（供父组件调用）
-        calculateOpacity(scrollTop: number) {
-            const defaultTitleColorWhite = "#fff";
-            const defaultTitleColorBlack = "#333";
-            let color: string;
-            // 计算标题颜色：回到顶部时使用自定义颜色，否则根据渐变模式切换
-            let titleColor = scrollTop === 0
-                ? this.titleColor
-                : (this.isGradient
-                    ? (scrollTop >= 80 ? defaultTitleColorBlack : defaultTitleColorWhite)
-                    : this.titleColor);
-
-            if (scrollTop === 0) {
-                color = "rgba(255, 255, 255, 0)";
-            } else if (scrollTop > 0 && scrollTop <= 10) {
-                color = "rgba(255, 255, 255, 0.1)";
-            } else if (scrollTop >= 10 && scrollTop < 20) {
-                color = "rgba(255, 255, 255, 0.2)";
-            } else if (scrollTop >= 20 && scrollTop < 30) {
-                color = "rgba(255, 255, 255, 0.3)";
-            } else if (scrollTop >= 30 && scrollTop < 40) {
-                color = "rgba(255, 255, 255, 0.4)";
-            } else if (scrollTop >= 40 && scrollTop < 50) {
-                color = "rgba(255, 255, 255, 0.5)";
-            } else if (scrollTop >= 50 && scrollTop < 60) {
-                color = "rgba(255, 255, 255, 0.6)";
-            } else if (scrollTop >= 60 && scrollTop < 70) {
-                color = "rgba(255, 255, 255, 0.7)";
-            } else if (scrollTop >= 70 && scrollTop < 80) {
-                color = "rgba(255, 255, 255, 0.8)";
-            } else {
-                color = "rgba(255, 255, 255, 1)";
-            }
-            this.style.color = color;
-            this.currentTitleColor = titleColor;
-        }
-    },
-})
-</script>
-
-<style lang="scss">
-@use "../../styles/index.scss" as *;
-
-.nav-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 99999;
-    transition: background-color 0.2s ease;
-}
-
-.nav-bar-content {
-    display: flex;
-    align-items: center;
-    padding: 0 20rpx;
-}
-
-.nav-bar-left {
-    display: flex;
-    align-items: center;
-    flex: 1;
-}
-
-.left-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10rpx;
-}
-
-.nav-bar-title {
-    flex: 2;
-    text-align: center;
-    font-size: $font-size;
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.nav-bar-right {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-}
-</style>
-
-<script type="application/json">
-{
-    "component": true,
-    "usingComponents": {
-        "cube-icon": "@mpxjs/mpx-cube-ui/src/components/icon/index"
-    }
-}
+<template>
+    <!-- 顶部导航栏（支持滚动变色效果） -->
+    <view class="nav-bar" style="background-color: {{ style.color || (indexBg ? 'transparent' : '#ffffff' ) }};">
+        <view class="nav-bar-content"
+            style="color: {{ currentTitleColor }}; height: {{ style.height }}px;padding-top: {{ style.paddingTop }}px;">
+            <!-- 左侧区域 -->
+            <view class="nav-bar-left" slot="left">
+                <view class="left-icon" wx:if="{{ leftIcon }}"
+                    bind:tap="{{ leftIcon === 'home' ? 'handleIndex' : 'handleReturn' }}">
+                    <cube-icon type="{{ leftIcon === 'home' ? 'home' : 'back' }}" size="30rpx"
+                        color="{{ currentTitleColor }}" />
+                </view>
+                <slot />
+            </view>
+
+            <!-- 标题区域 -->
+            <view class="nav-bar-title" wx:if="{{ title }}">
+                {{ title }}
+            </view>
+
+            <!-- 右侧区域 -->
+            <view class="nav-bar-right">
+                <slot name="right" />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+import mpx, { createComponent, ref } from "@mpxjs/core";
+
+createComponent({
+    options: {
+        multipleSlots: true,
+    },
+    properties: {
+        // 左侧按钮（'home':首页图标, 'back':返回图标，不传或空字符串不显示）
+        leftIcon: {
+            type: String,
+            value: "",
+        },
+        // 标题
+        title: {
+            type: String,
+            value: "",
+        },
+        // 是否首页导航栏透明背景
+        indexBg: {
+            type: Boolean,
+            value: false,
+        },
+        // 是否开启字体渐变 白-黑（滚动变色时）
+        isGradient: {
+            type: Boolean,
+            value: false
+        },
+        // 字体的颜色
+        titleColor: {
+            type: String,
+            value: "#333",
+        }
+    },
+    setup() {
+        // 样式控制对象
+        const style = ref({
+            // 导航栏的高度
+            height: mpx.getMenuButtonBoundingClientRect().bottom - mpx.getMenuButtonBoundingClientRect().top,
+            // 导航栏顶部内边距
+            paddingTop: mpx.getMenuButtonBoundingClientRect().top,
+            // 背景透明色
+            color: "",
+        });
+        // 当前标题颜色
+        const currentTitleColor = ref("#333");
+
+        return {
+            style,
+            currentTitleColor,
+        }
+    },
+    lifetimes: {
+        attached() {
+            // 初始化
+            this.updateStyles();
+        }
+    },
+    methods: {
+        // 更新样式
+        updateStyles() {
+            // 标题颜色始终使用 titleColor（用户自定义或默认值）
+            this.currentTitleColor = this.titleColor;
+            // 透明背景模式
+            if (this.indexBg) {
+                this.style.color = "rgba(255, 255, 255, 0)";
+            }
+        },
+
+        // 返回上一级
+        handleReturn() {
+            mpx.navigateBack();
+        },
+
+        // 返回首页
+        handleIndex() {
+            mpx.reLaunch({ url: "/pages/tabbar/home" });
+        },
+
+        // 计算导航栏透明度（供父组件调用）
+        calculateOpacity(scrollTop: number) {
+            const defaultTitleColorWhite = "#fff";
+            const defaultTitleColorBlack = "#333";
+            let color: string;
+            // 计算标题颜色：回到顶部时使用自定义颜色，否则根据渐变模式切换
+            let titleColor = scrollTop === 0
+                ? this.titleColor
+                : (this.isGradient
+                    ? (scrollTop >= 80 ? defaultTitleColorBlack : defaultTitleColorWhite)
+                    : this.titleColor);
+
+            if (scrollTop === 0) {
+                color = "rgba(255, 255, 255, 0)";
+            } else if (scrollTop > 0 && scrollTop <= 10) {
+                color = "rgba(255, 255, 255, 0.1)";
+            } else if (scrollTop >= 10 && scrollTop < 20) {
+                color = "rgba(255, 255, 255, 0.2)";
+            } else if (scrollTop >= 20 && scrollTop < 30) {
+                color = "rgba(255, 255, 255, 0.3)";
+            } else if (scrollTop >= 30 && scrollTop < 40) {
+                color = "rgba(255, 255, 255, 0.4)";
+            } else if (scrollTop >= 40 && scrollTop < 50) {
+                color = "rgba(255, 255, 255, 0.5)";
+            } else if (scrollTop >= 50 && scrollTop < 60) {
+                color = "rgba(255, 255, 255, 0.6)";
+            } else if (scrollTop >= 60 && scrollTop < 70) {
+                color = "rgba(255, 255, 255, 0.7)";
+            } else if (scrollTop >= 70 && scrollTop < 80) {
+                color = "rgba(255, 255, 255, 0.8)";
+            } else {
+                color = "rgba(255, 255, 255, 1)";
+            }
+            this.style.color = color;
+            this.currentTitleColor = titleColor;
+        }
+    },
+})
+</script>
+
+<style lang="scss">
+@use "../../styles/index.scss" as *;
+
+.nav-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99999;
+    transition: background-color 0.2s ease;
+}
+
+.nav-bar-content {
+    display: flex;
+    align-items: center;
+    padding: 0 20rpx;
+}
+
+.nav-bar-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.left-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10rpx;
+}
+
+.nav-bar-title {
+    flex: 2;
+    text-align: center;
+    font-size: $font-size;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.nav-bar-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+</style>
+
+<script type="application/json">
+{
+    "component": true,
+    "usingComponents": {
+        "cube-icon": "@mpxjs/mpx-cube-ui/src/components/icon/index"
+    }
+}
 </script>