ytRealCanvas 实时canvas组件

实例属性

属性名	默认值	类型	描述	是否必填
dialogTitle	预览图片	String	预览图片的弹窗标题
canEdit	true	Boolean	是否可以编辑
inputSize	small	String	所有input的尺寸（可选值：medium / small / mini）
inputRows	{minRows: 1,maxRows: 5}	Object	设置输入框默认高度，最小接收行数和最大行数
receivedForm	{}	Object	设置接收到的formData数据	true

事件

null

简单使用

<!--
 * @Description: canvas实时展示输入的内容的使用 页面
 * @Author: mhf
 * @Date: 2023/10/21
-->
<template>
  <div>
    <ytRealCanvas
        :dialogTitle="'弹窗标题'"
        :canEdit="canEdit"
        :inputSize="'mini'"
        :inputRows="{ minRows: 1, maxRows: 3 }"
        :receivedForm="formData"
    />
    <hr/>
    <el-form ref="form" label-width="120px">
      <el-form-item label="是否可编辑 : ">
        <el-radio-group v-model="canEdit">
          <el-radio
              v-for="(item, index) in canEditOption"
              :label="item.value"
              :key="index"
          >{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "useYtRealCanvas",
  components: {},
  props: {},
  computed: {},
  watch: {},
  filters: {},
  data() {
    return {
      formData: {
        programContent: "@mhfwork/yt-ui组件库@mhfwork/yt-ui组件库",
        textFont: "20",
        textCase: "隶书",
        textColor: "#FFF",
        background: "#000",
        textHeight: "40",
        haveGrid: true,
        leftNum: 20,
        topNum: 40,
        byteLength: 21,
      },
      canEdit: false,
      canEditOption: [
        {
          label: "是",
          value: true,
        },
        {
          label: "否",
          value: false,
        },
      ],
    };
  },
  methods: {
    getFormData() {
      console.log(this.formData);
    },
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
};
</script>

<style lang="scss" scoped></style>