hy-app 0.5.2 → 0.5.4

package/components/hy-notice-bar/hy-row-notice.vue

@@ -1,139 +1,121 @@
 <template>
-  <view class="hy-notice" @tap="clickHandler">
-    <slot name="icon">
-      <view class="hy-notice__left-icon" v-if="icon">
-        <HyIcon :name="icon" :color="color" size="19"></HyIcon>
-      </view>
-    </slot>
-    <view class="hy-notice__content" ref="hy-notice__content">
-      <view
-        ref="hy-notice__content--text"
-        class="hy-notice__content--text"
-        :style="animationStyle"
-      >
-        <text
-          v-for="(item, index) in innerText"
-          :key="index"
-          :style="textStyle"
-          >{{ item }}</text
-        >
-      </view>
+    <view class="hy-notice" @tap="clickHandler">
+        <slot name="icon">
+            <view class="hy-notice__left-icon" v-if="icon">
+                <hy-icon :name="icon" :color="color" size="19"></hy-icon>
+            </view>
+        </slot>
+        <view class="hy-notice__content" ref="hy-notice__content">
+            <view
+                ref="hy-notice__content--text"
+                class="hy-notice__content--text"
+                :style="animationStyle"
+            >
+                <text v-for="(item, index) in innerText" :key="index" :style="textStyle">{{
+                    item
+                }}</text>
+            </view>
+        </view>
+        <view class="hy-notice__right-icon" v-if="['link', 'closable'].includes(mode)">
+            <hy-icon
+                v-if="mode === 'link'"
+                :name="IconConfig.RIGHT"
+                :size="17"
+                :color="color"
+            ></hy-icon>
+            <hy-icon
+                v-if="mode === 'closable'"
+                @click="close"
+                :name="IconConfig.CLOSE"
+                :size="16"
+                :color="color"
+            ></hy-icon>
+        </view>
     </view>
-    <view
-      class="hy-notice__right-icon"
-      v-if="['link', 'closable'].includes(mode)"
-    >
-      <HyIcon
-        v-if="mode === 'link'"
-        :name="IconConfig.RIGHT"
-        :size="17"
-        :color="color"
-      ></HyIcon>
-      <HyIcon
-        v-if="mode === 'closable'"
-        @click="close"
-        :name="IconConfig.CLOSE"
-        :size="16"
-        :color="color"
-      ></HyIcon>
-    </view>
-  </view>
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  watch,
-  toRefs,
-  computed,
-  type CSSProperties,
-  getCurrentInstance,
-} from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { addUnit, getRect, sleep, IconConfig } from "../../libs";
+import { ref, watch, toRefs, computed, type CSSProperties, getCurrentInstance } from 'vue'
+import noticeBarProps from './props'
+import { addUnit, getRect, sleep, IconConfig } from '../../libs'
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { text, speed, fontSize, color } = toRefs(props);
-const emit = defineEmits(["click", "close"]);
+const props = defineProps(noticeBarProps)
+const { text, speed, fontSize, color } = toRefs(props)
+const emit = defineEmits(['click', 'close'])
 
-const instance = getCurrentInstance();
-const animationDuration = ref<string>("0"); // 动画执行时间
-const animationPlayState = ref<string>("paused"); // 动画的开始和结束执行
-const initValue = ref<string>("");
+const instance = getCurrentInstance()
+const animationDuration = ref<string>('0') // 动画执行时间
+const animationPlayState = ref<string>('paused') // 动画的开始和结束执行
+const initValue = ref<string>('')
 
 watch(
-  () => text.value,
-  async (newValue) => {
-    initValue.value = Array.isArray(newValue) ? newValue.join("") : newValue;
-    let boxWidth = 0,
-      textWidth = 0;
-    // 进行一定的延时
-    await sleep();
-    // 查询盒子和文字的宽度
-    textWidth = (await getRect(".hy-notice__content--text", false, instance))
-      .width;
-    boxWidth = (await getRect(".hy-notice__content", false, instance)).width;
-    // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
-    // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
-    animationDuration.value = `${textWidth / speed.value}s`;
-    // 这里必须这样开始动画，否则在APP上动画速度不会改变
-    animationPlayState.value = "paused";
-    await sleep(10);
-    animationPlayState.value = "running";
-  },
-  { immediate: true },
-);
+    () => text.value,
+    async (newValue) => {
+        initValue.value = Array.isArray(newValue) ? newValue.join('') : newValue
+        let boxWidth = 0,
+            textWidth = 0
+        // 进行一定的延时
+        await sleep()
+        // 查询盒子和文字的宽度
+        textWidth = (await getRect('.hy-notice__content--text', false, instance)).width
+        boxWidth = (await getRect('.hy-notice__content', false, instance)).width
+        // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
+        // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
+        animationDuration.value = `${textWidth / speed.value}s`
+        // 这里必须这样开始动画，否则在APP上动画速度不会改变
+        animationPlayState.value = 'paused'
+        await sleep(10)
+        animationPlayState.value = 'running'
+    },
+    { immediate: true }
+)
 
 /**
  * @description 文字内容的样式
  * */
 const textStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {};
-  style.whiteSpace = "nowrap !important";
-  style.color = color.value;
-  style.fontSize = addUnit(fontSize.value);
-  return style;
-});
+    let style: CSSProperties = {}
+    style.whiteSpace = 'nowrap !important'
+    style.color = color.value
+    style.fontSize = addUnit(fontSize.value)
+    return style
+})
 /**
  * @description 动画的样式
  * */
 const animationStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {};
