hookehuyr

✨ feat(组件): 按钮组件新增自定义样式和点击回调

1 <template> 1 <template>
2 - <div v-if="type === 'primary'" class="button-primary"> 2 + <div v-if="type === 'primary'" class="button-primary" @click="handle">
3 <slot></slot> 3 <slot></slot>
4 </div> 4 </div>
5 - <div v-if="type === 'plain'" class="button-plain"> 5 + <div v-if="type === 'plain'" class="button-plain" @click="handle">
6 + <slot></slot>
7 + </div>
8 + <div v-if="type === 'custom'" :style="customStyle" class="button-custom" @click="handle">
6 <slot></slot> 9 <slot></slot>
7 </div> 10 </div>
8 </template> 11 </template>
...@@ -10,9 +13,13 @@ ...@@ -10,9 +13,13 @@
10 <script setup> 13 <script setup>
11 import { ref, reactive, onMounted } from 'vue' 14 import { ref, reactive, onMounted } from 'vue'
12 const props = defineProps({ 15 const props = defineProps({
13 - type: String 16 + type: String,
17 + customStyle: Object
14 }) 18 })
15 - 19 +const emit = defineEmits(['on-click']);
20 +const handle = () => {
21 + emit('on-click', '')
22 +}
16 onMounted(() => { 23 onMounted(() => {
17 24
18 }) 25 })
...@@ -35,6 +42,7 @@ export default { ...@@ -35,6 +42,7 @@ export default {
35 </script> 42 </script>
36 43
37 <style lang="less" scoped> 44 <style lang="less" scoped>
45 +@base: #F9D95C;
38 .button-primary { 46 .button-primary {
39 width: auto; 47 width: auto;
40 height: auto; 48 height: auto;
...@@ -42,9 +50,9 @@ export default { ...@@ -42,9 +50,9 @@ export default {
42 padding: 0.6rem; 50 padding: 0.6rem;
43 margin: 0.5rem; 51 margin: 0.5rem;
44 font-size: 1rem; 52 font-size: 1rem;
45 - background: #F9D95C; 53 + background: @base;
46 border-radius: 24px; 54 border-radius: 24px;
47 - border: 1px solid #F9D95C; 55 + border: 1px solid @base;
48 color: #0B3A72; 56 color: #0B3A72;
49 } 57 }
50 .button-plain { 58 .button-plain {
...@@ -59,4 +67,13 @@ export default { ...@@ -59,4 +67,13 @@ export default {
59 border: 1px solid #0B3A72; 67 border: 1px solid #0B3A72;
60 color: #0B3A72; 68 color: #0B3A72;
61 } 69 }
70 + .button-custom {
71 + width: auto;
72 + height: auto;
73 + text-align: center;
74 + padding: 0.6rem;
75 + font-size: 1rem;
76 + border-radius: 24px;
77 + border: 1px solid;
78 + }
62 </style> 79 </style>
...\ No newline at end of file ...\ No newline at end of file
......