Skip to content

C
center-certificate
提交 9fa915f2 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 87de109b
显示空白字符变更
内嵌 并排
正在显示 包含 231 行增加 和 14 行删除
src/components/base/EditStyle.vue
浏览文件 @ 9fa915f2
......@@ -22,19 +22,15 @@
<div v-for="(item, index) in data.tool" :key="index">
<div class="tool-item" v-if="item.name === 'fontSize'">
<div class="tit">字体大小</div>
<el-select @change="changeStyle" v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
<el-input @input="changeStyle" v-model="item.value" placeholder="请输入字号"></el-input>
</div>
<div class="tool-item" v-if="item.name === 'fontColor'">
<div class="tit">字体颜色</div>
<el-color-picker @change="changeStyle" v-model="item.value"></el-color-picker>
</div>
<div class="tool-item" v-if="item.name === 'fontLineH'">
<div class="tit">字间距</div>
<el-select v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
<div class="tit">字体行高</div>
<el-input @input="changeStyle" v-model="item.value" placeholder="请输入字体行高"></el-input>
</div>
<div class="tool-item" v-if="item.name === 'fontFamily'">
<div class="tit">字体</div>
......@@ -82,6 +78,24 @@
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'fontWeight'">
<div class="tit">加粗</div>
<el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'fontUnderline'">
<div class="tit">下划线</div>
<el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
</el-select>
</div>
<div class="tool-item" v-if="item.name === 'align'">
<div class="tit">对齐方式</div>
<el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
<el-option v-for="opt in item.option" :key="opt.label" :label="opt.label" :value="opt.value"></el-option>
</el-select>
</div>
</div>
</div>
</div>
......@@ -124,9 +138,12 @@ export default {
const [min, max, count = 1, symbol = ''] = item.option
item.option = this.setOption(min, max, count, symbol)
}
if (item.optionDiv) {
item.option = item.optionDiv
console.log(item.option, 'item.option')
}
return item
})
console.log(this.data.tool, '123')
}
},
// 重新组合对象变成样式
......@@ -136,6 +153,8 @@ export default {
{ name: 'fontColor', styleName: 'color' },
{ name: 'fontLineH', styleName: 'line-height', symbol: 'px' },
{ name: 'fontFamily', styleName: 'font-family' },
{ name: 'fontWeight', styleName: 'font-weight' },
{ name: 'fontUnderline', styleName: 'text-decoration' },
{ name: 'bgColor', styleName: 'background' },
{ name: 'width', styleName: 'width', symbol: 'px' },
{ name: 'height', styleName: 'height', symbol: 'px' },
......@@ -149,6 +168,18 @@ export default {
const certBox = document.getElementById('edit-dom-1')
const [propWidth, propHeight] = this.data.tool
a.push(`height: ${(propHeight.value / propWidth.value) * certBox.offsetWidth}px;`)
} else if (b.name === 'align') {
const alignStyle = {
2: 'display: flex;justify-content: center;',
3: 'display: flex;justify-content: right;',
4: 'display: flex;align-items:center;',
5: 'display: flex;align-items:center;justify-content: center;',
6: 'display: flex;align-items:center;justify-content: right;',
7: 'display: flex;align-items:end;',
8: 'display: flex;align-items:end;justify-content: center;',
9: 'display: flex;align-items:end;justify-content: right;'
}
a.push(alignStyle[b.value])
} else {
if (b.value !== '') {
const findItem = styleData.find(item => item.name === b.name)
......
src/modules/template/components/stepTwo.vue
浏览文件 @ 9fa915f2
......@@ -41,8 +41,22 @@
<div class="pop"></div>
<div v-html="item.html"></div>
</div>
<div
:style="item.style"
v-if="item.type === 2 && isParamsShow"
:class="item.show ? 'text2 active' : 'text2'"
:key="item.id"
:id="item.id"
@click="domShow(item.id)"
>
<div class="pop"></div>
<div>{{ item.value }}</div>
</div>
</template>
</div>
<div style="display: flex; justify-content: center; padding: 30px">
<el-button type="primary" @click="submit()">提 交</el-button>
</div>
</div>
<el-dialog title="添加元素" :visible.sync="dialogVisible" width="30%" :destroy-on-close="true">
<div style="display: flex; justify-content: center">
......@@ -50,7 +64,7 @@
<el-radio :label="0">图片</el-radio>
<el-radio :label="1">文字</el-radio>
<el-radio :label="2">动态变量</el-radio>
<el-radio :label="3">背景图片</el-radio>
<!-- <el-radio :label="3">背景图片</el-radio> -->
</el-radio-group>
</div>
<div style="display: flex; justify-content: center; padding: 30px" v-if="selectElement === 2">
......@@ -102,7 +116,9 @@ export default {
},
// 所有添加的dom元素
certElement: [],
isShowFlag: true
isShowFlag: true,
isParamsShow: true,
toCanvasImg: ''
}
},
computed: {},
......@@ -117,14 +133,69 @@ export default {
}
}
this.setCertBox()
this.getParamOptions()
},
methods: {
// 提交
submit() {
// 过去dom颜色
const getRgb = (dom, name) => {
const getColor = getComputedStyle(dom)[name]
return getColor
.substring(getColor.indexOf('(') + 1, getColor.indexOf(')'))
.replace(/\s*/g, '')
.split(',')
}
// 获取画板信息
const bgDom = document.getElementById('edit-dom-1')
const bgDomRgb = getRgb(bgDom, 'backgroundColor')
// 提交的参数
const params = {
elements: [{
// end 吧截图插入
}],
bg_width: bgDom.offsetWidth,
bg_height: bgDom.offsetHeight,
bg_color: JSON.stringify({ r: bgDomRgb[0], g: bgDomRgb[1], b: bgDomRgb[2] })
}
// 让动态变量隐藏，为了html2canvas截图
this.isParamsShow = false
// 寻找工具对应的值
const findTool = (data, name) => {
return data.find(item => item.name === name)
}
this.certElement.map(item => {
if (item.type === 2) {
const domRgb = getRgb(document.getElementById(item.id), 'color')
params.elements.push({
type: 'dynamic_text',
index: findTool(item.tool, 'zIndex').value,
key: item.value,
widht: findTool(item.tool, 'width').value,
height: findTool(item.tool, 'height').value,
dst_x: item.left,
dst_y: item.top,
font: findTool(item.tool, 'fontFamily').value,
size: findTool(item.tool, 'fontSize').value,
color: JSON.stringify({ r: domRgb[0], g: domRgb[1], b: domRgb[2] }),
line_height: findTool(item.tool, 'fontLineH').value,
font_weight: findTool(item.tool, 'fontWeight').value,
underline: !!(findTool(item.tool, 'fontUnderline').value !== 'none'),
align: findTool(item.tool, 'align').value
})
}
item.show = false
return item
})
this.toImage()
console.log(params, 'params')
},
// 删除工具
deleteEdit(data) {
const index = this.certElement.findIndex(item => item.id === data.id)
this.certElement.splice(index, 1)
},
// 吧html生成图片
// html生成图片
toImage() {
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
......@@ -133,9 +204,9 @@ export default {
// const url = canvas.toDataURL('image/png')
// this.htmlUrl = url
canvas.toBlob(function (blob) {
console.log(blob, 'blob')
uploadBlob(blob).then(res => {
console.log(res, '123123')
console.log(res)
this.toCanvasImg = res
})
})
})
......@@ -193,6 +264,70 @@ export default {
this.dragInit(`edit-dom-${this.dynamicId}`)
}, 1000)
this.dialogVisible = false
} else {
this.certElement.push({
top: '0',
left: '0',
title: '动态变量',
value: this.paramValue,
type: this.selectElement,
tool: [
{
name: 'fontFamily',
value: 'songti',
optionDiv: [
{ label: '宋体', value: 'songti' },
{ label: '黑体', value: 'heiti' },
{ label: '楷体', value: 'kaiti' },
{ label: '行楷', value: 'hangkai' }
]
},
{ name: 'fontSize', value: '16' },
{ name: 'fontColor', value: '#000000' },
{ name: 'fontLineH', value: '20' },
{
name: 'fontWeight',
value: 'normal',
optionDiv: [
{ label: 'normal', value: 'normal' },
{ label: 'bold', value: 'bold' }
]
},
{
name: 'fontUnderline',
value: 'none',
optionDiv: [
{ label: 'underline', value: 'underline' },
{ label: 'none', value: 'none' }
]
},
{
name: 'align',
value: '1',
optionDiv: [
{ label: '左上', value: '1' },
{ label: '中上', value: '2' },
{ label: '右上', value: '3' },
{ label: '左中', value: '4' },
{ label: '中中', value: '5' },
{ label: '右中', value: '6' },
{ label: '左下', value: '7' },
{ label: '中下', value: '8' },
{ label: '右下', value: '9' }
]
},
{ name: 'width', value: '100' },
{ name: 'height', value: '100' },
{ name: 'zIndex', value: '1' }
],
show: true,
id: `edit-dom-${this.dynamicId}`
})
// 添加成功后添加拖拽
setTimeout(() => {
this.dragInit(`edit-dom-${this.dynamicId}`)
}, 1000)
this.dialogVisible = false
}
}, 100)
},
......@@ -248,10 +383,45 @@ export default {
position: relative;
border: 1px solid rgb(227, 227, 227);
overflow: hidden;
background: #ffffff;
.text {
position: absolute;
top: 0;
left: 0;
font-family: 'songti';
&.active {
.pop {
&::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px dashed red;
box-sizing: border-box;
}
}
}
.pop {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
.text2 {
position: absolute;
top: 0;
left: 0;
font-family: 'songti';
width: 100px;
height: 100px;
font-size: 16px;
color: #000;
line-height: 20px;
&.active {
.pop {
&::after {
......@@ -305,4 +475,20 @@ export default {
z-index: 1;
}
}
@font-face {
font-family: 'kaiti';
src: url('@/assets/font/AaBanRuoKaiShu-2.ttf');
}
@font-face {
font-family: 'songti';
src: url('@/assets/font/RuiZiChaoPaiYanWeiSongJian-Shan-ZhunCu(REEJI-SwallowGB-Flash-Medium)-2.ttf');
}
@font-face {
font-family: 'hangkai';
src: url('@/assets/font/JiZiJingDianFangSongJianFan-Shan(GEETYPE-FangSongGBT-Flash)-2.ttf');
}
@font-face {
font-family: 'heiti';
src: url('@/assets/font/No.164-ShangShouJianZhengTi-2.ttf');
}
</style>
src/modules/template/views/Update.vue
浏览文件 @ 9fa915f2
......@@ -41,7 +41,7 @@ export default {
},
data() {
return {
active: 1,
active: 0,
form: {
title: '',
rule: '0'
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论