@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/button/button.vue

@@ -0,0 +1,247 @@
+<template>
+  <button
+    :id="tId"
+    :style="tools._style([customStyle])"
+    :data-custom="customDataset"
+    :class="className"
+    :activity-type="activityType ? activityType : ''"
+    :entrance-path="entrancePath"
+    :form-type="disabled || loading ? '' : type"
+    :open-type="disabled || loading ? '' : openType"
+    :hover-stop-propagation="hoverStopPropagation"
+    :hover-start-time="hoverStartTime"
+    :hover-stay-time="hoverStayTime"
+    :lang="lang"
+    :need-show-entrance="needShowEntrance"
+    :session-from="sessionFrom"
+    :hover-class="disabled || loading ? '' : hoverClass || classPrefix + '--hover'"
+    :send-message-title="sendMessageTitle"
+    :send-message-path="sendMessagePath"
+    :send-message-img="sendMessageImg"
+    :app-parameter="appParameter"
+    :show-message-card="showMessageCard"
+    :aria-label="ariaLabel"
+    @click.stop.prevent="handleTap"
+    @getuserinfo="getuserinfo"
+    @contact="contact"
+    @getphonenumber="getphonenumber"
+    @error="error"
+    @opensetting="opensetting"
+    @launchapp="launchapp"
+    @chooseavatar="chooseavatar"
+    @agreeprivacyauthorization="agreeprivacyauthorization"
+  >
+    <block
+      v-if="_icon"
+      name="icon"
+    >
+      <t-icon
+        :custom-style="iconCustomStyle"
+        :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (_icon.activeIdx == _icon.index ? 'active ' : ' ') + tClassIcon"
+        :prefix="_icon.prefix"
+        :name="_icon.name || ''"
+        :size="_icon.size"
+        :color="_icon.color"
+        @click="'handleClose' || ''"
+      />
+    </block>
+    <t-loading
+      v-if="loading"
+      :delay="loadingProps.delay || 0"
+      :duration="loadingProps.duration || 800"
+      :indicator="loadingProps.indicator || true"
+      :inherit-color="loadingProps.inheritColor || true"
+      :layout="loadingProps.layout || 'horizontal'"
+      :pause="loadingProps.pause || false"
+      :progress="loadingProps.progress || 0"
+      :reverse="loadingProps.reverse || false"
+      :size="loadingProps.size || '40rpx'"
+      :text="loadingProps.text || ''"
+      :theme="loadingProps.theme || 'circular'"
+      loading
+      :t-class="classPrefix + '__loading ' + classPrefix + '__loading--wrapper'"
+      :t-class-indicator="classPrefix + '__loading--indicator ' + tClassLoading"
+      :custom-style="loadingCustomStyle"
+    />
+    <view
+      :class="classPrefix + '__content '
+        + ((_icon && _icon.name || loading) && content ? classPrefix + '__content--has-icon' : '')"
+    >
+      <slot name="content" />
+      <block v-if="content">
+        {{ content }}
+      </block>
+      <slot />
+    </view>
+    <slot name="suffix" />
+  </button>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TLoading from '../loading/loading';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-button`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-loading`,
+  ],
+  components: {
+    TIcon,
+    TLoading,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+  ],
+  data() {
+    return {
+      tools,
+      prefix,
+      className: '',
+      classPrefix: name,
+      _icon: undefined,
+    };
+  },
+  computed: {
+    iconCustomStyle() {
+      const fontSize = {
+        'extra-small': 'var(--td-button-extra-small-icon-font-size, 18px)',
+        small: 'var(--td-button-small-icon-font-size, 18px)',
+        medium: 'var(--td-button-medium-icon-font-size, 20px)',
+        large: 'var(--td-button-large-icon-font-size, 24px)',
+      };
+
+      return tools._style([
+        {
+          fontSize: fontSize[this.size || 'medium'],
+          borderRadius: 'var(--td-button-icon-border-radius, 4px)',
+        },
+        this._icon.style || '',
+      ]);
+    },
+    loadingCustomStyle() {
+      return tools._style({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      });
+    },
+  },
+  watch: {
+    icon: {
+      handler(value) {
+        this._icon = calcIcon(value, '');
+      },
+      immediate: true,
+    },
+    theme: 'setClass',
+    size: 'setClass',
+    plain: 'setClass',
+    block: 'setClass',
+    shape: 'setClass',
+    disabled: 'setClass',
+    loading: 'setClass',
+    variant: 'setClass',
+  },
+  mounted() {
+    this.setClass();
+  },
+  methods: {
+    setClass() {
+      const t = [
+        name,
+        this.tClass,
+        `${name}--${this.variant || 'base'}`,
+        `${name}--${this.theme || 'default'}`,
+        `${name}--${this.shape || 'rectangle'}`,
+        `${name}--size-${this.size || 'medium'}`,
+      ];
+      if (this.block) {
+        t.push(`${name}--block`);
+      }
+      if (this.disabled) {
+        t.push(`${name}--disabled`);
+      }
+      if (this.ghost) {
+        t.push(`${name}--ghost`);
+      }
+      this.className = t.join(' ');
+    },
+    getuserinfo(t) {
+      this.$emit('getuserinfo', t);
+    },
+    contact(t) {
+      this.$emit('contact', t);
+    },
+    getphonenumber(t) {
+      this.$emit('getphonenumber', t);
+    },
+    error(t) {
+      this.$emit('error', t);
+    },
+    opensetting(t) {
+      this.$emit('opensetting', t);
+    },
+    launchapp(t) {
+      this.$emit('launchapp', t);
+    },
+    chooseavatar(t) {
+      this.$emit('chooseavatar', t);
+    },
+    agreeprivacyauthorization(t) {
+      this.$emit('agreeprivacyauthorization', t);
+    },
+    handleTap(t) {
+      if (this.disabled || this.loading) return;
+      this.$emit('click', t);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './button.css';
+
+/* #ifdef MP-QQ */
+/* 适配 qq 小程序 */
+.t-button--outline {
+  border-style: solid;
+  border-width: 1px;
+}
+.t-button--ghost {
+  border-style: solid;
+  border-width: 1px;
+}
+/* #endif */
+
+/* #ifdef H5 || MP-WEIXIN */
+:deep(.t-button__loading) + .t-button__content:not(:empty) {
+  margin-left: 4px;
+}
+:deep(.t-button__icon) + .t-button__content:not(:empty) {
+  margin-left: 4px;
+}
+/* #endif */
+
+
+.t-button {
+  /* support my-alipay */
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>

package/dist/button/props.ts

@@ -0,0 +1,221 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdButtonProps } from './type';
+export default {
+  /** 卡片id。 `open-type` 的值设置为 `liveActivity` ，设置 `activity-type` 参数为 [notify_type](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html)。当用户点击 `button` 后，可以通过 `bindcreateliveactivity` 事件回调获取到 `code`  */
+  activityType: {
+    type: Number,
+  },
+  /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 */
+  appParameter: {
+    type: String,
+    default: '',
+  },
+  /** 是否为块级元素 */
+  block: Boolean,
+  /** 按钮内容 */
+  content: {
+    type: String,
+  },
+  /** 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取 */
+  customDataset: {
+    type: [String, Number, Boolean, Object, Array],
+    default: () => ({}) as TdButtonProps['customDataset'],
+  },
+  /** 禁用状态。优先级：Button.disabled > Form.disabled */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 从消息小程序入口打开小程序的路径，默认为聊天工具启动路径 */
+  entrancePath: {
+    type: String,
+    default: '',
+  },
+  /** 是否为幽灵按钮（镂空按钮） */
+  ghost: Boolean,
+  /** 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 */
+  hoverClass: {
+    type: String,
+    default: '',
+  },
+  /** 按住后多久出现点击态，单位毫秒 */
+  hoverStartTime: {
+    type: Number,
+    default: 20,
+  },
+  /** 手指松开后点击态保留时间，单位毫秒 */
+  hoverStayTime: {
+    type: Number,
+    default: 70,
+  },
+  /** 指定是否阻止本节点的祖先节点出现点击态 */
+  hoverStopPropagation: Boolean,
+  /** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  icon: {
+    type: [String, Object],
+  },
+  /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。<br />具体释义：<br />`en` 英文；<br />`zh_CN` 简体中文；<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) */
+  lang: {
+    type: String,
+    validator(val: TdButtonProps['lang']): boolean {
+      if (!val) return true;
+      return ['en', 'zh_CN', 'zh_TW'].includes(val);
+    },
+  },
+  /** 是否显示为加载状态 */
+  loading: Boolean,
+  /** 透传 Loading 组件全部属性 */
+  loadingProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 转发的文本消息是否要带小程序入口 */
+  needShowEntrance: {
+    type: Boolean,
+    default: true,
+  },
+  /** 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；<br />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) */
+  openType: {
+    type: String,
+    validator(val: TdButtonProps['openType']): boolean {
+      if (!val) return true;
+      return ['contact', 'share', 'getPhoneNumber', 'getUserInfo', 'launchApp', 'openSetting', 'feedback', 'chooseAvatar', 'agreePrivacyAuthorization'].includes(val);
+    },
+  },
+  /** 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效 */
+  phoneNumberNoQuotaToast: {
+    type: Boolean,
+    default: true,
+  },
+  /** 会话内消息卡片图片，open-type="contact"时有效 */
+  sendMessageImg: {
+    type: String,
+    default: '截图',
+  },
+  /** 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 */
+  sendMessagePath: {
+    type: String,
+    default: '当前分享路径',
+  },
+  /** 会话内消息卡片标题，open-type="contact"时有效 */
+  sendMessageTitle: {
+    type: String,
+    default: '当前标题',
+  },
+  /** 会话来源，open-type="contact"时有效 */
+  sessionFrom: {
+    type: String,
+    default: '',
+  },
+  /** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */
+  shape: {
+    type: String,
+    default: 'rectangle' as TdButtonProps['shape'],
+    validator(val: TdButtonProps['shape']): boolean {
+      if (!val) return true;
+      return ['rectangle', 'square', 'round', 'circle'].includes(val);
+    },
+  },
+  /** 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 */
+  showMessageCard: Boolean,
+  /** 组件尺寸 */
+  size: {
+    type: String,
+    default: 'medium' as TdButtonProps['size'],
+    validator(val: TdButtonProps['size']): boolean {
+      if (!val) return true;
+      return ['extra-small', 'small', 'medium', 'large'].includes(val);
+    },
+  },
+  /** 按钮标签id */
+  tId: {
+    type: String,
+    default: '',
+  },
+  /** 组件风格，依次为品牌色、危险色 */
+  theme: {
+    type: String,
+    default: 'default' as TdButtonProps['theme'],
+    validator(val: TdButtonProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'primary', 'danger', 'light'].includes(val);
+    },
+  },
+  /** 同小程序的 formType */
+  type: {
+    type: String,
+    validator(val: TdButtonProps['type']): boolean {
+      if (!val) return true;
+      return ['submit', 'reset'].includes(val);
+    },
+  },
+  /** 按钮形式，基础、线框、虚线、文字 */
+  variant: {
+    type: String,
+    default: 'base' as TdButtonProps['variant'],
+    validator(val: TdButtonProps['variant']): boolean {
+      if (!val) return true;
+      return ['base', 'outline', 'dashed', 'text'].includes(val);
+    },
+  },
+  /** 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })） */
+  onAgreeprivacyauthorization: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接 */
+  onChooseavatar: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，客服消息回调，`open-type="contact"` 时有效 */
+  onContact: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效 */
+  onCreateliveactivity: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效 */
+  onError: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用 */
+  onGetphonenumber: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用 */
+  onGetrealtimephonenumber: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 */
+  onGetuserinfo: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 打开 APP 成功的回调，`open-type=launchApp` 时有效 */
+  onLaunchapp: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效 */
+  onOpensetting: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/button/type.ts

@@ -0,0 +1,206 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdLoadingProps as LoadingProps } from '../loading/type';
+
+export interface TdButtonProps {
+  /**
+   * 卡片id。 `open-type` 的值设置为 `liveActivity` ，设置 `activity-type` 参数为 [notify_type](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html)。当用户点击 `button` 后，可以通过 `bindcreateliveactivity` 事件回调获取到 `code`
+   */
+  activityType?: number;
+  /**
+   * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+   * @default ''
+   */
+  appParameter?: string;
+  /**
+   * 是否为块级元素
+   * @default false
+   */
+  block?: boolean;
+  /**
+   * 按钮内容
+   */
+  content?: string;
+  /**
+   * 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取
+   * @default {}
+   */
+  customDataset?: string | number | boolean | object | Array<string | number | boolean | object>;
+  /**
+   * 禁用状态。优先级：Button.disabled > Form.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 从消息小程序入口打开小程序的路径，默认为聊天工具启动路径
+   * @default ''
+   */
+  entrancePath?: string;
+  /**
+   * 是否为幽灵按钮（镂空按钮）
+   * @default false
+   */
+  ghost?: boolean;
+  /**
+   * 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果
+   * @default ''
+   */
+  hoverClass?: string;
+  /**
+   * 按住后多久出现点击态，单位毫秒
+   * @default 20
+   */
+  hoverStartTime?: number;
+  /**
+   * 手指松开后点击态保留时间，单位毫秒
+   * @default 70
+   */
+  hoverStayTime?: number;
+  /**
+   * 指定是否阻止本节点的祖先节点出现点击态
+   * @default false
+   */
+  hoverStopPropagation?: boolean;
+  /**
+   * 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  icon?: string | object;
+  /**
+   * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。<br />具体释义：<br />`en` 英文；<br />`zh_CN` 简体中文；<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
+   */
+  lang?: 'en' | 'zh_CN' | 'zh_TW';
+  /**
+   * 是否显示为加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 透传 Loading 组件全部属性
+   * @default {}
+   */
+  loadingProps?: LoadingProps;
+  /**
+   * 转发的文本消息是否要带小程序入口
+   * @default true
+   */
+  needShowEntrance?: boolean;
+  /**
+   * 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*鸿蒙 OS 暂不支持*）；<br />`liveActivity` 通过前端获取<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message-2.html">新的一次性订阅消息下发机制</a>使用的 code；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；<br />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
+   */
+  openType?:
+    | 'contact'
+    | 'share'
+    | 'getPhoneNumber'
+    | 'getUserInfo'
+    | 'launchApp'
+    | 'openSetting'
+    | 'feedback'
+    | 'chooseAvatar'
+    | 'agreePrivacyAuthorization';
+  /**
+   * 原生按钮属性，当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示“申请获取你的手机号，但该功能使用次数已达当前小程序上限，暂时无法使用”的提示，默认展示，open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 时有效
+   * @default true
+   */
+  phoneNumberNoQuotaToast?: boolean;
+  /**
+   * 会话内消息卡片图片，open-type="contact"时有效
+   * @default 截图
+   */
+  sendMessageImg?: string;
+  /**
+   * 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+   * @default 当前分享路径
+   */
+  sendMessagePath?: string;
+  /**
+   * 会话内消息卡片标题，open-type="contact"时有效
+   * @default 当前标题
+   */
+  sendMessageTitle?: string;
+  /**
+   * 会话来源，open-type="contact"时有效
+   * @default ''
+   */
+  sessionFrom?: string;
+  /**
+   * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
+   * @default rectangle
+   */
+  shape?: 'rectangle' | 'square' | 'round' | 'circle';
+  /**
+   * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
+   * @default false
+   */
+  showMessageCard?: boolean;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: 'extra-small' | 'small' | 'medium' | 'large';
+  /**
+   * 按钮标签id
+   * @default ''
+   */
+  tId?: string;
+  /**
+   * 组件风格，依次为品牌色、危险色
+   * @default default
+   */
+  theme?: 'default' | 'primary' | 'danger' | 'light';
+  /**
+   * 同小程序的 formType
+   */
+  type?: 'submit' | 'reset';
+  /**
+   * 按钮形式，基础、线框、虚线、文字
+   * @default base
+   */
+  variant?: 'base' | 'outline' | 'dashed' | 'text';
+  /**
+   * 原生按钮属性，用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })）
+   */
+  onAgreeprivacyauthorization?: () => void;
+  /**
+   * 原生按钮属性，获取用户头像回调，`open-type=chooseAvatar` 时有效。返回 `e.detail.avatarUrl` 为头像临时文件链接
+   */
+  onChooseavatar?: () => void;
+  /**
+   * 点击时触发
+   */
+  onClick?: (e: MouseEvent) => void;
+  /**
+   * 原生按钮属性，客服消息回调，`open-type="contact"` 时有效
+   */
+  onContact?: () => void;
+  /**
+   * 新的一次性订阅消息下发机制回调，`open-type=liveActivity` 时有效
+   */
+  onCreateliveactivity?: () => void;
+  /**
+   * 原生按钮属性，当使用开放能力时，发生错误的回调，`open-type=launchApp` 时有效
+   */
+  onError?: () => void;
+  /**
+   * 原生按钮属性，手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
+   */
+  onGetphonenumber?: () => void;
+  /**
+   * 原生按钮属性，手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用
+   */
+  onGetrealtimephonenumber?: () => void;
+  /**
+   * 原生按钮属性，用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
+   */
+  onGetuserinfo?: () => void;
+  /**
+   * 打开 APP 成功的回调，`open-type=launchApp` 时有效
+   */
+  onLaunchapp?: () => void;
+  /**
+   * 原生按钮属性，在打开授权设置页后回调，open-type=openSetting时有效
+   */
+  onOpensetting?: () => void;
+}