2025/2/8第一次更新

dist/dev/mp-weixin/components/firstui/fui-button/fui-button.js

@@ -0,0 +1,461 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const _sfc_main = {
+  name: "fui-button",
+  emits: [
+    "click",
+    "getuserinfo",
+    "contact",
+    "getphonenumber",
+    "error",
+    "opensetting",
+    "chooseavatar",
+    "launchapp",
+    "agreeprivacyauthorization",
+    "addgroupapp",
+    "chooseaddress",
+    "chooseinvoicetitle",
+    "subscribe",
+    "login",
+    "im"
+  ],
+  behaviors: ["wx://form-field-button"],
+  props: {
+    //样式类型：primary，success， warning，danger，link，purple，gray
+    type: {
+      type: String,
+      default: "primary"
+    },
+    //按钮背景色，当传入值时type失效
+    background: {
+      type: String,
+      default: ""
+    },
+    //按钮显示文本
+    text: {
+      type: String,
+      default: ""
+    },
+    //按钮字体颜色
+    color: {
+      type: String,
+      default: ""
+    },
+    //按钮禁用背景色
+    disabledBackground: {
+      type: String,
+      default: ""
+    },
+    //按钮禁用字体颜色
+    disabledColor: {
+      type: String,
+      default: ""
+    },
+    borderWidth: {
+      type: String,
+      default: "1px"
+    },
+    borderColor: {
+      type: String,
+      default: ""
+    },
+    //V1.9.8+ 按钮大小，优先级高于width和height，medium、small、mini
+    btnSize: {
+      type: String,
+      default: ""
+    },
+    //宽度
+    width: {
+      type: String,
+      default: "100%"
+    },
+    //高度
+    height: {
+      type: String,
+      default: ""
+    },
+    //字体大小，单位rpx
+    size: {
+      type: [Number, String],
+      default: 0
+    },
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    //['20rpx','30rpx','20rpx','30rpx']->[上，右，下，左]
+    margin: {
+      type: Array,
+      default() {
+        return ["0", "0"];
+      }
+    },
+    //圆角
+    radius: {
+      type: String,
+      default: ""
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    formType: {
+      type: String,
+      default: ""
+    },
+    openType: {
+      type: String,
+      default: ""
+    },
+    //支付宝小程序
+    //当 open-type 为 getAuthorize 时，可以设置 scope 为：phoneNumber、userInfo
+    scope: {
+      type: String,
+      default: ""
+    },
+    appParameter: {
+      type: String,
+      default: ""
+    },
+    //v2.3.0+
+    hoverStopPropagation: {
+      type: Boolean,
+      default: false
+    },
+    lang: {
+      type: String,
+      default: "en"
+    },
+    sessionFrom: {
+      type: String,
+      default: ""
+    },
+    sendMessageTitle: {
+      type: String,
+      default: ""
+    },
+    sendMessagePath: {
+      type: String,
+      default: ""
+    },
+    sendMessageImg: {
+      type: String,
+      default: ""
+    },
+    showMessageCard: {
+      type: Boolean,
+      default: false
+    },
+    phoneNumberNoQuotaToast: {
+      type: Boolean,
+      default: true
+    },
+    groupId: {
+      type: String,
+      default: ""
+    },
+    guildId: {
+      type: String,
+      default: ""
+    },
+    publicId: {
+      type: String,
+      default: ""
+    },
+    dataImId: {
+      type: String,
+      default: ""
+    },
+    dataImType: {
+      type: String,
+      default: ""
+    },
+    dataGoodsId: {
+      type: String,
+      default: ""
+    },
+    dataOrderId: {
+      type: String,
+      default: ""
+    },
+    dataBizLine: {
+      type: String,
+      default: ""
+    },
+    index: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  computed: {
+    getTypeColor() {
+      return "";
+    },
+    getBackground() {
+      let color = this.getTypeColor;
+      if (this.disabled || this.plain) {
+        color = "transparent";
+      }
+      if (!this.disabled && !this.plain && this.background) {
+        color = this.background;
+      }
+      return color;
+    },
+    getColor() {
+      let color = "#fff";
+      if (this.color) {
+        color = this.disabled && this.disabledBackground ? this.disabledColor : this.color;
+      } else {
+        if (this.disabled && this.disabledBackground) {
+          color = this.disabledColor || "#FFFFFF";
+        } else {
+          const app = common_vendor.index && common_vendor.index.$fui && common_vendor.index.$fui.color;
+          const primary = app && app.primary || "#465CFF";
+          color = this.type === "gray" ? primary : "#FFFFFF";
+        }
+      }
+      return color;
+    },
+    getSize() {
+      let size = this.size || common_vendor.index && common_vendor.index.$fui && common_vendor.index.$fui.fuiButton && common_vendor.index.$fui.fuiButton.size || 32;
+      if (this.btnSize === "small") {
+        size = size > 28 ? 28 : size;
+      } else if (this.btnSize === "mini") {
+        size = size > 28 ? 24 : size;
+      }
+      return `${size}rpx`;
+    },
+    getWidth() {
+      let width = this.width;
+      if (this.btnSize && this.btnSize !== true) {
+        width = {
+          "medium": "400rpx",
+          "small": "200rpx",
+          "mini": "120rpx"
+        }[this.btnSize] || width;
+      }
+      return width;
+    },
+    getHeight() {
+      let height = this.height || common_vendor.index && common_vendor.index.$fui && common_vendor.index.$fui.fuiButton && common_vendor.index.$fui.fuiButton.height || "96rpx";
+      if (this.btnSize && this.btnSize !== true) {
+        height = {
+          "medium": "84rpx",
+          "small": "72rpx",
+          "mini": "64rpx"
+        }[this.btnSize] || height;
+      }
+      return height;
+    },
+    getBorderRadius() {
+      let radius = common_vendor.index && common_vendor.index.$fui && common_vendor.index.$fui.fuiButton && common_vendor.index.$fui.fuiButton.radius || "16rpx";
+      radius = this.radius || radius || "0";
+      if (~radius.indexOf("rpx")) {
+        radius = Number(radius.replace("rpx", "")) * 2 + "rpx";
+      } else if (~radius.indexOf("px")) {
+        radius = Number(radius.replace("px", "")) * 2 + "px";
+      } else if (~radius.indexOf("%")) {
+        radius = Number(radius.replace("%", "")) * 2 + "%";
+      }
+      return radius;
+    },
+    getRadius() {
+      const radius = common_vendor.index && common_vendor.index.$fui && common_vendor.index.$fui.fuiButton && common_vendor.index.$fui.fuiButton.radius || "16rpx";
+      return this.radius || radius;
+    }
+  },
+  data() {
+    let isNvue = false;
+    return {
+      isNvue,
+      time: 0,
+      trigger: false,
+      pc: false
+    };
+  },
+  created() {
+  },
+  methods: {
+    handleStart(e) {
+      if (this.disabled)
+        return;
+      this.trigger = false;
+      if ((/* @__PURE__ */ new Date()).getTime() - this.time <= 150)
+        return;
+      this.trigger = true;
+      this.time = (/* @__PURE__ */ new Date()).getTime();
+    },
+    handleClick() {
+      if (this.disabled || !this.trigger)
+        return;
+      this.time = 0;
+    },
+    handleTap() {
+      if (this.disabled)
+        return;
+      this.$emit("click", {
+        index: Number(this.index)
+      });
+    },
+    handleEnd(e) {
+      if (this.disabled)
+        return;
+      setTimeout(() => {
+        this.time = 0;
+      }, 150);
+    },
+    bindgetuserinfo({
+      detail = {}
+    } = {}) {
+      this.$emit("getuserinfo", detail);
+    },
+    bindcontact({
+      detail = {}
+    } = {}) {
+      this.$emit("contact", detail);
+    },
+    bindgetphonenumber({
+      detail = {}
+    } = {}) {
+      this.$emit("getphonenumber", detail);
+    },
+    binderror({
+      detail = {}
+    } = {}) {
+      this.$emit("error", detail);
+    },
+    bindopensetting({
+      detail = {}
+    } = {}) {
+      this.$emit("opensetting", detail);
+    },
+    bindchooseavatar({
+      detail = {}
+    } = {}) {
+      this.$emit("chooseavatar", detail);
+    },
+    bindlaunchapp({
+      detail = {}
+    } = {}) {
+      this.$emit("launchapp", detail);
+    },
+    //v2.3.0+
+    agreeprivacyauthorization(e) {
+      this.$emit("agreeprivacyauthorization", e);
+    },
+    addgroupapp(e) {
+      this.$emit("addgroupapp", e);
+    },
+    chooseaddress(e) {
+      this.$emit("chooseaddress", e);
+    },
+    chooseinvoicetitle(e) {
+      this.$emit("chooseinvoicetitle", e);
+    },
+    bindsubscribe(e) {
+      this.$emit("subscribe", e);
+    },
+    bindlogin(e) {
+      this.$emit("login", e);
+    },
+    bindim(e) {
+      this.$emit("im", e);
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return common_vendor.e({
+    a: $props.text
+  }, $props.text ? {
+    b: common_vendor.t($props.text),
+    c: !$props.background && !$props.disabledBackground && !$props.plain && $props.type === "gray" && $props.color === "#fff" ? 1 : "",
+    d: $props.bold ? 1 : "",
+    e: $options.getSize,
+    f: $options.getSize,
+    g: $options.getColor
+  } : {}, {
+    h: common_vendor.n($props.bold ? "fui-text__bold" : ""),
+    i: common_vendor.n($data.time && ($props.plain || $props.type === "link") ? "fui-button__opacity" : ""),
+    j: common_vendor.n(!$props.background && !$props.disabledBackground && !$props.plain ? "fui-button__" + $props.type : ""),
+    k: common_vendor.n(!$options.getWidth || $options.getWidth === "100%" || $options.getWidth === true ? "fui-button__flex-1" : ""),
+    l: common_vendor.n($data.time && !$props.plain && $props.type !== "link" ? "fui-button__active" : ""),
+    m: common_vendor.n($data.pc && !$props.disabled ? $props.plain || $props.type === "link" ? "fui-button__opacity-pc" : "fui-button__active-pc" : ""),
+    n: $options.getWidth,
+    o: $options.getHeight,
+    p: $options.getHeight,
+    q: $props.disabled ? $props.disabledBackground || $options.getTypeColor : $props.plain ? "transparent" : $options.getBackground,
+    r: !$props.borderColor || !$data.isNvue ? "0" : $props.borderWidth,
+    s: $props.borderColor ? $props.borderColor : $props.disabled && $props.disabledBackground ? $props.disabledBackground : $props.background || "transparent",
+    t: $options.getRadius,
+    v: $options.getSize,
+    w: $options.getColor,
+    x: $props.loading,
+    y: $props.formType,
+    z: $props.openType,
+    A: $props.appParameter,
+    B: $props.hoverStopPropagation,
+    C: $props.lang,
+    D: $props.sessionFrom,
+    E: $props.sendMessageTitle,
+    F: $props.sendMessagePath,
+    G: $props.sendMessageImg,
+    H: $props.showMessageCard,
+    I: $props.groupId,
+    J: $props.guildId,
+    K: $props.publicId,
+    L: $props.dataImId,
+    M: $props.dataImType,
+    N: $props.dataGoodsId,
+    O: $props.dataOrderId,
+    P: $props.dataBizLine,
+    Q: $props.phoneNumberNoQuotaToast,
+    R: common_vendor.o((...args) => $options.bindgetuserinfo && $options.bindgetuserinfo(...args)),
+    S: common_vendor.o((...args) => $options.bindgetphonenumber && $options.bindgetphonenumber(...args)),
+    T: common_vendor.o((...args) => $options.bindcontact && $options.bindcontact(...args)),
+    U: common_vendor.o((...args) => $options.binderror && $options.binderror(...args)),
+    V: common_vendor.o((...args) => $options.bindopensetting && $options.bindopensetting(...args)),
+    W: common_vendor.o((...args) => $options.bindchooseavatar && $options.bindchooseavatar(...args)),
+    X: common_vendor.o((...args) => $options.bindlaunchapp && $options.bindlaunchapp(...args)),
+    Y: common_vendor.o((...args) => $options.agreeprivacyauthorization && $options.agreeprivacyauthorization(...args)),
+    Z: common_vendor.o((...args) => $options.addgroupapp && $options.addgroupapp(...args)),
+    aa: common_vendor.o((...args) => $options.chooseaddress && $options.chooseaddress(...args)),
+    ab: common_vendor.o((...args) => $options.chooseinvoicetitle && $options.chooseinvoicetitle(...args)),
+    ac: common_vendor.o((...args) => $options.bindsubscribe && $options.bindsubscribe(...args)),
+    ad: common_vendor.o((...args) => $options.bindlogin && $options.bindlogin(...args)),
+    ae: common_vendor.o((...args) => $options.bindim && $options.bindim(...args)),
+    af: $props.disabled,
+    ag: $props.scope,
+    ah: common_vendor.o((...args) => $options.handleTap && $options.handleTap(...args)),
+    ai: $props.borderColor
+  }, $props.borderColor ? {
+    aj: common_vendor.n($data.time && ($props.plain || $props.type === "link") && !$props.disabled ? "fui-button__opacity" : ""),
+    ak: common_vendor.n($props.disabled && !$props.disabledBackground ? "fui-button__opacity" : ""),
+    al: $props.borderWidth,
+    am: $props.borderColor ? $props.borderColor : $props.disabled && $props.disabledBackground ? $props.disabledBackground : $props.background || "transparent",
+    an: $options.getBorderRadius
+  } : {}, {
+    ao: common_vendor.n(!$options.getWidth || $options.getWidth === "100%" || $options.getWidth === true ? "fui-button__flex-1" : ""),
+    ap: common_vendor.n($props.disabled && !$props.disabledBackground ? "fui-button__opacity" : ""),
+    aq: $options.getWidth,
+    ar: $options.getHeight,
+    as: $props.margin[0] || 0,
+    at: $props.margin[1] || 0,
+    av: $props.margin[2] || $props.margin[0] || 0,
+    aw: $props.margin[3] || $props.margin[1] || 0,
+    ax: $options.getRadius,
+    ay: $options.getBackground,
+    az: common_vendor.o((...args) => $options.handleStart && $options.handleStart(...args)),
+    aA: common_vendor.o((...args) => $options.handleClick && $options.handleClick(...args)),
+    aB: common_vendor.o((...args) => $options.handleEnd && $options.handleEnd(...args))
+  });
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-879fd338"]]);
+wx.createComponent(Component);

dist/dev/mp-weixin/components/firstui/fui-button/fui-button.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

dist/dev/mp-weixin/components/firstui/fui-button/fui-button.wxml

@@ -0,0 +1 @@
+<view class="{{['fui-button__wrap', 'data-v-879fd338', ao, ap, virtualHostClass]}}" style="{{'width:' + aq + ';' + ('height:' + ar) + ';' + ('margin-top:' + as) + ';' + ('margin-right:' + at) + ';' + ('margin-bottom:' + av) + ';' + ('margin-left:' + aw) + ';' + ('border-radius:' + ax) + ';' + ('background:' + ay) + ';' + virtualHostStyle}}" bindtouchstart="{{az}}" bindtouchend="{{aA}}" bindtouchcancel="{{aB}}"><button class="{{['fui-button', 'data-v-879fd338', h, i, j, k, l, m]}}" style="{{'width:' + n + ';' + ('height:' + o) + ';' + ('line-height:' + p) + ';' + ('background:' + q) + ';' + ('border-width:' + r) + ';' + ('border-color:' + s) + ';' + ('border-radius:' + t) + ';' + ('font-size:' + v) + ';' + ('color:' + w)}}" loading="{{x}}" form-type="{{y}}" open-type="{{z}}" app-parameter="{{A}}" hoverStopPropagation="{{B}}" lang="{{C}}" sessionFrom="{{D}}" sendMessageTitle="{{E}}" sendMessagePath="{{F}}" sendMessageImg="{{G}}" showMessageCard="{{H}}" groupId="{{I}}" guildId="{{J}}" publicId="{{K}}" dataImId="{{L}}" dataImType="{{M}}" dataGoodsId="{{N}}" dataOrderId="{{O}}" dataBizLine="{{P}}" phoneNumberNoQuotaToast="{{Q}}" bindgetuserinfo="{{R}}" bindgetphonenumber="{{S}}" bindcontact="{{T}}" binderror="{{U}}" bindopensetting="{{V}}" bindchooseavatar="{{W}}" bindlaunchapp="{{X}}" bindagreeprivacyauthorization="{{Y}}" bindaddgroupapp="{{Z}}" bindchooseaddress="{{aa}}" bindchooseinvoicetitle="{{ab}}" bindsubscribe="{{ac}}" bindlogin="{{ad}}" bindim="{{ae}}" disabled="{{af}}" scope="{{ag}}" catchtap="{{ah}}"><text wx:if="{{a}}" class="{{['fui-button__text', 'data-v-879fd338', c && 'fui-btn__gray-color', d && 'fui-text__bold']}}" style="{{'font-size:' + e + ';' + ('line-height:' + f) + ';' + ('color:' + g)}}">{{b}}</text><slot></slot></button><view wx:if="{{ai}}" class="{{['fui-button__thin-border', 'data-v-879fd338', aj, ak]}}" style="{{'border-width:' + al + ';' + ('border-color:' + am) + ';' + ('border-radius:' + an)}}"></view></view>

dist/dev/mp-weixin/components/firstui/fui-button/fui-button.wxss

@@ -0,0 +1,111 @@
+
+.fui-button__wrap.data-v-879fd338 {
+		position: relative;
+
+		background: transparent !important;
+		flex-direction: row;
+}
+.fui-button.data-v-879fd338 {
+		border-width: 0;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+
+		border-style: solid;
+		position: relative;
+		padding-left: 0;
+		padding-right: 0;
+
+		overflow: hidden;
+		transform: translateZ(0);
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		     user-select: none;
+}
+.fui-button__thin-border.data-v-879fd338 {
+		position: absolute;
+		width: 200%;
+		height: 200%;
+		transform-origin: 0 0;
+		transform: scale(0.5, 0.5) translateZ(0);
+		box-sizing: border-box;
+		left: 0;
+		top: 0;
+		border-radius: 32rpx;
+		border-style: solid;
+		pointer-events: none;
+}
+.fui-button__flex-1.data-v-879fd338 {
+		flex: 1;
+
+		width: 100%;
+}
+.fui-button.data-v-879fd338::after {
+		border: 0;
+}
+.fui-button__active.data-v-879fd338 {
+		overflow: hidden !important;
+}
+.fui-button__active.data-v-879fd338::after {
+		content: ' ';
+		background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2));
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		right: 0;
+		top: 0;
+		transform: none;
+		z-index: 2;
+		border-radius: 0;
+}
+.fui-button__text.data-v-879fd338 {
+		text-align: center;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center !important;
+		padding-left: 0 !important;
+}
+.fui-button__opacity.data-v-879fd338 {
+		opacity: 0.5;
+}
+.fui-text__bold.data-v-879fd338 {
+		font-weight: bold;
+}
+.fui-button__link.data-v-879fd338 {
+		border-color: transparent !important;
+		background-color: transparent !important;
+}
+.fui-button__primary.data-v-879fd338 {
+		border-color: var(--fui-color-primary, #465CFF) !important;
+		background: var(--fui-color-primary, #465CFF) !important;
+}
+.fui-button__success.data-v-879fd338 {
+		border-color: var(--fui-color-success, #09BE4F) !important;
+		background: var(--fui-color-success, #09BE4F) !important;
+}
+.fui-button__warning.data-v-879fd338 {
+		border-color: var(--fui-color-warning, #FFB703) !important;
+		background: var(--fui-color-warning, #FFB703) !important;
+}
+.fui-button__danger.data-v-879fd338 {
+		border-color: var(--fui-color-danger, #FF2B2B) !important;
+		background: var(--fui-color-danger, #FF2B2B) !important;
+}
+.fui-button__purple.data-v-879fd338 {
+		border-color: var(--fui-color-purple, #6831FF) !important;
+		background: var(--fui-color-purple, #6831FF) !important;
+}
+.fui-button__gray.data-v-879fd338 {
+		border-color: var(--fui-bg-color-content, #F8F8F8) !important;
+		background: var(--fui-bg-color-content, #F8F8F8) !important;
+		color: var(--fui-color-primary, #465CFF) !important;
+}
+.fui-btn__gray-color.data-v-879fd338 {
+		color: var(--fui-color-primary, #465CFF) !important;
+}
+
+