index.vue 7.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <uni-shadow-root class="weapp-lib-button-index"><button :id="id" :data-detail="dataset" :class="'custom-class '+(utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]))+' '+(hairline ? 'van-hairline--surround' : '')" :hover-class="disabled || loading ? '' : 'van-button--active hover-class'" :lang="lang" :form-type="formType" :style="computed.rootStyle({ plain, color, customStyle })" :open-type="disabled || loading || (canIUseGetUserProfile && openType === 'getUserInfo') ? '' : openType" :business-id="businessId" :session-from="sessionFrom" :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg" :show-message-card="showMessageCard" :app-parameter="appParameter" :aria-label="ariaLabel" @click="_$self[(disabled || loading ? '' : 'onClick')||'_$noop']($event)" @getuserinfo="onGetUserInfo" @contact="onContact" @getphonenumber="onGetPhoneNumber" @error="onError" @launchapp="onLaunchApp" @opensetting="onOpenSetting" @chooseavatar="onChooseAvatar">
  3. <block v-if="loading">
  4. <van-loading custom-class="loading-class" :size="loadingSize" :type="loadingType" :color="computed.loadingColor({ type, color, plain })"></van-loading>
  5. <view v-if="loadingText" class="van-button__loading-text">
  6. {{ loadingText }}
  7. </view>
  8. </block>
  9. <block v-else>
  10. <van-icon v-if="icon" size="1.2em" :name="icon" :class-prefix="classPrefix" class="van-button__icon" custom-style="line-height: inherit;"></van-icon>
  11. <view class="van-button__text">
  12. <slot></slot>
  13. </view>
  14. </block>
  15. </button></uni-shadow-root>
  16. </template>
  17. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
  18. <script>
  19. import VanIcon from '../icon/index.vue'
  20. import VanLoading from '../loading/index.vue'
  21. global['__wxVueOptions'] = {components:{'van-icon': VanIcon,'van-loading': VanLoading}}
  22. global['__wxRoute'] = 'weapp/lib/button/index'
  23. "use strict";
  24. Object.defineProperty(exports, "__esModule", { value: true });
  25. var component_1 = require("../common/component");
  26. var button_1 = require("../mixins/button");
  27. var version_1 = require("../common/version");
  28. var mixins = [button_1.button];
  29. if ((0, version_1.canIUseFormFieldButton)()) {
  30. mixins.push('wx://form-field-button');
  31. }
  32. (0, component_1.VantComponent)({
  33. mixins: mixins,
  34. classes: ['hover-class', 'loading-class'],
  35. data: {
  36. baseStyle: '',
  37. },
  38. props: {
  39. formType: String,
  40. icon: String,
  41. classPrefix: {
  42. type: String,
  43. value: 'van-icon',
  44. },
  45. plain: Boolean,
  46. block: Boolean,
  47. round: Boolean,
  48. square: Boolean,
  49. loading: Boolean,
  50. hairline: Boolean,
  51. disabled: Boolean,
  52. loadingText: String,
  53. customStyle: String,
  54. loadingType: {
  55. type: String,
  56. value: 'circular',
  57. },
  58. type: {
  59. type: String,
  60. value: 'default',
  61. },
  62. dataset: null,
  63. size: {
  64. type: String,
  65. value: 'normal',
  66. },
  67. loadingSize: {
  68. type: String,
  69. value: '20px',
  70. },
  71. color: String,
  72. },
  73. methods: {
  74. onClick: function (event) {
  75. var _this = this;
  76. this.$emit('click', event);
  77. var _a = this.data, canIUseGetUserProfile = _a.canIUseGetUserProfile, openType = _a.openType, getUserProfileDesc = _a.getUserProfileDesc, lang = _a.lang;
  78. if (openType === 'getUserInfo' && canIUseGetUserProfile) {
  79. wx.getUserProfile({
  80. desc: getUserProfileDesc || ' ',
  81. lang: lang || 'en',
  82. complete: function (userProfile) {
  83. _this.$emit('getuserinfo', userProfile);
  84. },
  85. });
  86. }
  87. },
  88. },
  89. });
  90. export default global['__wxComponents']['weapp/lib/button/index']
  91. </script>
  92. <style platform="mp-weixin">
  93. @import '../common/index.css';.van-button{-webkit-text-size-adjust:100%;align-items:center;-webkit-appearance:none;border-radius:var(--button-border-radius,2px);box-sizing:border-box;display:inline-flex;font-size:var(--button-default-font-size,16px);height:var(--button-default-height,44px);justify-content:center;line-height:var(--button-line-height,20px);padding:0;position:relative;text-align:center;transition:opacity .2s;vertical-align:middle}.van-button:before{background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";height:100%;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{background:var(--button-default-background-color,#fff);border:var(--button-border-width,1px) solid var(--button-default-border-color,#ebedf0);color:var(--button-default-color,#323233)}.van-button--primary{background:var(--button-primary-background-color,#07c160);border:var(--button-border-width,1px) solid var(--button-primary-border-color,#07c160);color:var(--button-primary-color,#fff)}.van-button--info{background:var(--button-info-background-color,#1989fa);border:var(--button-border-width,1px) solid var(--button-info-border-color,#1989fa);color:var(--button-info-color,#fff)}.van-button--danger{background:var(--button-danger-background-color,#ee0a24);border:var(--button-border-width,1px) solid var(--button-danger-border-color,#ee0a24);color:var(--button-danger-color,#fff)}.van-button--warning{background:var(--button-warning-background-color,#ff976a);border:var(--button-border-width,1px) solid var(--button-warning-border-color,#ff976a);color:var(--button-warning-color,#fff)}.van-button--plain{background:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:var(--button-warning-background-color,#ff976a)}.van-button--large{height:var(--button-large-height,50px);width:100%}.van-button--normal{font-size:var(--button-normal-font-size,14px);padding:0 15px}.van-button--small{font-size:var(--button-small-font-size,12px);height:var(--button-small-height,30px);min-width:var(--button-small-min-width,60px);padding:0 var(--padding-xs,8px)}.van-button--mini{display:inline-block;font-size:var(--button-mini-font-size,10px);height:var(--button-mini-height,22px);min-width:var(--button-mini-min-width,50px)}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:flex;width:100%}.van-button--round{border-radius:var(--button-round-border-radius,999px)}.van-button--square{border-radius:0}.van-button--disabled{opacity:var(--button-disabled-opacity,.5)}.van-button__text{display:inline}.van-button__icon+.van-button__text:not(:empty),.van-button__loading-text{margin-left:4px}.van-button__icon{line-height:inherit!important;min-width:1em;vertical-align:top}.van-button--hairline{border-width:0;padding-top:1px}.van-button--hairline:after{border-color:inherit;border-radius:calc(var(--button-border-radius, 2px)*2);border-width:1px}.van-button--hairline.van-button--round:after{border-radius:var(--button-round-border-radius,999px)}.van-button--hairline.van-button--square:after{border-radius:0}
  94. </style>