PosterInput

海报编辑器，相比原来版本，增加了海报的自定义拖拽组件，开发者可以通过传入views配置项实现额外的海报内容，移除原有的事件传参。

海报编辑器

可以直接使用dk-poster实现海报效果，通过v-model双向绑定即可使用，默认三个元素，如果需要额外新增元素，则传入Props:views即可

海报弹窗编辑

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

basic.vue

<template>
  <dk-poster-input v-model="posterData" />
  <p>数据为：{{ posterData }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const posterData = ref({
  background:
    'https://dk-independence-1251560393.cos.ap-chengdu.myqcloud.com/image/2022/08/a347a202208081130392521.png',
  width: 336,
  height: 600,
  borderRadius: 0,
  views: [
    // {
    //   name: 'avatar',
    //   type: 'image',
    //   css: { left: 143, top: 378, width: 50, height: 50, borderRadius: 60, borderColor: '#fff', borderWidth: 2 },
    //   text: '用户头像',
    //   image: '',
    //   component: 'DkPosterViewAvatar',
    //   lockAspectRatio: true,
    // },
    // {
    //   name: 'qrcode',
    //   type: 'image',
    //   css: { left: 128, top: 450, width: 80, height: 80, color: '#000', background: '#fff', borderRadius: 0 },
    //   text: '二维码',
    //   image: '',
    //   component: 'DkPosterViewQrcode',
    //   lockAspectRatio: true,
    // },
    {
      name: 'name',
      type: 'text',
      css: {
        left: 0,
        top: 426,
        height: 111,
        width: 314,
        fontSize: 16,
        color: '#FFFFFF',
        textAlign: 'center',
      },
      text: '用户昵称',
      content: '用户昵称',
      component: 'DkPosterViewName',
      lockAspectRatio: false,
    },
  ],
})
</script>

组件配置

PosterInput Props

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

PosterInput Events

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

PosterInput Slots

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

类型定义

组件导出以下类型定义

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

样式变量

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

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