StyleShadowInput

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

基础用法

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

basic.vue

<template>
  <div
    style="width: 100px; height: 100px; margin: 20px; border: 1px solid #ccc"
    :style="value"
  ></div>
  <p>value: {{ value }}</p>
  <hr />
  <dk-style-shadow-input v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref({
  boxShadow: '3px 1px 4px 1px #000,1px 4px 4px 1px #ccc',
})
</script>

独立使用

也可以独立去使用，使用的话则不支持多个阴影

content.vue

<template>
  <div
    style="width: 80%; height: 100px; margin: 20px; border: 1px solid #ccc"
    :style="{ boxShadow: value }"
  ></div>
  <hr class="m-b-10" />
  <dk-style-shadow-content v-model="value"></dk-style-shadow-content>
  <p>value: {{ value }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('4px 4px 3px -2px #E7E5E5FF')
</script>

组件配置

ShadowInput Props

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

ShadowInput Events

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

ShadowInput Slots

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

类型定义

组件导出以下类型定义

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

样式变量

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

名称	默认值
--dk-shadow-input-background	-