StyleBorderInput

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

基础用法

基础用法基础用法基础用法基础用法基础用法基础用法。

basic.vue

<template>
  <div style="display: flex; justify-content: space-around">
    <div style="width: 30%; height: 100px">
      <div
        :style="border"
        style="width: 80%; height: 100px; margin: 0 auto"
      ></div>
    </div>
    <div style="width: 30%">值：{{ border }}</div>
    <dk-style-border-input
      v-model="border"
      style="width: 30%; min-width: 400px"
    />
  </div>
  <div class="m-t-20px">
    <el-button @click="edit()">编辑</el-button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const border = ref({
  borderWidth: '2px',
  borderStyle: 'solid',
  borderColor: '#553DAF',
  borderRadius: '20px',
})

const edit = () => {
  border.value = {}
}
</script>

组件配置

StyleBorderInput Props

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

StyleBorderInput Events

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

StyleBorderInput Slots

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

类型定义

组件导出以下类型定义

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

样式变量

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

名称	默认值
--dk-style-border-input-background	-