refactor(components): [button-group] switch to script-setup syntax (#6256)

This commit is contained in:
blackie 2022-02-24 10:15:28 +08:00 committed by GitHub
parent 7928a4d214
commit c7d738e468
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 22 deletions

View File

@ -123,10 +123,10 @@ button/custom
## Button-Group Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------------ | ------ | --------------------------- | ------- |
| size | control the size of buttons in this button-group | string | large / small | — |
| type | control the type of buttons in this button-group | string | primary / success / warning | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------------ | ------ | --------------------- | ------- |
| size | control the size of buttons in this button-group | string | same as button's size | — |
| type | control the type of buttons in this button-group | string | same as button's type | — |
## Button-Group Slots

View File

@ -3,28 +3,22 @@
<slot></slot>
</div>
</template>
<script lang="ts">
import { defineComponent, provide, reactive, toRef } from 'vue'
<script lang="ts" setup>
import { provide, reactive, toRef } from 'vue'
import { buttonGroupContextKey } from '@element-plus/tokens'
import { useNamespace } from '@element-plus/hooks'
import { buttonGroupProps } from './button-group'
export default defineComponent({
defineOptions({
name: 'ElButtonGroup',
props: buttonGroupProps,
setup(props) {
provide(
buttonGroupContextKey,
reactive({
size: toRef(props, 'size'),
type: toRef(props, 'type'),
})
)
const ns = useNamespace('button')
return {
ns,
}
},
})
const props = defineProps(buttonGroupProps)
provide(
buttonGroupContextKey,
reactive({
size: toRef(props, 'size'),
type: toRef(props, 'type'),
})
)
const ns = useNamespace('button')
</script>