hy-app 0.2.13 → 0.2.15

package/components/hy-price/hy-price.vue

@@ -3,39 +3,86 @@
 -->
 
 <template>
-  <text class="hy-price" :style="priceStyle" @tap="handleClick">
+  <text :class="['hy-price', customClass]" :style="priceStyle" @tap="handleClick">
     <text class="hy-price__prefix">{{ symbol }}</text>
-    <text
-      class="hy-price__text"
-      :style="[{ 'font-size': addUnit(getPx(size) * ratio) }]"
-      >{{ priceOne[0] }}
+    <text class="hy-price__text" :style="[{ 'font-size': addUnit(getPx(size) * ratio) }]">
+      {{ priceOne[0] }}
     </text>
     <text class="hy-price__decimal">
-      {{ "." + priceOne[1].slice(0, num) }}
+      {{ '.' + priceOne[1].slice(0, num) }}
     </text>
   </text>
 </template>
 
 <script lang="ts">
+/**
+ * 业务组件,突出金额小数点前大，小数点后小
+ * @displayName hy-price
+ */
+defineOptions({})
 export default {
   name: 'hy-price',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit, getPx } from "../../utils";
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import { addUnit, getPx } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { text, color, weight, size, slant, customStyle } = toRefs(props);
-const emit = defineEmits(["click"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 传入金额值 */
+  text: String,
+  /** 金额符号 */
+  symbol: {
+    type: String,
+    default: '￥',
+  },
+  /** 比例大小 */
+  ratio: {
+    type: Number,
+    default: 1.4,
+  },
+  /** 保留小数点后几位数 */
+  num: {
+    type: Number,
+    default: 2,
+  },
+  /** 字体颜色 */
+  color: {
+    type: String,
+    default: '#FE3232',
+  },
+  /** 字体大小 */
+  size: {
+    type: Number,
+    default: 12,
+  },
+  /** 字体粗细 */
+  weight: {
+    type: Number,
+    default: 500,
+  },
+  /** 是否倾斜 */
+  slant: {
+    type: Boolean,
+    default: false,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { text, color, weight, size, slant, customStyle } = toRefs(props)
+const emit = defineEmits(['click'])
 
 /**
  * @description 价格整体样式
@@ -44,42 +91,42 @@ const priceStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     color: color.value,
     fontWeight: weight.value,
-    fontStyle: slant.value ? "oblique" : "",
+    fontStyle: slant.value ? 'oblique' : '',
     fontSize: addUnit(size.value),
-  };
+  }
 
-  return Object.assign(style, customStyle.value);
-});
+  return Object.assign(style, customStyle.value)
+})
 
 /**
  * @description 价格处理
  * */
 const priceOne = computed(() => {
-  let value = "";
-  if (typeof text.value !== "string") {
-    value = text.value.toString();
+  let value = ''
+  if (typeof text.value !== 'string') {
+    value = text.value.toString()
   } else {
-    value = text.value;
+    value = text.value
   }
   if (/\./g.test(value)) {
     if (Number(value)) {
-      return value.split(".");
+      return value.split('.')
     } else {
-      return ["0", "00"];
+      return ['0', '00']
     }
   } else {
-    return [value, "000000"];
+    return [value, '000000']
   }
-});
+})
 
 /**
  * @description 点击事件
  * */
 const handleClick = () => {
-  emit("click", text.value);
-};
+  emit('click', text.value)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-price/typing.d.ts

@@ -1,40 +1,40 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyPriceProps {
   /**
    * @description 传入金额值
    * */
-  text: string | number;
+  text: string | number
   /**
    * @description 金额符号（默认：￥）
    * */
-  symbol?: string;
+  symbol?: string
   /**
    * @description 比例大小（默认：1.4）
    * */
-  ratio?: number;
+  ratio?: number
   /**
    * @description 保留小数点后几位数（默认：2）
    * */
-  num?: number;
+  num?: number
   /**
    * @description 字体颜色（默认：#FE3232）
    * */
-  color?: string;
+  color?: string
   /**
    * @description 字体大小（默认：12）
    * */
-  size?: string | number;
+  size?: string | number
   /**
    * @description 字体粗细（默认：500）
    * */
-  weight?: number;
+  weight?: number
   /**
    * @description 是否倾斜（默认：false）
    * */
-  slant?: boolean;
+  slant?: boolean
   /**
    * @description 自定义样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

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

@@ -21,6 +21,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 根据提供的字符串前端JS生成二维码展示
+ * @displayName hy-qrcode
+ */
+defineOptions({})
 export default {
   name: 'hy-qrcode',
   options: {
@@ -33,8 +38,7 @@ export default {
 
 <script setup lang="ts">
 import { getCurrentInstance, toRefs, ref, onMounted } from 'vue'
-import defaultProps from './props'
-import type IProps from './typing'
+import type { IQrcodeEmits } from './typing'
 import QRCode from './qrcode.js'
 import { addUnit, error } from '../../utils'
 import { IconConfig } from '../../config'
@@ -43,9 +47,75 @@ import { IconConfig } from '../../config'
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 实例ID字符串(如果有多个二维码组件必须设置不一样的cid) */
+  cid: {
+    type: String,
+    default: 'hy-qrcode-canvas' + Math.random().toString(),
+  },
+  /** 二维码大小 */
+  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 { text, allowPreview } = toRefs(props)
-const emit = defineEmits(['result', 'preview', 'longPress'])
+const emit = defineEmits<IQrcodeEmits>()
 
 const instance = getCurrentInstance()
 const loading = ref(false)
@@ -106,7 +176,7 @@ const _saveCode = () => {
 /**
  * @description 预览
  * */
-const preview = (e) => {
+const preview = (e: Event) => {
   // 预览图片
   // console.log(this.result)
   if (allowPreview.value) {

package/components/hy-qrcode/typing.d.ts

@@ -1,64 +1,73 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyQrcodeProps {
   /**
    * @description 实例ID字符串(如果有多个二维码组件必须设置不一样的cid)
    * */
-  cid?: string;
+  cid?: string
   /**
    * @description 二维码大小
    * */
-  size?: string | number;
+  size?: string | number
   /**
    * @description 二维码内容
    * */
-  text: string;
+  text: string
   /**
    * @description 是否显示二维码
    * */
-  show?: boolean;
+  show?: boolean
   /**
    * @description 二维码背景色
    * */
-  background?: string;
+  background?: string
   /**
    * @description 二维码颜色
    * */
-  foreground?: string;
+  foreground?: string
   /**
    * @description 定位角点颜色
    * */
-  pdGround?: string;
+  pdGround?: string
   /**
    * @description 容错级别
    * */
-  lv?: number;
+  lv?: number
   /**
    * @description 是否是自定义组件
    * */
-  usingComponents?: boolean;
+  usingComponents?: boolean
   /**
    * @description 二维码中间图标
    * */
-  icon?: string;
+  icon?: string
   /**
    * @description 二维码中间图标大小
    * */
-  iconSize?: string | number;
+  iconSize?: string | number
   /**
    * @description 显示加载状态
    * */
-  showLoading?: boolean;
+  showLoading?: boolean
   /**
    * @description 加载中提示语
    * */
-  loadingText?: string;
+  loadingText?: string
   /**
    * @description 是否预览
    * */
-  allowPreview?: boolean;
+  allowPreview?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IQrcodeEmits {
+  /** 二维码生成成功 */
+  (e: 'result', res: any): void
+  /** 打开图片事件 */
+  (e: 'preview', res: string, event: Event): void
+  /** 长按事件 */
+  (e: 'longPress'): void
 }