更新记录

1.1.18（2023-05-06） 下载此版本

button 添加获取手机号

1.1.17（2023-02-09） 下载此版本

button vue3版本 防抖

1.1.16（2023-02-08） 下载此版本

button 防抖

平台兼容性

uni-app

其他

icy-common

目前使用 uni-app 的vue3写法

使用方法

• 点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目或点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules/icy-common 目录下

• 在需要使用页面的 (n)vue 文件中添加下面的组件

• 需要更新版本时在 HBuilder X 中右键 uni_modules/mp-common 目录选择 从插件市场更新 即可

可使用的组件

 <icy-button>按钮</icy-button>
 <icy-input v-model='keywords' ></icy-input>
 <icy-empty description='暂无数据'></icy-empty>
 <icy-tabs v-model="activeIndex" :tabList="tabList" sticky></icy-tabs>

icy-button

 <icy-button>按钮</icy-button>

icy-button props

 defineProps({
   /**
    * open-type 有效值
    * share  触发 自定义分享
    * getAuthorize  支持小程序授权
    * contactShare  分享到通讯录好友
    * lifestyle   关注生活号
    */
   openType: {
     type: String,
     default: "",
   },
   /**
    * 当 open-type 为 getAuthorize 时，可以设置 scope 为以下值
    * phoneNumber  用户点击同意后，即可通过  my.getPhoneNumber 授权小程序获取用户绑定的手机号。
    * userInfo  用户点击同意后，即可通过 my.getOpenUserInfo 授权小程序获取支付宝会员基础信息。
    */
   scope: {
     type: String,
     default: "",
   },
   width: {
     type: String,
     default: "678rpx",
   },
   height: {
     type: String,
     default: "88rpx",
   },
   color: {
     type: String,
     default: "#fff",
   },
   fontSize: {
     type: String,
     default: "32rpx",
   },
   background: {
     type: String,
     default: "#000",
   },
   border: {
     type: String,
     default: "none",
   },
   borderRadius: {
     type: String,
     default: "42rpx",
   },
   boxShadow: {
     type: String,
     default: "",
   },
   disabled: {
     type: Boolean,
     default: false,
   },
   disabledColor: {
     type: String,
     default: "#fff",
   },
   disabledBackground: {
     type: String,
     default: "#e0e0e0",
   },
   backgroundImage: {
     type: String,
     value: "",
   },
 });

icy-button event

  <icy-button
    @onGetAuthorize="onGetAuthorize"
    @onError="onError"
    @click="onTap"
  >按钮</icy-button>

icy-input

 <icy-input v-model='keywords' @nameFocus='focusHandle' @blur='blurHandle' @confirm='confirmHandle' ></icy-input>

icy-input props

defineProps({
  /**
   * input 的类型，有效值：text、 number、 idcard、 digit(可以唤起带有小数点的数字键盘)、numberpad、digitpad、 idcardpad。
   */
  type: {
    type: String,
    default: "text",
  },
  value: {
    type: [Number, String],
    default: "",
  },
  modelValue: {
    type: [Number, String],
    default: "",
  },
  password: {
    type: Boolean,
    default: false,
  },
  cancelClear: {
    type: Boolean,
    default: false,
  },
  focus: {
    type: Boolean,
    default: false,
  },
  confirmType: {
    type: String,
    default: "done",
  },
  confirmHold: {
    type: Boolean,
    default: false,
  },
  adjustPosition: {
    type: Boolean,
    default: true,
  },
  autoBlur: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  disabledBorder: {
    type: String,
    default: "",
  },
  disabledBackground: {
    type: String,
    default: "",
  },
  disabledBoxshadow: {
    type: String,
    default: "",
  },
  disabledColor: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
  placeholderColor: {
    type: String,
    default: "#CCCCCC",
  },
  placeholderFontSize: {
    type: String,
    default: "32rpx",
  },
  maxlength: {
    type: Number,
    default: 140,
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  border: {
    type: String,
    default: "",
  },
  padding: {
    type: String,
    default: "",
  },
  background: {
    type: String,
    default: "#fff",
  },
  boxshadow: {
    type: String,
    default: "",
  },
  borderRadius: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#333",
  },
  fontSize: {
    type: String,
    default: "32rpx",
  },
  imageClose: {
    type: String,
    default: imageClose,
  },
  imageWidth: {
    type: String,
    default: "40rpx",
  },
  imageHeight: {
    type: String,
    default: "40rpx",
  },
});

icy-empty

 <icy-empty description='暂无数据'></icy-empty>

icy-empty props

  description: { type: String, default: "暂无数据" },
  image: { type: String, default: require("../../static/empty.png") },
  addPadding: { type: Boolean, default: false },

icy-tabs

.icy-tab-wrap {
  --tabWrapHeight: 90rpx;
  --bottomLineTop: 82rpx;
  --scrollWrapHeight: 110rpx;
}
/**
注意：--tabWrapHeight改了之后，--bottomLineTop和--scrollWrapHeight也要改
+20rpx 是为了隐藏原生滚动条 -8rpx是去掉line的高度
--scrollWrapHeight = --tabWrapHeight + 20rpx
--bottomLineTop = --tabWrapHeight - 8rpx
*/

<!-- 包含所有默认参数 -->
<icy-tabs
  :activeIndex.sync="activeIndex"
  :tabList="tabList"
  itemWidth="auto"
  background="#fff"
  lineColor="#000"
  activeTextColor="#000"
  defaultTextColor="#666"
  :center="false"
  sticky
></icy-tabs>