-  style.animationDuration = animationDuration.value;
-  style.animationPlayState = animationPlayState.value;
-  return style;
-});
+    let style: CSSProperties = {}
+    style.animationDuration = animationDuration.value
+    style.animationPlayState = animationPlayState.value
+    return style
+})
 // 内部对用户传入的数据进一步分割，放到多个text标签循环，否则如果用户传入的字符串很长（100个字符以上）
 // 放在一个text标签中进行滚动，在低端安卓机上，动画可能会出现抖动现象，需要分割到多个text中可解决此问题
 const innerText = computed(() => {
-  let result = [],
-    // 每组text标签的字符长度
-    len = 20;
-  const textArr = initValue.value.split("");
-  for (let i = 0; i < textArr.length; i += len) {
-    // 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
-    result.push(textArr.slice(i, i + len).join(""));
-  }
-  return result;
-});
+    let result = [],
+        // 每组text标签的字符长度
+        len = 20
+    const textArr = initValue.value.split('')
+    for (let i = 0; i < textArr.length; i += len) {
+        // 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
+        result.push(textArr.slice(i, i + len).join(''))
+    }
+    return result
+})
 
-/**
- * @description 点击通告栏
- * */
+// 点击通告栏
 const clickHandler = (index: number) => {
-  emit("click", index);
-};
-/**
- * @description 点击关闭按钮
- * */
+    emit('click', index)
+}
+
+// 点击关闭按钮
 const close = () => {
-  emit("close");
-};
+    emit('close')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-notice-bar/index.scss

@@ -27,9 +27,6 @@
   @include e(right-icon) {
     margin-left: 5px;
     align-items: center;
-    :deep(.hy-icon) {
-      color: $hy-warning;
-    }
   }
 
   @include e(content) {
@@ -63,7 +60,8 @@
     @include m(item) {
       @include flex;
       align-items: center;
-      overflow: hidden;
+      height: 100%;
+      //overflow: hidden;
 
       @include e(text) {
         font-size: 14px;

package/components/hy-notice-bar/props.ts

@@ -32,7 +32,10 @@ const noticeBarProps = {
      * */
     mode: String,
     /** 文字颜色，各图标也会使用文字颜色 */
-    color: String,
+    color: {
+        type: String,
+        default: '#ff9900'
+    },
     /** 背景颜色 */
     bgColor: String,
     /** 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 */

package/components/hy-notice-bar/typing.d.ts

@@ -66,6 +66,8 @@ export default interface HyNoticeBarProps {
 }
 
 export interface INoticeBarEmits {
+    /** 点击执行函数 */
     (e: 'click', index: number): void
+    /** 关闭组件执行函数 */
     (e: 'close'): void
 }

package/components/hy-popup/hy-popup.vue

@@ -19,7 +19,6 @@
         >
             <!-- @click.stop不能去除，去除会导致居中模式下点击内容区域触发关闭弹窗 -->
             <view class="hy-popup__content" :style="[contentStyle]">
-                <!--        <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>-->
                 <slot></slot>
                 <view
                     v-if="closeable"

package/components/hy-qrcode/hy-qrcode.vue

@@ -36,8 +36,7 @@ export default {
 import { getCurrentInstance, ref, watch, nextTick } from 'vue'
 import type { IQrcodeEmits } from './typing'
 import QRCode from './qrcode.js'
-import { addUnit, error } from '../../libs'
-import qrCodeProps from './props'
+import { addUnit, error, random } from '../../libs'
 // 组件
 import HyLoading from '../hy-loading/hy-loading.vue'
 import HyImage from '../hy-image/hy-image.vue'
@@ -48,7 +47,73 @@ import HyImage from '../hy-image/hy-image.vue'
  */
 defineOptions({})
 
-const props = defineProps(qrCodeProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+    /** 实例ID字符串(如果有多个二维码组件必须设置不一样的cid) */
+    cid: {
+        type: String,
+        default: 'hy-qrcode-canvas_' + random(1, 1000)
+    },
+    /** 二维码大小 */
+    size: {
+        type: Number,
+        default: 200
+    },
+    /** 二维码内容 */
+    text: String,
+    /** 是否显示二维码 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /** 二维码背景色 */
+    background: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 二维码颜色 */
+    foreground: {
+        type: String,
+        default: '#000000'
+    },
+    /** 定位角点颜色 */
+    pdGround: {
+        type: String,
+        default: '#000000'
+    },
+    /** 是否是自定义组件 */
+    usingComponents: {
+        type: Boolean,
+        default: true
+    },
+    /** 容错级别 */
+    lv: {
+        type: Number,
+        default: 3
+    },
+    /** 二维码中间图标 */
+    icon: String,
+    /** 二维码中间图标大小 */
+    iconSize: {
+        type: Number,
+        default: 40
+    },
+    /** 显示加载状态 */
+    showLoading: {
+        type: Boolean,
+        default: true
+    },
+    /** 加载中提示语 */
+    loadingText: {
+        type: String,
+        default: '二维码生成中...'
+    },
+    /** 是否预览 */
+    allowPreview: {
+        type: Boolean,
+        default: false
+    }
+})
 const emit = defineEmits<IQrcodeEmits>()
 
 const instance = getCurrentInstance()
@@ -73,6 +138,7 @@ const initQrCode = () => {
             image: props.icon, // 二维码图标
             imageSize: props.iconSize, // 二维码图标大小
             cbResult: function (res: any) {
+                console.log(res)
                 // 生成二维码的回调
                 _result(res)
             }

package/components/hy-qrcode/index.scss

@@ -7,9 +7,9 @@
 
     @include m(canvas) {
       position: fixed;
-      top: -99999rpx;
-      left: -99999rpx;
-      z-index: -99999;
+      // top: -99999rpx;
+      // left: -99999rpx;
+      // z-index: -99999;
       overflow: hidden;
     }