base-button.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div :class="type === '1' ? 'btn' : 'btn1'" :style='`width:${width}px`' class="flex flex-center mr-5 font-12 pointer">
  3. <el-icon color="#E9A956">
  4. <component :is="icon"></component>
  5. </el-icon>
  6. <div class="ml-5 nowrap"> {{ title }}</div>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. name: 'base-button',
  12. props: {
  13. title: {
  14. type: String,
  15. default: '搜索'
  16. },
  17. type: {
  18. type: String,
  19. default: '1'
  20. },
  21. icon: {
  22. type: String,
  23. default: 'Search'
  24. },
  25. width: {
  26. type: Number,
  27. default: 100
  28. }
  29. },
  30. methods: {
  31. click () {
  32. console.log(new Date().getTime())
  33. // this.$nextTick(this.$emit('click'))
  34. }
  35. }
  36. }
  37. </script>
  38. <style lang="scss" scoped>
  39. .btn {
  40. border-radius: 6px;
  41. padding: 8px 16px;
  42. height: 20px;
  43. font-size: 14px;
  44. background-color: #AB7630;
  45. color: white;
  46. }
  47. .btn1 {
  48. border-radius: 6px;
  49. padding: 8px 16px;
  50. height: 20px;
  51. font-size: 14px;
  52. background-color: white;
  53. color: #AB7630;
  54. border: 1px solid #ECAB56;
  55. }
  56. </style>