更新记录

1.1.18(2023-05-06)

button 添加获取手机号

1.1.17(2023-02-09)

button vue3版本 防抖

1.1.16(2023-02-08)

button 防抖

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问