宫格图片插件
This commit is contained in:
parent
0ab34e7aa3
commit
8e0b9f72d5
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "aix-win-ws",
|
||||
"version": "2.5.6",
|
||||
"version": "2.5.7",
|
||||
"description": "",
|
||||
"main": "./out/main/index.js",
|
||||
"author": "上海交大重庆人工智能研究院",
|
||||
|
|
|
@ -1,3 +1,16 @@
|
|||
<!--
|
||||
依赖: vuedraggable、v-viewer
|
||||
属性: showToolbar //是否显示工具栏 默认:false
|
||||
工具栏 添加图片:默认6个测试图片,不输入框添加则添加默认,输入图片链接,展示图片链接的图片
|
||||
清空图片:清空图片
|
||||
事件: clear 清空时触发
|
||||
outIndex 超出九个图片时触发
|
||||
方法: addPic //添加图片
|
||||
参数: src 图片链接
|
||||
clearPic //清空图片
|
||||
参数: 无
|
||||
使用方法: 加载组件后,通过ref调用addPic方法添加图片即可
|
||||
-->
|
||||
<template>
|
||||
<div style="position: relative;height: 100%;width: 100%;">
|
||||
<draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
|
||||
|
@ -9,16 +22,21 @@
|
|||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<el-input style="position:fixed;bottom: 20px;right: 180px;width: 1000px" v-model="inputValue" type="text" />
|
||||
<el-button class="add-btn" @click="addPic">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button style="position:fixed;bottom: 20px;right: 80px;" @click="startPencil">
|
||||
画笔
|
||||
</el-button>
|
||||
<div class="modal-mode">
|
||||
<canvas id="canvas_pic_001" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></canvas>
|
||||
<div v-if="showToolbar" class="grid-pic-toolbar">
|
||||
<el-input style="width: 500px" v-model="inputValue" type="text" />
|
||||
<el-button class="add-btn" @click="pushPic">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button class="add-btn" @click="clearPic">
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- <el-button style="position:fixed;bottom: 20px;right: 80px;" @click="startPencil">
|
||||
画笔
|
||||
</el-button>-->
|
||||
<!-- <div class="modal-mode">
|
||||
<canvas id="canvas_pic_001" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></canvas>
|
||||
</div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -26,10 +44,18 @@
|
|||
import {ref, computed, onMounted} from 'vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import ViewerItem from "./viewer-item.vue";
|
||||
import Fabric from 'fabric';
|
||||
// import Fabric from 'fabric';
|
||||
const gridPicList = ref([])
|
||||
const inputValue = ref('')
|
||||
const isShow = ref(false)
|
||||
const emits = defineEmits(['clear','outIndex']);
|
||||
|
||||
const props = defineProps({
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
// 获取图片样式
|
||||
const getWH = (item,index)=>{
|
||||
return {
|
||||
|
@ -118,13 +144,19 @@
|
|||
}
|
||||
})
|
||||
|
||||
const pushPic = () => {
|
||||
let src = inputValue.value||picList[gridPicList.value.length]
|
||||
addPic(src)
|
||||
}
|
||||
// 添加图片
|
||||
const addPic = () => {
|
||||
const addPic = (src) => {
|
||||
if (gridPicList.value.length >= 9) {
|
||||
console.log("超出九个图片")
|
||||
emits('outIndex')
|
||||
return
|
||||
}
|
||||
let src = inputValue.value||picList[gridPicList.value.length]
|
||||
if (!src) {
|
||||
console.log("图片链接不能为空")
|
||||
return;
|
||||
}
|
||||
gridPicList.value.push({
|
||||
|
@ -133,6 +165,11 @@
|
|||
})
|
||||
inputValue.value = ''
|
||||
}
|
||||
// 清空图片
|
||||
const clearPic = () => {
|
||||
gridPicList.value = []
|
||||
emits('clear')
|
||||
}
|
||||
//开始画笔
|
||||
const startPencil = () => {
|
||||
isShow.value = !isShow.value
|
||||
|
@ -148,7 +185,7 @@
|
|||
b = b.length === 1? '0' + b : b;
|
||||
return `#${r}${g}${b}`;
|
||||
}
|
||||
//初始化画笔
|
||||
/* //初始化画笔
|
||||
const initPend = () => {
|
||||
let canvas = new Fabric.fabric.Canvas('canvas_pic_001',{
|
||||
interactive: false,
|
||||
|
@ -162,10 +199,11 @@
|
|||
canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas)
|
||||
canvas.freeDrawingBrush.width = 1//设置画笔粗细
|
||||
canvas.freeDrawingBrush.color = "red"//设置画笔颜色
|
||||
}
|
||||
onMounted(() => {
|
||||
}*/
|
||||
/*onMounted(() => {
|
||||
initPend()
|
||||
})
|
||||
})*/
|
||||
defineExpose({addPic,clearPic})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.modal-mode{
|
||||
|
@ -204,10 +242,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.add-btn{
|
||||
.grid-pic-toolbar{
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
display: flex;
|
||||
.add-btn{
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<script setup>
|
||||
import {ref, watch, nextTick, onMounted} from "vue";
|
||||
import { component as Viewer } from 'v-viewer'
|
||||
import Fabric from 'fabric';
|
||||
// import Fabric from 'fabric';
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
const props = defineProps({
|
||||
images: {
|
||||
|
@ -36,16 +36,13 @@ const inited = (viewer) => {
|
|||
}
|
||||
//缩放时
|
||||
const zoomed = (e) => {
|
||||
setImgStyle()
|
||||
// console.log('zoomed', e)
|
||||
// setImgStyle()
|
||||
}
|
||||
//移动时
|
||||
const moved = (e) => {
|
||||
setImgStyle()
|
||||
// console.log('moved',e)
|
||||
// setImgStyle()
|
||||
}
|
||||
const move = (e) => {
|
||||
// console.log('move', e)
|
||||
}
|
||||
const appendCanvasToShow = () => {
|
||||
initImgStyle()
|
||||
|
@ -92,7 +89,7 @@ const optins = ref({
|
|||
"tooltip": true,
|
||||
"zoomable": true,
|
||||
"rotatable": true,
|
||||
"movable": false,
|
||||
"movable": true,
|
||||
"scalable": true,
|
||||
"transition": true,
|
||||
"fullscreen": true,
|
||||
|
@ -100,9 +97,9 @@ const optins = ref({
|
|||
})
|
||||
const initViewers = () => {
|
||||
refs.value['viewerRef'+props.index]?.rebuildViewer()
|
||||
setTimeout(()=>{
|
||||
/*setTimeout(()=>{
|
||||
initImgStyle()
|
||||
},300)
|
||||
},300)*/
|
||||
}
|
||||
//初始化画笔
|
||||
const initPend = () => {
|
||||
|
@ -133,11 +130,11 @@ watch(props.images, (newValue, oldValue) => {
|
|||
});
|
||||
*/
|
||||
|
||||
onMounted(()=>{
|
||||
/*onMounted(()=>{
|
||||
setTimeout(()=>{
|
||||
appendCanvasToShow()
|
||||
}, 300)
|
||||
})
|
||||
})*/
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.viewer-item-wrap{
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="createAIPPT">新建文枢课件</el-dropdown-item>
|
||||
<el-dropdown-item @click="aiTOPPT">AI一键生成</el-dropdown-item>
|
||||
<!-- <el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>-->
|
||||
<el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>
|
||||
<el-dropdown-item @click="openFilePicker">导入PPT</el-dropdown-item>
|
||||
<input type="file" ref="fileInput" style="display: none;" @change="handleFileChange" accept="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation">
|
||||
</el-dropdown-menu>
|
||||
|
|
Loading…
Reference in New Issue