hy-app 0.1.1

package/components/hy-icon/hy-icon.vue

@@ -0,0 +1,207 @@
+<template>
+  <view class="hy-icon" @tap="clickHandler" :class="[`hy-icon--${labelPos}`]">
+    <image
+      class="hy-icon__img"
+      v-if="isImg"
+      :src="name"
+      :mode="imgMode"
+      :style="[imgStyle, customStyle]"
+    ></image>
+    <text
+      v-else
+      class="hy-icon__icon"
+      :class="uClasses"
+      :style="[iconStyle, customStyle]"
+    ></text>
+    <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+    <text
+      v-if="label !== ''"
+      class="hy-icon__label"
+      :style="{
+        color: labelColor,
+        fontSize: addUnit(labelSize),
+        marginLeft: labelPos == 'right' ? addUnit(space) : 0,
+        marginTop: labelPos == 'bottom' ? addUnit(space) : 0
+      }"
+      >{{ label }}</text
+    >
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import { ColorConfig, IconConfig } from "../../config";
+import { addUnit } from "../../utils";
+import defaultProps from "./props";
+import IProps from "./typing";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  customPrefix,
+  name,
+  color,
+  size,
+  bold,
+  top,
+  width,
+  height,
+  stop,
+  index,
+  isRotate,
+  round
+} = toRefs(props);
+const emit = defineEmits(["click"]);
+
+const uClasses = computed(() => {
+  let classes = [];
+  classes.push(`${customPrefix.value}-${name.value}`);
+  classes.push("iconfont");
+  classes.push(customPrefix.value);
+  if (isRotate.value) classes.push("hy-rotate");
+  if (color.value)
+    // 主题色，通过类配置
+    classes.push("hy-icon__icon--" + color.value);
+  // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+  // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+  //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+  classes = classes.join(" ");
+  //#endif
+  return classes;
+});
+const iconStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  style = {
+    fontSize: addUnit(size.value),
+    lineHeight: addUnit(size.value),
+    fontWeight: bold.value ? "bold" : "normal",
+    // 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+    top: addUnit(top.value),
+    borderRadius: addUnit(round.value),
+    color: color.value
+      ? color.value
+      : name.value === IconConfig.LOADING
+      ? ColorConfig.primary
+      : "#606266"
+  };
+
+  return style;
+});
+
+/**
+ * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+ * */
+const isImg = computed(() => {
+  return name.value.indexOf("/") !== -1;
+});
+const imgStyle = computed((): CSSProperties => {
+  let style: CSSProperties = {};
+  // 如果设置width和height属性，则优先使用，否则使用size属性
+  style.width = width.value ? addUnit(width.value) : addUnit(size.value);
+  style.height = height.value ? addUnit(height.value) : addUnit(size.value);
+  style.borderRadius = addUnit(round.value);
+  return style;
+});
+
+/**
+ * @description 点击
+ * */
+const clickHandler = (e: any) => {
+  emit("click", index.value, e);
+  // 是否阻止事件冒泡
+  stop.value && e.stopPropagation();
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../libs/css/iconfont.css";
+@import "../../theme.scss";
+
+/* #ifndef APP-NVUE */
+// 非nvue下加载字体
+@font-face {
+  font-family: "uicon-iconfont";
+  src: url("https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf")
+    format("truetype");
+}
+
+/* #endif */
+
+.hy-icon {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+
+  &--left {
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  &--right {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &--top {
+    flex-direction: column-reverse;
+    justify-content: center;
+  }
+
+  &--bottom {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__icon {
+    position: relative;
+    @include flex;
+    align-items: center;
+
+    &--primary {
+      color: $hy-primary;
+    }
+
+    &--success {
+      color: $hy-success;
+    }
+
+    &--error {
+      color: $hy-error;
+    }
+
+    &--warning {
+      color: $hy-warning;
+    }
+
+    &--info {
+      color: $hy-info;
+    }
+  }
+
+  &__img {
+    /* #ifndef APP-NVUE */
+    height: auto;
+    will-change: transform;
+    /* #endif */
+  }
+
+  &__label {
+    /* #ifndef APP-NVUE */
+    line-height: 1;
+    /* #endif */
+  }
+}
+.hy-rotate {
+  animation: hy-rotate 1s infinite linear;
+  @keyframes hy-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+</style>

package/components/hy-icon/props.ts

@@ -0,0 +1,24 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  name: "",
+  color: "",
+  size: "16px",
+  bold: false,
+  index: "",
+  customPrefix: "hy-icon",
+  label: "",
+  labelPos: "right",
+  labelSize: "15px",
+  labelColor: "#606266",
+  space: "3px",
+  imgMode: "",
+  width: "",
+  height: "",
+  top: 0,
+  stop: false,
+  isRotate: false,
+  round: 0
+};
+
+export default defaultProps;

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

@@ -0,0 +1,80 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 图标名称，见示例图标集
+   * */
+  name: string | HyIconConfig;
+  /**
+   * @description 图标颜色
+   * */
+  color?: string;
+  /**
+   * @description 图标字体大小，单位px （默认 '16px' ）
+   * */
+  size?: string | number;
+  /**
+   * @description 是否显示粗体 （默认 false ）
+   * */
+  bold?: boolean;
+  /**
+   * @description 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+   * */
+  index?: string | number;
+  /**
+   * @description 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'hy-icon' ）
+   * */
+  customPrefix?: string;
+  /**
+   * @description 图标右侧的label文字
+   * */
+  label?: string;
+  /**
+   * @description label相对于图标的位置，只能right或bottom （默认 'right' ）
+   * */
+  labelPos?: "right" | "bottom";
+  /**
+   * @description label字体大小，单位px （默认 '15px' ）
+   * */
+  labelSize?: string | number;
+  /**
+   * @description 图标右侧的label文字颜色
+   * */
+  labelColor?: string;
+  /**
+   * @description label与图标的距离，单位px （默认 '3px' ）
+   * */
+  space?: string | number;
+  /**
+   * @description 图片的mode
+   * */
+  imgMode?: string;
+  /**
+   * @description 显示图片小图标时的宽度
+   * */
+  width?: string | number;
+  /**
+   * @description 显示图片小图标时的高度
+   * */
+  height?: string | number;
+  /**
+   * @description 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
+   * */
+  top?: number | string;
+  /**
+   * @description 是否阻止事件传播 （默认 false ）
+   * */
+  stop?: boolean;
+  /**
+   * @description 是否旋转 （默认 false ）
+   * */
+  isRotate?: boolean;
+  /**
+   * @description 图标圆角
+   * */
+  round?: string | number;
+  /**
+   * @description 自定义样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-input/hy-input.vue

@@ -0,0 +1,402 @@
+<template>
+  <view
+    :class="['hy-input', inputClass]"
+    :style="[wrapperStyle, borderStyle(focused)]"
+  >
+    <view class="hy-input__content">
+      <view
+        class="hy-input__content__prefix-icon"
+        v-if="prefixIcon || $slots.prefix"
+      >
+        <slot name="prefix">
+          <HyIcon
+            :name="prefixIcon"
+            size="18"
+            :customStyle="prefixIconStyle"
+          ></HyIcon>
+        </slot>
+      </view>
+      <view class="hy-input__content__field-wrapper" @tap="clickHandler">
+        <!-- 根据uni-app的input组件文档，H5和APP中只要声明了password参数(无论true还是false)，type均失效，此时
+					为了防止type=number时，又存在password属性，type无效，此时需要设置password为undefined
+				 -->
+        <input
+          ref="input-native"
+          class="hy-input__content__field-wrapper__field"
+          :style="[inputStyle]"
+          :type="type"
+          :focus="focus"
+          :cursor="cursor"
+          :value="innerValue"
+          :auto-blur="autoBlur"
+          :disabled="disabled || readonly"
+          :maxlength="maxlength"
+          :placeholder="placeholder || ''"
+          :placeholder-style="formatObject(placeholderStyle)"
+          :placeholder-class="placeholderClass"
+          :confirm-type="confirmType"
+          :confirm-hold="confirmHold"
+          :hold-keyboard="holdKeyboard"
+          :cursor-spacing="cursorSpacing"
+          :adjust-position="adjustPosition"
+          :selection-end="selectionEnd"
+          :selection-start="selectionStart"
+          :password="password || type === 'password' || false"
+          :ignoreCompositionEvent="ignoreCompositionEvent"
+          @input="onInput"
+          @blur="onBlur"
+          @focus="onFocus"
+          @confirm="onConfirm"
+          @keyboardheightchange="onkeyboardheightchange"
+          @nicknamereview="onnicknamereview"
+        />
+      </view>
+      <view
+        class="hy-input__content__clear"
+        v-if="isShowClear"
+        @click="onClear"
+      >
+        <HyIcon
+          :name="IconConfig.COLSE"
+          size="11"
+          color="#ffffff"
+          :customStyle="{ lineHeight: '12px' }"
+        ></HyIcon>
+      </view>
+      <view
+        class="hy-input__content__subfix-icon"
+        v-if="suffixIcon || $slots.suffix"
+      >
+        <slot name="suffix">
+          <HyIcon
+            :name="suffixIcon"
+            size="18"
+            :customStyle="suffixIconStyle"
+          ></HyIcon>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  CSSProperties,
+  inject,
+  nextTick,
+  ref,
+  toRefs,
+  watch,
+  getCurrentInstance
+} from "vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import { addUnit, formatObject, formValidate } from "../../utils";
+import defaultProps from "./props";
+import { ColorConfig, IconConfig } from "../../config";
+import IProps from "./typing";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  disabled,
+  disabledColor,
+  border,
+  color,
+  inputAlign,
+  customStyle,
+  fontSize,
+  readonly,
+  placeholderStyle
+} = toRefs(props);
+const emit = defineEmits([
+  "blur",
+  "focus",
+  "confirm",
+  "keyboardheightchange",
+  "nicknamereview",
+  "change",
+  "update:modelValue",
+  "clear"
+]);
+
+const instance = getCurrentInstance();
+// 清除操作
+const clearInput = ref<boolean>(false);
+// 输入框的值
+const innerValue = ref<string | number>("");
+// 是否处于获得焦点状态
+const focused = ref<boolean>(false);
+// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
+const firstChange = ref<boolean>(true);
+// value绑定值的变化是由内部还是外部引起的
+const changeFromInner = ref<boolean>(false);
+const innerFormatter = (value: string) => value;
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (changeFromInner.value || innerValue.value === newVal) {
+      changeFromInner.value = false; // 重要否则会出现双向绑定失效问题https://github.com/ijry/uview-plus/issues/419
+      return;
+    }
+    innerValue.value = newVal;
+    // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
+    if (firstChange.value === false && changeFromInner.value === false) {
+      valueChange(innerValue.value, true);
+    } else {
+      // 尝试调用up-form的验证方法
+      // if (!firstChange.value) formValidate(this, "change");
+    }
+    firstChange.value = false;
+    // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
+    changeFromInner.value = false;
+  },
+  { immediate: true }
+);
+
+/**
+ * @description 是否显示清除控件
+ * */
+const isShowClear = computed(() => {
+  const { clearable, readonly } = props;
+  return clearable && !readonly && !!focused.value && innerValue.value !== "";
+});
+/**
+ * @description 组件的类名
+ * */
+const inputClass = computed((): string => {
+  let classes: string[] = [],
+    { border, shape } = props;
+  border === "surround" &&
+    (classes = classes.concat(["hy-border", "hy-input--radius"]));
+  classes.push(`hy-input--${shape}`);
+  border === "bottom" &&
+    (classes = classes.concat(["hy-border-bottom", "hy-input--no-radius"]));
+  return classes.join(" ");
+});
+
+/**
+ * @description 组件的样式
+ * */
+const wrapperStyle = computed((): CSSProperties => {
+  const style: CSSProperties = {};
+  // 禁用状态下，被背景色加上对应的样式
+  // 无边框时，去除内边距
+  if (border.value === "none") {
+    style.padding = "0";
+  } else {
+    // 由于uni-app的iOS开发者能力有限，导致需要分开写才有效
+    style.paddingTop = "6px";
+    style.paddingBottom = "6px";
+    style.paddingLeft = "9px";
+    style.paddingRight = "9px";
+  }
+  if (disabled.value) {
+    style.backgroundColor = disabledColor.value;
+  }
+  return Object.assign(style, customStyle.value);
+});
+/**
+ * @description 输入框的样式
+ * */
+const inputStyle = computed((): CSSProperties => {
+  return {
+    color: color.value,
+    fontSize: addUnit(fontSize.value),
+    textAlign: inputAlign.value
+  };
+});
+
+/**
+ * @description 边框颜色
+ * */
+const borderStyle = computed(() => {
+  return (isFocus: boolean) => {
+    let style: CSSProperties = {};
+    if (isFocus) {
+      switch (border.value) {
+        case "surround":
+          style = { border: `1px solid ${ColorConfig.primary}` };
+          break;
+        case "bottom":
+          style = { borderBottom: `1px solid ${ColorConfig.primary}` };
+          break;
+        default:
+          break;
+      }
+    }
+    return style;
+  };
+});
+
+/**
+ * @description 当键盘输入时，触发input事件
+ */
+const onInput = (e: any) => {
+  let { value = "" } = e.detail || {};
+  // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
+  // console.log('onInput', value, this.innerValue)
+  innerValue.value = value;
+  nextTick(() => {
+    let formatValue = innerFormatter(value);
+    innerValue.value = formatValue;
+    valueChange(formatValue);
+  });
+};
+/**
+ * @description 输入框失去焦点时触发
+ * */
+const onBlur = (event: Event) => {
+  emit("blur", event.detail.value);
+  // H5端的blur会先于点击清除控件的点击click事件触发，导致focused
+  // 瞬间为false，从而隐藏了清除控件而无法被点击到
+  setTimeout(() => {
+    focused.value = false;
+  }, 150);
+};
+/**
+ * @description 输入框聚焦时触发
+ * */
+const onFocus = () => {
+  focused.value = true;
+  emit("focus");
+};
+
+/**
+ * @description 点击完成按钮时触发
+ * */
+const onConfirm = (event: string) => {
+  emit("confirm", innerValue.value);
+};
+/**
+ * 键盘高度发生变化的时候触发此事件
+ * 兼容性：微信小程序2.7.0+、App 3.1.0+
+ * */
+const onkeyboardheightchange = (event: any) => {
+  emit("keyboardheightchange", event);
+};
+const onnicknamereview = (event: any) => {
+  emit("nicknamereview", event);
+};
+/**
+ * 内容发生变化，进行处理
+ */
+const valueChange = (value: string | number, isOut = false) => {
+  if (clearInput.value) {
+    innerValue.value = "";
+    clearInput.value = false;
+  }
+  nextTick(() => {
+    if (!isOut || clearInput.value) {
+      // 标识value值的变化是由内部引起的
+      changeFromInner.value = true;
+      emit("change", value);
+
+      emit("update:modelValue", value);
+    }
+  });
+};
+/**
+ * @description 点击清除控件
+ */
+const onClear = () => {
+  clearInput.value = true;
+  innerValue.value = "";
+  nextTick(() => {
+    valueChange("");
+    emit("clear");
+  });
+};
+/**
+ * 在安卓nvue上，事件无法冒泡
+ * 在某些时间，我们希望监听u-from-item的点击事件，此时会导致点击u-form-item内的u-input后
+ * 无法触发u-form-item的点击事件，这里通过手动调用u-form-item的方法进行触发
+ */
+const clickHandler = () => {
+  if (disabled.value || readonly.value) {
+    uni.hideKeyboard();
+  }
+  // #ifdef APP-NVUE
+  if (os() === "android") {
+    const formItem = $parent.call(this, "u-form-item");
+    if (formItem) {
+      formItem.clickHandler();
+    }
+  }
+  // #endif
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-input {
+  @include flex(row);
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+
+  &--radius,
+  &--square {
+    border-radius: 4px;
+  }
+
+  &--no-radius {
+    border-radius: 0;
+  }
+
+  &--circle {
+    border-radius: 100px;
+  }
+
+  &__content {
+    flex: 1;
+    @include flex(row);
+    align-items: center;
+    justify-content: space-between;
+
+    &__field-wrapper {
+      position: relative;
+      @include flex(row);
+      margin: 0;
+      flex: 1;
+
+      &__field {
+        line-height: 26px;
+        text-align: left;
+        color: $hy-text-color;
+        height: 24px;
+        font-size: 15px;
+        flex: 1;
+      }
+    }
+
+    &__clear {
+      width: 20px;
+      height: 20px;
+      border-radius: 100px;
+      background-color: #c6c7cb;
+      @include flex(row);
+      align-items: center;
+      justify-content: center;
+      transform: scale(0.82);
+      margin-left: 4px;
+    }
+
+    &__subfix-icon {
+      margin-left: 4px;
+    }
+
+    &__prefix-icon {
+      margin-right: 4px;
+    }
+  }
+}
+.hy-border-bottom {
+  border-bottom: $hy-border-line;
+}
+.hy-border {
+  border: $hy-border-line;
+}
+</style>