BoxSizeInput

组件描述组件描述组件描述组件描述组件描述组件描述。

基础用法

可以设置不同的边的值，按照css中padding和margin的设置方式，上左下右。

basic.vue

<template>
  <dk-box-size-input v-model="box" />
  <p>值：{{ box }}</p>
  <el-button v-for="(_box, key) in boxs" :key="key" @click="box = _box"
    >{{ key + 1 }}个参数</el-button
  >
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const boxs = ['10px', '12px 10rem', '15px 10rem 3%', '18px 10rem 3% 50px']
const box = ref('0rem 10px 0.4px 30px')
</script>

设置弧度

可以传入type为radius，组件将改变图标为四个角的位置。

组件配置

BoxSizeInput Props

属性	说明	类型	默认值
type	参数类型	string	-

BoxSizeInput Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

BoxSizeInput Slots

插槽名	说明
default	自定义默认内容

类型定义

组件导出以下类型定义

import type { BoxSizeInputProps } from '@vipl520/dk-ui'

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值
--dk-box-size-input-background	-