hy-app 0.1.1

package/components/hy-button/hy-button.vue

@@ -0,0 +1,394 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <button
+    :hover-start-time="Number(hoverStartTime)"
+    :hover-stay-time="Number(hoverStayTime)"
+    :form-type="formType"
+    :open-type="openType"
+    :app-parameter="appParameter"
+    :hover-stop-propagation="hoverStopPropagation"
+    :send-message-title="sendMessageTitle"
+    :send-message-path="sendMessagePath"
+    :lang="lang"
+    :data-name="dataName"
+    :session-from="sessionFrom"
+    :send-message-img="sendMessageImg"
+    :show-message-card="showMessageCard"
+    @getphonenumber="getphonenumber"
+    @getuserinfo="getuserinfo"
+    @error="error"
+    @opensetting="opensetting"
+    @launchapp="launchapp"
+    @agreeprivacyauthorization="agreeprivacyauthorization"
+    :hover-class="!disabled && !loading ? 'hy-button--active' : ''"
+    class="hy-button hy-reset-button"
+    :style="[baseColor, customStyle]"
+    @tap="clickHandler"
+    :class="bemClass"
+  >
+    <template v-if="loading">
+      <hy-icon
+        :mode="loadingMode"
+        :is-rotate="true"
+        :name="IconConfig.LOADING"
+        :size="loadingSize * 1.15"
+        :color="loadingColor"
+      ></hy-icon>
+      <text
+        class="hy-button__loading-text"
+        :style="[{ fontSize: textSize + 'px' }]"
+        >{{ loadingText || text }}</text
+      >
+    </template>
+    <template v-else>
+      <hy-icon
+        v-if="icon"
+        :name="icon"
+        :color="iconColorCom"
+        :size="textSize * 1.35"
+        :customStyle="{ marginRight: '2px' }"
+      ></hy-icon>
+      <slot>
+        <text
+          class="hy-button__text"
+          :style="[{ fontSize: textSize + 'px' }]"
+          >{{ text }}</text
+        >
+      </slot>
+    </template>
+  </button>
+  <!-- #endif -->
+
+  <!-- #ifdef APP-NVUE -->
+  <view
+    :hover-start-time="Number(hoverStartTime)"
+    :hover-stay-time="Number(hoverStayTime)"
+    class="hy-button"
+    :hover-class="
+      !disabled && !loading && !color && (plain || type === 'info')
+        ? 'hy-button--active--plain'
+        : !disabled && !loading && !plain
+        ? 'hy-button--active'
+        : ''
+    "
+    @tap="clickHandler"
+    :class="bemClass"
+    :style="[baseColor, customStyle]"
+  >
+    <template v-if="loading">
+      <up-loading-icon
+        :mode="loadingMode"
+        :size="loadingSize * 1.15"
+        :color="loadingColor"
+      ></up-loading-icon>
+      <text
+        class="hy-button__loading-text"
+        :style="[nvueTextStyle]"
+        :class="[plain && `hy-button__text--plain--${type}`]"
+        >{{ loadingText || text }}</text
+      >
+    </template>
+    <template v-else>
+      <HyIcon
+        v-if="icon"
+        :name="icon"
+        :color="iconColorCom"
+        :size="textSize * 1.35"
+      ></HyIcon>
+      <text
+        class="hy-button__text"
+        :style="[
+          {
+            marginLeft: icon ? '2px' : 0
+          },
+          nvueTextStyle
+        ]"
+        :class="[plain && `hy-button__text--plain--${type}`]"
+        >{{ text }}</text
+      >
+    </template>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import { bem, throttle } from "../../utils";
+import defaultProps from "./props";
+import { ColorConfig, IconConfig } from "../../config";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import IProps from "./typing";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  disabled,
+  loading,
+  throttleTime,
+  stop,
+  size,
+  type,
+  plain,
+  color,
+  iconColor
+} = toRefs(props);
+const emit = defineEmits([
+  "click",
+  "getphonenumber",
+  "getuserinfo",
+  "error",
+  "opensetting",
+  "launchapp",
+  "agreeprivacyauthorization"
+]);
+
+const textColor = (ColorConfig as any)[type.value];
+
+/**
+ * @description 生成bem风格的类名
+ */
+const bemClass = computed(() => {
+  // this.bem为一个computed变量，在mixin中
+  if (!color.value) {
+    return bem(
+      "button",
+      props,
+      ["type", "shape", "size"],
+      ["disabled", "plain", "hairline"]
+    );
+  } else {
+    // 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
+    return bem(
+      "button",
+      props,
+      ["shape", "size"],
+      ["disabled", "plain", "hairline"]
+    );
+  }
+});
+
+const loadingColor = computed(() => {
+  if (plain.value) {
+    // 如果有设置color值，则用color值，否则使用type主题颜色
+    return color.value ? color.value : (ColorConfig as any)[type.value];
+  }
+  if (type.value === "info") {
+    return "#c9c9c9";
+  }
+  return "#fff";
+});
+
+const iconColorCom = computed((): string => {
+  // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
+  // u-icon的color能接受一个主题颜色的值
+  if (iconColor.value) return iconColor.value;
+  if (plain.value) {
+    return color.value ? color.value : type.value;
+  } else {
+    return type.value === "info" ? "#000000" : "#ffffff";
+  }
+});
+const baseColor = computed((): CSSProperties => {
+  let style: CSSProperties = {};
+  if (color.value) {
+    // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+    style.color = plain.value ? color.value : "white";
+    if (!plain.value) {
+      // 非镂空，背景色使用自定义的颜色
+      style["background-color"] = color.value;
+    }
+    if (color.value.indexOf("gradient") !== -1) {
+      // 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
+      // weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
+      // 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
+      style.borderTopWidth = 0;
+      style.borderRightWidth = 0;
+      style.borderBottomWidth = 0;
+      style.borderLeftWidth = 0;
+      if (!plain.value) {
+        style.backgroundImage = color.value;
+      }
+    } else {
+      // 非渐变色，则设置边框相关的属性
+      style.borderColor = color.value;
+      style.borderWidth = "1px";
+      style.borderStyle = "solid";
+    }
+  }
+  return style;
+});
+
+// nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
+const nvueTextStyle = computed((): CSSProperties => {
+  let style: CSSProperties = {};
+  // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+  if (type.value === "info") {
+    style.color = "#323233";
+  }
+  if (color.value) {
+    style.color = plain.value ? color.value : "white";
+  }
+  style.fontSize = textSize.value + "px";
+  return style;
+});
+/**
+ * @description 字体大小
+ * */
+const textSize = computed((): number => {
+  let fontSize = 14;
+  if (size.value === "large") fontSize = 16;
+  if (size.value === "normal") fontSize = 14;
+  if (size.value === "small") fontSize = 12;
+  if (size.value === "mini") fontSize = 10;
+  return fontSize;
+});
+
+const clickHandler = (e: any) => {
+  // 非禁止并且非加载中，才能点击
+  if (!disabled.value && !loading.value) {
+    // 进行节流控制，每this.throttle毫秒内，只在开始处执行
+    throttle(() => {
+      emit("click", e);
+    }, throttleTime.value);
+  }
+  // 是否阻止事件传播
+  stop.value && e.stopPropagation();
+};
+
+const getphonenumber = (e: any) => {
+  emit("getphonenumber", e);
+};
+const getuserinfo = (e: any) => {
+  emit("getuserinfo", e);
+};
+const error = (e: any) => {
+  emit("error", e);
+};
+const opensetting = (e: any) => {
+  emit("opensetting", e);
+};
+const launchapp = (e: any) => {
+  emit("launchapp", e);
+};
+const agreeprivacyauthorization = (e: any) => {
+  emit("agreeprivacyauthorization", e);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-button {
+  height: 40px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  @include flex;
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+
+  &__text {
+    font-size: 15px;
+  }
+
+  &__loading-text {
+    font-size: 15px;
+    margin-left: 4px;
+  }
+
+  &--large {
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    /* #endif */
+    height: 50px;
+    padding: 0 15px;
+  }
+
+  &--normal {
+    padding: 0 12px;
+    font-size: 14px;
+  }
+
+  &--small {
+    /* #ifndef APP-NVUE */
+    min-width: 60px;
+    /* #endif */
+    height: 80px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+
+  &--mini {
+    height: 22px;
+    font-size: 10px;
+    /* #ifndef APP-NVUE */
+    min-width: 50px;
+    /* #endif */
+    padding: 0 8px;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &--info {
+    color: #323233;
+    background-color: #fff;
+    border: 1px solid #ebedf0;
+  }
+
+  &--success {
+    color: #fff;
+    background-color: $hy-success;
+    border: 1px solid $hy-success;
+  }
+
+  &--primary {
+    color: #fff;
+    background-color: $hy-primary;
+    border: 1px solid $hy-primary;
+  }
+
+  &--error {
+    color: #fff;
+    background-color: $hy-error;
+    border: 1px solid $hy-error;
+  }
+
+  &--warning {
+    color: #fff;
+    background-color: $hy-warning;
+    border: 1px solid $hy-warning;
+  }
+
+  &--block {
+    @include flex;
+    width: 100%;
+  }
+
+  &--circle {
+    border-radius: 100px;
+  }
+
+  &--square {
+    border-radius: 3px;
+  }
+
+  &__icon {
+    min-width: 1em;
+    line-height: inherit !important;
+    vertical-align: top;
+  }
+
+  &--plain {
+    color: v-bind(textColor);
+    background-color: #fff;
+  }
+
+  &--hairline {
+    border-width: 0.5;
+  }
+}
+</style>

package/components/hy-button/props.ts

@@ -0,0 +1,36 @@
+import IProps from "./typing";
+import type { CSSProperties } from "vue";
+
+const defaultProps: IProps = {
+  hairline: false,
+  type: "info",
+  size: "normal",
+  shape: "square",
+  plain: false,
+  disabled: false,
+  loading: false,
+  loadingText: "",
+  loadingMode: "spinner",
+  loadingSize: 13,
+  openType: "",
+  formType: "",
+  appParameter: "",
+  hoverStopPropagation: true,
+  lang: "en",
+  sessionFrom: "",
+  sendMessageTitle: "",
+  sendMessagePath: "",
+  sendMessageImg: "",
+  showMessageCard: false,
+  dataName: "",
+  throttleTime: 0,
+  hoverStartTime: 0,
+  hoverStayTime: 200,
+  text: "",
+  icon: "",
+  iconColor: "",
+  color: "",
+  stop: true
+};
+
+export default defaultProps;

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

@@ -0,0 +1,125 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 是否显示按钮的细边框 (默认 true )
+   * */
+  hairline?: boolean;
+  /**
+   * @description 按钮的预置样式，info，primary，error，warning，success (默认 'info' )
+   * */
+  type?: HyApp.ThemeType;
+  /**
+   * @description 按钮尺寸，large，normal，mini （默认 normal）
+   * */
+  size?: "normal" | "large" | "small" | "mini";
+  /**
+   * @description 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 按钮是否镂空，背景色透明 （默认 false）
+   * */
+  plain?: boolean;
+  /**
+   * @description 是否禁用 （默认 false）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
+   * */
+  loading?: boolean;
+  /**
+   * @description 加载中提示文字
+   * */
+  loadingText?: string;
+  /**
+   * @description 加载状态图标类型 （默认 'spinner' ）
+   * */
+  loadingMode?: "spinner" | "text";
+  /**
+   * @description 加载图标大小 （默认 13 ）
+   * */
+  loadingSize?: number;
+  /**
+   * @description 开放能力，具体请看uniapp稳定关于button组件部分说明
+   * */
+  openType?: string;
+  /**
+   * @description 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+   * */
+  formType?: string;
+  /**
+   * @description 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
+   * */
+  appParameter?: string;
+  /**
+   * @description 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
+   * */
+  hoverStopPropagation?: boolean;
+  /**
+   * @description 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
+   * */
+  lang?: string;
+  /**
+   * @description 会话来源，openType="contact"时有效
+   * */
+  sessionFrom?: string;
+  /**
+   * @description 会话内消息卡片标题，openType="contact"时有效
+   * */
+  sendMessageTitle?: string;
+  /**
+   * @description 会话内消息卡片点击跳转小程序路径，openType="contact"时有效
+   * */
+  sendMessagePath?: string;
+  /**
+   * @description 会话内消息卡片图片，openType="contact"时有效
+   * */
+  sendMessageImg?: string;
+  /**
+   * @description 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
+   * */
+  showMessageCard?: boolean;
+  /**
+   * @description 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+   * */
+  dataName?: string;
+  /**
+   * @description 节流时间，一定时间内只能触发一次 （默认 0 )
+   * */
+  throttleTime?: number;
+  /**
+   * @description 按住后多久出现点击态，单位毫秒 （默认 0 )
+   * */
+  hoverStartTime?: number;
+  /**
+   * @description 手指松开后点击态保留时间，单位毫秒 （默认 200 )
+   * */
+  hoverStayTime?: number;
+  /**
+   * @description 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
+   * */
+  text?: string;
+  /**
+   * @description 按钮图标
+   * */
+  icon?: string | HyIconConfig;
+  /**
+   * @description 按钮图标颜色
+   * */
+  iconColor?: string;
+  /**
+   * @description 按钮颜色，支持传入linear-gradient渐变色
+   * */
+  color?: string;
+  /**
+   * @description 阻止事件冒泡
+   * */
+  stop?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * @note 类型问题
+   * */
+  customStyle?: CSSProperties;
+}