myuandiy v1.0.25

Install

npm install myuandiy

Quick Start

import { createApp } from 'vue'
import App from './App.vue'

let Vue=createApp(App)

import Myuandiy from "myuandiy";
import "myuandiy/style.css"
Vue.use(Myuandiy);

Vue.mount('#app')

使用示例

<template>
  <Myuandiy  @tijiao="Tijiao" shangchuanurl="https://www.baidu.com"  ></Myuandiy>
</template>
<script setup  >
	const Tijiao=(e)=>{
		console.log(e);
	}
</script>

上传说明

1.为组件传入shangchuanurl值 上传图片和视频时,传值会自动传类型{c:'tu'}或{c:'shipin'} 返回时需要返回参数 {url:'https://www.baidu.com/ZeK6Nil6jlIzNZPI6NYO5klNd6.mp4'}或{shu:'https://www.baidu.com/ZeK6Nil6jlIzNZPI6NYO5klNd6.mp4'}

2.也可自行处理上传

自行上传示例

<template>
<Myuandiy  @tijiao="Tijiao"   @zjshangchuan='zjshangchuan' zjshang="1" ></Myuandiy>
</template>
<script setup  >
	const Tijiao=(e)=>{
		console.log(e);
	}
	// 双击上传后触发
	const zjshangchuan=(e)=>{
		// 修改为你想要的图片即可
		e[0][e[1]]='https://www.baidu.com/01415202efa5737bc4c1fa1996686f3c.png'
	}
</script>

拓展示例

可以将头部的结构进行自定义，也可进行编辑内容的直接修改

<template>
	<Myuandiy ref="diy" :zitilie="zitilie"
		shangchuanurl="https://www.baidu.com" >
		<button @click="tj">提交</button>
		<button @click="gaimoban(1)">改模板1</button>
		<button @click="gaimoban(2)">改模板2</button>
	</Myuandiy>
</template>


<script setup  >
import { ref } from 'vue'

const shu1 = ref({
	biaoti: '',
	yangshi: {
		height: 1334,
		backgroundColor: 'red',
		isBackgroundColor: true,
		backgroundImage: '',
		isBackgroundImage: false,
		backgroundRepeat: 'no-repeat',
		backgroundOpacity: 100
	},
	shu: [{
		buju:1,leixing:"Tu",ming:"图片",
		shu:[{ tu: 'https://www.baidu.com/01415202efa5737bc4c1fa1996686f3c.png', url: '' }],
		tu:"iconfuhao-tupian",
		yangshi:{backgroundRepeat:"no-repeat",borderColor:"#e72b2b",borderStyle:"solid",borderWidth:1,
		height:300,left:70.75,opacity:100,padding:0,rotate:0,scale:1,top:300,width:562.5,zIndex:1000},
	}]
})
const shu2 = ref({
	biaoti: '',
	yangshi: {
		height: 1334,
		backgroundColor: 'red',
		isBackgroundColor: true,
		backgroundImage: '',
		isBackgroundImage: false,
		backgroundRepeat: 'no-repeat',
		backgroundOpacity: 100
	},
	shu: [{
		buju:1,leixing:"Tu",ming:"图片",
		shu:[{ tu: 'https://www.baidu.com/01415202efa5737bc4c1fa1996686f3c.png', url: '' }],
		tu:"iconfuhao-tupian",
		yangshi:{backgroundRepeat:"no-repeat",borderColor:"#e72b2b",borderStyle:"solid",borderWidth:1,
		height:300,left:0,opacity:100,padding:0,rotate:0,scale:1,top:300,width:750,zIndex:1000},
	}]
})

// 字体列示例，对象的下标需与pinyin字段的相同
const zitilie=ref({
	yangrendongzhushiti:{ming:"杨任东竹石体",pinyin:"yangrendongzhushiti",
	svg:"https://www.baidu.com/yangrendongzhushiti.svg",
	url:"https://www.baidu.com/yangrendongzhushiti.woff"},
	cangerfeibaiw05:{ming:"苍耳非白W05",pinyin:"cangerfeibaiw05",
	svg:"https://www.baidu.com/cangerfeibaiw05.svg",
	url:"https://www.baidu.com/cangerfeibaiw05.woff"}
})
const diy = ref();

// 获取自定义编辑结果
const tj = (e) => {
	console.log(diy.value.tj());
}

// 设置模板示例
const gaimoban = (e) => {
	if(e==1){
		diy.value.gaimoban(JSON.parse(JSON.stringify(shu1.value)))
	}else if(e==2){
		diy.value.gaimoban(JSON.parse(JSON.stringify(shu2.value)))
	}
}
</script>