StyleInput

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

基础用法

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

basic.vue

<template>
  <div style="display: flex; justify-content: space-between">
    <div style="width: 500px; background: #f5f5f5">
      <div :style="style">{{ style }}</div>
    </div>
    <div>
      <dk-style-input v-model="style" style="width: 400px" :is-drawer="false" />
    </div>
  </div>
  <div>
    <dk-style-input v-model="style" style="width: 400px" :is-drawer="true" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const style = ref({
  marginLeft: 'auto',
  marginTop: '8px',
  marginRight: 'auto',
  marginBottom: '8px',
  paddingLeft: '10px',
  paddingTop: '10px',
  paddingRight: '10px',
  paddingBottom: '10px',
  width: '300px',
  height: '400px',
  color: '#000',
  backgroundColor: 'rgba(240, 195, 195, 1)',
  borderWidth: '1px',
  borderStyle: 'dotted',
  borderColor: '#9E3838',
  borderRadius: '20px 20px 0px 0px',
  boxShadow: '3px 5px 7px 2px #CBCBCBFF',
  'text-align': 'center',
})
</script>

组件配置

StyleInput Props

属性	说明	类型	默认值
components	引入组件	Array as () => StyleInputConfig[]	defaultConfig
hideComponents	需要隐藏的组件	Array as () => string[]	[]
isDrawer	是否以抽屉形式显示	Boolean	false
drawerProps	抽屉属性	Object	{ title: '编辑样式', direction: 'rtl', size: '400px' }
drawerText	抽屉文本	String	'编辑样式'

StyleInput Events

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

StyleInput Slots

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

类型定义

组件导出以下类型定义

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

样式变量

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

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