u-button.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  1. <template>
  2. <!-- #ifndef APP-NVUE -->
  3. <button
  4. :hover-start-time="Number(hoverStartTime)"
  5. :hover-stay-time="Number(hoverStayTime)"
  6. :form-type="formType"
  7. :open-type="openType"
  8. :app-parameter="appParameter"
  9. :hover-stop-propagation="hoverStopPropagation"
  10. :send-message-title="sendMessageTitle"
  11. :send-message-path="sendMessagePath"
  12. :lang="lang"
  13. :data-name="dataName"
  14. :session-from="sessionFrom"
  15. :send-message-img="sendMessageImg"
  16. :show-message-card="showMessageCard"
  17. @getphonenumber="getphonenumber"
  18. @getuserinfo="getuserinfo"
  19. @error="error"
  20. @opensetting="opensetting"
  21. @launchapp="launchapp"
  22. :hover-class="!disabled && !loading ? 'u-button--active' : ''"
  23. class="u-button u-reset-button"
  24. :style="[baseColor, $u.addStyle(customStyle)]"
  25. @tap="clickHandler"
  26. :class="bemClass"
  27. >
  28. <template v-if="loading">
  29. <u-loading-icon
  30. :mode="loadingMode"
  31. :size="loadingSize * 1.15"
  32. :color="loadingColor"
  33. ></u-loading-icon>
  34. <text
  35. class="u-button__loading-text"
  36. :style="[{ fontSize: textSize + 'px' }]"
  37. >{{ loadingText || text }}</text
  38. >
  39. </template>
  40. <template v-else>
  41. <u-icon
  42. v-if="icon"
  43. :name="icon"
  44. :color="iconColorCom"
  45. :size="textSize * 1.35"
  46. :customStyle="{ marginRight: '2px' }"
  47. ></u-icon>
  48. <slot>
  49. <text
  50. class="u-button__text"
  51. :style="[{ fontSize: textSize + 'px' }]"
  52. >{{ text }}</text
  53. >
  54. </slot>
  55. </template>
  56. </button>
  57. <!-- #endif -->
  58. <!-- #ifdef APP-NVUE -->
  59. <view
  60. :hover-start-time="Number(hoverStartTime)"
  61. :hover-stay-time="Number(hoverStayTime)"
  62. class="u-button"
  63. :hover-class="
  64. !disabled && !loading && !color && (plain || type === 'info')
  65. ? 'u-button--active--plain'
  66. : !disabled && !loading && !plain
  67. ? 'u-button--active'
  68. : ''
  69. "
  70. @tap="clickHandler"
  71. :class="bemClass"
  72. :style="[baseColor, $u.addStyle(customStyle)]"
  73. >
  74. <template v-if="loading">
  75. <u-loading-icon
  76. :mode="loadingMode"
  77. :size="loadingSize * 1.15"
  78. :color="loadingColor"
  79. ></u-loading-icon>
  80. <text
  81. class="u-button__loading-text"
  82. :style="[nvueTextStyle]"
  83. :class="[plain && `u-button__text--plain--${type}`]"
  84. >{{ loadingText || text }}</text
  85. >
  86. </template>
  87. <template v-else>
  88. <u-icon
  89. v-if="icon"
  90. :name="icon"
  91. :color="iconColorCom"
  92. :size="textSize * 1.35"
  93. ></u-icon>
  94. <text
  95. class="u-button__text"
  96. :style="[
  97. {
  98. marginLeft: icon ? '2px' : 0,
  99. },
  100. nvueTextStyle,
  101. ]"
  102. :class="[plain && `u-button__text--plain--${type}`]"
  103. >{{ text }}</text
  104. >
  105. </template>
  106. </view>
  107. <!-- #endif -->
  108. </template>
  109. <script>
  110. import button from "../../libs/mixin/button.js";
  111. import openType from "../../libs/mixin/openType.js";
  112. import props from "./props.js";
  113. /**
  114. * button 按钮
  115. * @description Button 按钮
  116. * @tutorial https://www.uviewui.com/components/button.html
  117. *
  118. * @property {Boolean} hairline 是否显示按钮的细边框 (默认 true )
  119. * @property {String} type 按钮的预置样式,info,primary,error,warning,success (默认 'info' )
  120. * @property {String} size 按钮尺寸,large,normal,mini (默认 normal)
  121. * @property {String} shape 按钮形状,circle(两边为半圆),square(带圆角) (默认 'square' )
  122. * @property {Boolean} plain 按钮是否镂空,背景色透明 (默认 false)
  123. * @property {Boolean} disabled 是否禁用 (默认 false)
  124. * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台,在 ios 上为雪花,Android上为圆圈) (默认 false)
  125. * @property {String | Number} loadingText 加载中提示文字
  126. * @property {String} loadingMode 加载状态图标类型 (默认 'spinner' )
  127. * @property {String | Number} loadingSize 加载图标大小 (默认 15 )
  128. * @property {String} openType 开放能力,具体请看uniapp稳定关于button组件部分说明
  129. * @property {String} formType 用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
  130. * @property {String} appParameter 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 (注:只微信小程序、QQ小程序有效)
  131. * @property {Boolean} hoverStopPropagation 指定是否阻止本节点的祖先节点出现点击态,微信小程序有效(默认 true )
  132. * @property {String} lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文(默认 en )
  133. * @property {String} sessionFrom 会话来源,openType="contact"时有效
  134. * @property {String} sendMessageTitle 会话内消息卡片标题,openType="contact"时有效
  135. * @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径,openType="contact"时有效
  136. * @property {String} sendMessageImg 会话内消息卡片图片,openType="contact"时有效
  137. * @property {Boolean} showMessageCard 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效(默认false)
  138. * @property {String} dataName 额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取
  139. * @property {String | Number} throttleTime 节流,一定时间内只能触发一次 (默认 0 )
  140. * @property {String | Number} hoverStartTime 按住后多久出现点击态,单位毫秒 (默认 0 )
  141. * @property {String | Number} hoverStayTime 手指松开后点击态保留时间,单位毫秒 (默认 200 )
  142. * @property {String | Number} text 按钮文字,之所以通过props传入,是因为slot传入的话(注:nvue中无法控制文字的样式)
  143. * @property {String} icon 按钮图标
  144. * @property {String} iconColor 按钮图标颜色
  145. * @property {String} color 按钮颜色,支持传入linear-gradient渐变色
  146. * @property {Object} customStyle 定义需要用到的外部样式
  147. *
  148. * @event {Function} click 非禁止并且非加载中,才能点击
  149. * @event {Function} getphonenumber open-type="getPhoneNumber"时有效
  150. * @event {Function} getuserinfo 用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfo
  151. * @event {Function} error 当使用开放能力时,发生错误的回调
  152. * @event {Function} opensetting 在打开授权设置页并关闭后回调
  153. * @event {Function} launchapp 打开 APP 成功的回调
  154. * @example <u-button>月落</u-button>
  155. */
  156. export default {
  157. name: "u-button",
  158. // #ifdef MP
  159. mixins: [uni.$u.mpMixin, uni.$u.mixin, button, openType, props],
  160. // #endif
  161. // #ifndef MP
  162. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  163. // #endif
  164. data() {
  165. return {};
  166. },
  167. computed: {
  168. // 生成bem风格的类名
  169. bemClass() {
  170. // this.bem为一个computed变量,在mixin中
  171. if (!this.color) {
  172. return this.bem(
  173. "button",
  174. ["type", "shape", "size"],
  175. ["disabled", "plain", "hairline"]
  176. );
  177. } else {
  178. // 由于nvue的原因,在有color参数时,不需要传入type,否则会生成type相关的类型,影响最终的样式
  179. return this.bem(
  180. "button",
  181. ["shape", "size"],
  182. ["disabled", "plain", "hairline"]
  183. );
  184. }
  185. },
  186. loadingColor() {
  187. if (this.plain) {
  188. // 如果有设置color值,则用color值,否则使用type主题颜色
  189. return this.color
  190. ? this.color
  191. : uni.$u.config.color[`u-${this.type}`];
  192. }
  193. if (this.type === "info") {
  194. return "#c9c9c9";
  195. }
  196. return "rgb(200, 200, 200)";
  197. },
  198. iconColorCom() {
  199. // 如果是镂空状态,设置了color就用color值,否则使用主题颜色,
  200. // u-icon的color能接受一个主题颜色的值
  201. if (this.iconColor) return this.iconColor;
  202. if (this.plain) {
  203. return this.color ? this.color : this.type;
  204. } else {
  205. return this.type === "info" ? "#000000" : "#ffffff";
  206. }
  207. },
  208. baseColor() {
  209. let style = {};
  210. if (this.color) {
  211. // 针对自定义了color颜色的情况,镂空状态下,就是用自定义的颜色
  212. style.color = this.plain ? this.color : "white";
  213. if (!this.plain) {
  214. // 非镂空,背景色使用自定义的颜色
  215. style["background-color"] = this.color;
  216. }
  217. if (this.color.indexOf("gradient") !== -1) {
  218. // 如果自定义的颜色为渐变色,不显示边框,以及通过backgroundImage设置渐变色
  219. // weex文档说明可以写borderWidth的形式,为什么这里需要分开写?
  220. // 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西,所以需要这么写才有效
  221. style.borderTopWidth = 0;
  222. style.borderRightWidth = 0;
  223. style.borderBottomWidth = 0;
  224. style.borderLeftWidth = 0;
  225. if (!this.plain) {
  226. style.backgroundImage = this.color;
  227. }
  228. } else {
  229. // 非渐变色,则设置边框相关的属性
  230. style.borderColor = this.color;
  231. style.borderWidth = "1px";
  232. style.borderStyle = "solid";
  233. }
  234. }
  235. return style;
  236. },
  237. // nvue版本按钮的字体不会继承父组件的颜色,需要对每一个text组件进行单独的设置
  238. nvueTextStyle() {
  239. let style = {};
  240. // 针对自定义了color颜色的情况,镂空状态下,就是用自定义的颜色
  241. if (this.type === "info") {
  242. style.color = "#323233";
  243. }
  244. if (this.color) {
  245. style.color = this.plain ? this.color : "white";
  246. }
  247. style.fontSize = this.textSize + "px";
  248. return style;
  249. },
  250. // 字体大小
  251. textSize() {
  252. let fontSize = 14,
  253. { size } = this;
  254. if (size === "large") fontSize = 16;
  255. if (size === "normal") fontSize = 14;
  256. if (size === "small") fontSize = 12;
  257. if (size === "mini") fontSize = 10;
  258. return fontSize;
  259. },
  260. },
  261. methods: {
  262. clickHandler() {
  263. // 非禁止并且非加载中,才能点击
  264. if (!this.disabled && !this.loading) {
  265. // 进行节流控制,每this.throttle毫秒内,只在开始处执行
  266. uni.$u.throttle(() => {
  267. this.$emit("click");
  268. }, this.throttleTime);
  269. }
  270. },
  271. // 下面为对接uniapp官方按钮开放能力事件回调的对接
  272. getphonenumber(res) {
  273. this.$emit("getphonenumber", res);
  274. },
  275. getuserinfo(res) {
  276. this.$emit("getuserinfo", res);
  277. },
  278. error(res) {
  279. this.$emit("error", res);
  280. },
  281. opensetting(res) {
  282. this.$emit("opensetting", res);
  283. },
  284. launchapp(res) {
  285. this.$emit("launchapp", res);
  286. },
  287. },
  288. };
  289. </script>
  290. <style lang="scss" scoped>
  291. @import "../../libs/css/components.scss";
  292. /* #ifndef APP-NVUE */
  293. @import "./vue.scss";
  294. /* #endif */
  295. /* #ifdef APP-NVUE */
  296. @import "./nvue.scss";
  297. /* #endif */
  298. $u-button-u-button-height: 40px !default;
  299. $u-button-text-font-size: 15px !default;
  300. $u-button-loading-text-font-size: 15px !default;
  301. $u-button-loading-text-margin-left: 4px !default;
  302. $u-button-large-width: 100% !default;
  303. $u-button-large-height: 50px !default;
  304. $u-button-normal-padding: 0 12px !default;
  305. $u-button-large-padding: 0 15px !default;
  306. $u-button-normal-font-size: 14px !default;
  307. $u-button-small-min-width: 60px !default;
  308. $u-button-small-height: 30px !default;
  309. $u-button-small-padding: 0px 8px !default;
  310. $u-button-mini-padding: 0px 8px !default;
  311. $u-button-small-font-size: 12px !default;
  312. $u-button-mini-height: 22px !default;
  313. $u-button-mini-font-size: 10px !default;
  314. $u-button-mini-min-width: 50px !default;
  315. $u-button-disabled-opacity: 0.5 !default;
  316. $u-button-info-color: #323233 !default;
  317. $u-button-info-background-color: #fff !default;
  318. $u-button-info-border-color: #ebedf0 !default;
  319. $u-button-info-border-width: 1px !default;
  320. $u-button-info-border-style: solid !default;
  321. $u-button-success-color: #fff !default;
  322. $u-button-success-background-color: $u-success !default;
  323. $u-button-success-border-color: $u-button-success-background-color !default;
  324. $u-button-success-border-width: 1px !default;
  325. $u-button-success-border-style: solid !default;
  326. $u-button-primary-color: #fff !default;
  327. $u-button-primary-background-color: $u-primary !default;
  328. $u-button-primary-border-color: $u-button-primary-background-color !default;
  329. $u-button-primary-border-width: 1px !default;
  330. $u-button-primary-border-style: solid !default;
  331. $u-button-error-color: #fff !default;
  332. $u-button-error-background-color: $u-error !default;
  333. $u-button-error-border-color: $u-button-error-background-color !default;
  334. $u-button-error-border-width: 1px !default;
  335. $u-button-error-border-style: solid !default;
  336. $u-button-warning-color: #fff !default;
  337. $u-button-warning-background-color: $u-warning !default;
  338. $u-button-warning-border-color: $u-button-warning-background-color !default;
  339. $u-button-warning-border-width: 1px !default;
  340. $u-button-warning-border-style: solid !default;
  341. $u-button-block-width: 100% !default;
  342. $u-button-circle-border-top-right-radius: 100px !default;
  343. $u-button-circle-border-top-left-radius: 100px !default;
  344. $u-button-circle-border-bottom-left-radius: 100px !default;
  345. $u-button-circle-border-bottom-right-radius: 100px !default;
  346. $u-button-square-border-top-right-radius: 3px !default;
  347. $u-button-square-border-top-left-radius: 3px !default;
  348. $u-button-square-border-bottom-left-radius: 3px !default;
  349. $u-button-square-border-bottom-right-radius: 3px !default;
  350. $u-button-icon-min-width: 1em !default;
  351. $u-button-plain-background-color: #fff !default;
  352. $u-button-hairline-border-width: 0.5px !default;
  353. .u-button {
  354. height: $u-button-u-button-height;
  355. position: relative;
  356. align-items: center;
  357. justify-content: center;
  358. @include flex;
  359. /* #ifndef APP-NVUE */
  360. box-sizing: border-box;
  361. /* #endif */
  362. flex-direction: row;
  363. width: fit-content;
  364. &__text {
  365. font-size: $u-button-text-font-size;
  366. }
  367. &__loading-text {
  368. font-size: $u-button-loading-text-font-size;
  369. margin-left: $u-button-loading-text-margin-left;
  370. }
  371. &--large {
  372. /* #ifndef APP-NVUE */
  373. width: $u-button-large-width;
  374. /* #endif */
  375. height: $u-button-large-height;
  376. padding: $u-button-large-padding;
  377. }
  378. &--normal {
  379. padding: $u-button-normal-padding;
  380. font-size: $u-button-normal-font-size;
  381. }
  382. &--small {
  383. /* #ifndef APP-NVUE */
  384. min-width: $u-button-small-min-width;
  385. /* #endif */
  386. height: $u-button-small-height;
  387. padding: $u-button-small-padding;
  388. font-size: $u-button-small-font-size;
  389. }
  390. &--mini {
  391. height: $u-button-mini-height;
  392. font-size: $u-button-mini-font-size;
  393. /* #ifndef APP-NVUE */
  394. min-width: $u-button-mini-min-width;
  395. /* #endif */
  396. padding: $u-button-mini-padding;
  397. }
  398. &--disabled {
  399. opacity: $u-button-disabled-opacity;
  400. }
  401. &--info {
  402. color: $u-button-info-color;
  403. background-color: $u-button-info-background-color;
  404. border-color: $u-button-info-border-color;
  405. border-width: $u-button-info-border-width;
  406. border-style: $u-button-info-border-style;
  407. }
  408. &--success {
  409. color: $u-button-success-color;
  410. background-color: $u-button-success-background-color;
  411. border-color: $u-button-success-border-color;
  412. border-width: $u-button-success-border-width;
  413. border-style: $u-button-success-border-style;
  414. }
  415. &--primary {
  416. color: $u-button-primary-color;
  417. background-color: $u-button-primary-background-color;
  418. border-color: $u-button-primary-border-color;
  419. border-width: $u-button-primary-border-width;
  420. border-style: $u-button-primary-border-style;
  421. }
  422. &--error {
  423. color: $u-button-error-color;
  424. background-color: $u-button-error-background-color;
  425. border-color: $u-button-error-border-color;
  426. border-width: $u-button-error-border-width;
  427. border-style: $u-button-error-border-style;
  428. }
  429. &--warning {
  430. color: $u-button-warning-color;
  431. background-color: $u-button-warning-background-color;
  432. border-color: $u-button-warning-border-color;
  433. border-width: $u-button-warning-border-width;
  434. border-style: $u-button-warning-border-style;
  435. }
  436. &--block {
  437. @include flex;
  438. width: $u-button-block-width;
  439. }
  440. &--circle {
  441. border-top-right-radius: $u-button-circle-border-top-right-radius;
  442. border-top-left-radius: $u-button-circle-border-top-left-radius;
  443. border-bottom-left-radius: $u-button-circle-border-bottom-left-radius;
  444. border-bottom-right-radius: $u-button-circle-border-bottom-right-radius;
  445. }
  446. &--square {
  447. border-bottom-left-radius: $u-button-square-border-top-right-radius;
  448. border-bottom-right-radius: $u-button-square-border-top-left-radius;
  449. border-top-left-radius: $u-button-square-border-bottom-left-radius;
  450. border-top-right-radius: $u-button-square-border-bottom-right-radius;
  451. }
  452. &__icon {
  453. /* #ifndef APP-NVUE */
  454. min-width: $u-button-icon-min-width;
  455. line-height: inherit !important;
  456. vertical-align: top;
  457. /* #endif */
  458. }
  459. &--plain {
  460. background-color: $u-button-plain-background-color;
  461. }
  462. &--hairline {
  463. border-width: $u-button-hairline-border-width !important;
  464. }
  465. }
  466. </style>