Button.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <template>
  2. <div :class="`p-button p-button-${type} p-button-${size} ${minWidth ? 'min-size' : ''} ${disabled ? ('p-button-' + type + '-disabled') : ''} `" @click="handleClick">
  3. <Icon v-if="type === 'icon' || type === 'icon-border' || type === 'icon-text'" type="action" :name='icon' />
  4. <template>
  5. <div v-if="text && type !== 'icon' && type !== 'icon-border'" ref="text" class="p-btn-text">{{text}}</div>
  6. <div v-else-if="type !== 'icon' && type !== 'icon-border'" ref="text" class="p-btn-text"><slot/></div>
  7. </template>
  8. <section class="p-button-loading" v-if="loading && type !== 'icon' && type !== 'icon-border' && type !== 'icon-text' && type !== 'text' && type !== 'text-red' && type !== 'text-blue'">
  9. <Loading16px />
  10. </section>
  11. </div>
  12. </template>
  13. <script>
  14. import LoadingIcon from '../static/iconSvg/loading.svg';
  15. import Loading16px from '../Loading16px';
  16. import Icon from '../Icon';
  17. export default {
  18. name: 'Button',
  19. components: { LoadingIcon, Loading16px, Icon },
  20. props: {
  21. /**
  22. * 按钮文本
  23. */
  24. text: {
  25. type: String,
  26. default: ''
  27. },
  28. /**
  29. * 按钮类型
  30. * 可选值 【default primary error disabled text text-blue text-red icon icon-text icon-border】
  31. */
  32. type: {
  33. type: String,
  34. required: true,
  35. default: 'default'
  36. },
  37. /**
  38. * icon类型
  39. */
  40. icon: {
  41. type: String,
  42. default: ''
  43. },
  44. /**
  45. * 按钮loading状态
  46. */
  47. loading: {
  48. type: Boolean,
  49. default: false
  50. },
  51. /**
  52. * 按钮大小
  53. * 可选值【large medium small】
  54. */
  55. size: {
  56. type: String,
  57. default: 'medium'
  58. },
  59. /**
  60. * 是否禁用
  61. * 可选值 【true, false】
  62. */
  63. disabled: {
  64. type: Boolean,
  65. default: false
  66. }
  67. },
  68. data () {
  69. return {
  70. minWidth: false //小尺寸按钮内容宽度小于28px时,设置按钮最小宽度60px
  71. }
  72. },
  73. watch: {
  74. text () {
  75. this.minWidthAction()
  76. }
  77. },
  78. mounted () {
  79. this.minWidthAction()
  80. },
  81. methods: {
  82. minWidthAction () {
  83. if (this.type === 'icon' || this.type === 'icon-text') return;
  84. if (this.$refs.text) this.minWidth = this.$refs.text.innerHTML.length === 1
  85. },
  86. /**
  87. * 点击按钮的回调
  88. */
  89. handleClick() {
  90. if (this.type === 'disabled' || this.disabled) return;
  91. this.$emit('click')
  92. }
  93. }
  94. }
  95. </script>
  96. <style lang="stylus">
  97. .p-button
  98. position relative
  99. display inline-flex
  100. align-items center
  101. justify-content center
  102. padding-left 8px
  103. padding-right 8px
  104. background-color $white
  105. border-width 1px
  106. border-style solid
  107. border-radius 4px
  108. transition all .36s
  109. font-size 0
  110. text-align center
  111. &:after
  112. content ''
  113. color transparent
  114. &:before
  115. content ''
  116. color transparent
  117. &+.p-button
  118. margin-left 12px
  119. .p-btn-text
  120. overflow hidden
  121. white-space nowrap
  122. text-overflow ellipsis
  123. position relative
  124. /*display ruby*/
  125. //vertical-align middle
  126. z-index 1
  127. user-select none
  128. .p-button-loading
  129. display inline-block
  130. margin-left 4px
  131. vertical-align middle
  132. .p-button-large
  133. max-width 128px
  134. min-width 80px
  135. height 40px
  136. line-height @height - 2
  137. .p-btn-text
  138. font-size 16px
  139. .p-button-loading
  140. width 20px
  141. height 20px
  142. .p-button-medium
  143. max-width 116px
  144. min-width 80px
  145. height 32px
  146. line-height @height - 2
  147. .p-btn-text
  148. font-size 14px
  149. .p-button-loading
  150. width 16px
  151. height 16px
  152. .p-button-small
  153. max-width 108px
  154. min-width 60px
  155. height 28px
  156. line-height @height - 2
  157. .p-btn-text
  158. font-size 14px
  159. .p-button-loading
  160. width 12px
  161. height 12px
  162. .p-button-default, .p-button-icon-text
  163. background-color $white
  164. border-color $grey-400
  165. color $grey-900
  166. cursor pointer
  167. .p-button-loading
  168. path
  169. fill $grey-900
  170. &:hover
  171. border-color $blue-500
  172. color $blue-500
  173. &:active
  174. border-color $blue-600
  175. color $blue-600
  176. &::after
  177. background radial-gradient(circle, $grey-200 10%, transparent 10%)
  178. .loading
  179. path
  180. stroke $grey-400
  181. .p-button-primary
  182. background-color $blue-500
  183. border-color $blue-500
  184. color $white
  185. cursor pointer
  186. &:hover
  187. background-color $blue-400
  188. border-color $blue-400
  189. &:active
  190. background-color $blue-600
  191. border-color $blue-600
  192. &::after
  193. background radial-gradient(circle, $blue-300 10%, transparent 10%)
  194. .p-button-error
  195. background-color $red-500
  196. border-color $red-500
  197. color $white
  198. cursor pointer
  199. &:hover
  200. background-color $red-400
  201. border-color $red-400
  202. &:active
  203. background-color $red-600
  204. border-color $red-600
  205. &::after
  206. background radial-gradient(circle, $red-300 10%, transparent 10%)
  207. .p-button-disabled,
  208. .p-button-default-disabled,
  209. .p-button-primary-disabled,
  210. .p-button-error-disabled
  211. background-color $red-200
  212. color $grey-400
  213. cursor not-allowed
  214. border-color $grey-200
  215. &:hover
  216. background-color $red-200
  217. border-color $red-200
  218. color $grey-400
  219. &:active
  220. background-color $red-200
  221. border-color $red-200
  222. color $grey-400
  223. .p-button-text-blue
  224. border-style none
  225. color $blue-500
  226. cursor pointer
  227. &:hover
  228. color $blue-500
  229. &:active
  230. color $blue-600
  231. .p-button-text-red
  232. border-style none
  233. color $red-500
  234. cursor pointer
  235. &:hover
  236. color $red-400
  237. &:active
  238. color $red-600
  239. .min-size
  240. min-width 0
  241. .p-button-icon,.p-button-icon-border
  242. border-color $grey-400
  243. padding 0
  244. cursor pointer
  245. path
  246. fill $grey-900
  247. transition all .36s
  248. .p-icon
  249. svg
  250. width 100%!important
  251. height 100%!important
  252. .p-button-icon
  253. border-color transparent
  254. &:hover
  255. color $blue-500
  256. path
  257. fill $blue-500
  258. &:active
  259. color $blue-600
  260. path
  261. fill $blue-600
  262. &::after
  263. color $blue-500
  264. path
  265. fill $blue-500
  266. .p-button-icon-border
  267. &:hover
  268. border-color $blue-500
  269. color $blue-500
  270. path
  271. fill $blue-500
  272. &:active
  273. border-color $blue-600
  274. color $blue-600
  275. path
  276. fill $blue-600
  277. &::after
  278. border-color $blue-500
  279. color $blue-500
  280. path
  281. fill $blue-500
  282. .p-button-icon.p-button-large,.p-button-icon-border.p-button-large
  283. width 40px
  284. min-width 40px
  285. .p-icon
  286. width 24px
  287. height 24px
  288. line-height 24px
  289. .p-button-icon.p-button-medium,.p-button-icon-border.p-button-medium
  290. width 32px
  291. min-width 32px
  292. .p-icon
  293. width 16px
  294. height 16px
  295. line-height 16px
  296. .p-button-icon.p-button-small,.p-button-icon-border.p-button-small
  297. width 28px
  298. min-width 28px
  299. .p-icon
  300. width 12px
  301. height 12px
  302. line-height 12px
  303. .p-button-icon-text
  304. border-color transparent
  305. &:hover
  306. border-color transparent
  307. path
  308. fill $grey-900
  309. transition all .36s
  310. &:hover
  311. color $blue-500
  312. path
  313. fill $blue-500
  314. &:active
  315. color $blue-600
  316. path
  317. fill $blue-600
  318. &::after
  319. color $blue-500
  320. path
  321. fill $blue-500
  322. .p-icon
  323. margin-right 4px
  324. svg
  325. width 100%!important
  326. height 100%!important
  327. .p-button-icon-text.p-button-large
  328. .p-icon
  329. width 20px
  330. height 20px
  331. line-height 20px
  332. .p-button-icon-text.p-button-medium
  333. .p-icon
  334. width 16px
  335. height 16px
  336. line-height 16px
  337. .p-button-icon-text.p-button-small
  338. .p-icon
  339. width 12px
  340. height 12px
  341. line-height 12px
  342. .p-button-icon-border-disabled
  343. background-color $red-200
  344. color $grey-400
  345. cursor not-allowed
  346. border-color $red-200
  347. svg
  348. cursor not-allowed
  349. path
  350. fill $grey-400
  351. &:hover
  352. border-color $red-200
  353. path
  354. fill $grey-400
  355. .p-button-icon-disabled
  356. color $grey-400
  357. cursor not-allowed
  358. svg
  359. cursor not-allowed
  360. path
  361. fill $grey-400
  362. &:hover
  363. path
  364. fill $grey-400
  365. .p-button-icon-text-disabled
  366. color $grey-400
  367. cursor not-allowed
  368. svg
  369. cursor not-allowed
  370. path
  371. fill $grey-400
  372. &:hover
  373. color $grey-400
  374. path
  375. fill $grey-400
  376. .p-button-text
  377. border-color transparent
  378. cursor pointer
  379. color $grey-900
  380. &:hover
  381. color $blue-500
  382. border-color transparent
  383. &:active
  384. color $blue-600
  385. .p-button-text-disabled, .p-button-text-blue-disabled, .p-button-text-red-disabled
  386. cursor not-allowed
  387. color $grey-400
  388. &:hover
  389. color $grey-400
  390. </style>