150 lines
3.1 KiB
JavaScript
150 lines
3.1 KiB
JavaScript
const styles = (v ='') => v.split(';').filter(v => v && !/^[\n\s]+$/.test(v)).map(v => {
|
|
const key = v.slice(0, v.indexOf(':'))
|
|
const value = v.slice(v.indexOf(':')+1)
|
|
return {
|
|
[key
|
|
.replace(/-([a-z])/g, function() { return arguments[1].toUpperCase()})
|
|
.replace(/\s+/g, '')
|
|
]: value.replace(/^\s+/, '').replace(/\s+$/, '') || ''
|
|
}
|
|
})
|
|
export function parent(parent) {
|
|
return {
|
|
provide() {
|
|
return {
|
|
[parent]: this
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
el: {
|
|
id: null,
|
|
css: {},
|
|
views: []
|
|
},
|
|
}
|
|
},
|
|
watch: {
|
|
css: {
|
|
handler(v) {
|
|
if(this.canvasId) {
|
|
this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
|
|
this.canvasWidth = this.el.css && this.el.css.width || this.canvasWidth
|
|
this.canvasHeight = this.el.css && this.el.css.height || this.canvasHeight
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
export function children(parent, options = {}) {
|
|
const indexKey = options.indexKey || 'index'
|
|
return {
|
|
inject: {
|
|
[parent]: {
|
|
default: null
|
|
}
|
|
},
|
|
watch: {
|
|
el: {
|
|
handler(v, o) {
|
|
if(JSON.stringify(v) != JSON.stringify(o))
|
|
this.bindRelation()
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
src: {
|
|
handler(v, o) {
|
|
if(v != o)
|
|
this.bindRelation()
|
|
},
|
|
immediate: true
|
|
},
|
|
text: {
|
|
handler(v, o) {
|
|
if(v != o) this.bindRelation()
|
|
},
|
|
immediate: true
|
|
},
|
|
css: {
|
|
handler(v, o) {
|
|
if(v != o)
|
|
this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
|
|
},
|
|
immediate: true
|
|
},
|
|
replace: {
|
|
handler(v, o) {
|
|
if(JSON.stringify(v) != JSON.stringify(o))
|
|
this.bindRelation()
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
created() {
|
|
if(!this._uid) {
|
|
this._uid = this._.uid
|
|
}
|
|
Object.defineProperty(this, 'parent', {
|
|
get: () => this[parent] || [],
|
|
})
|
|
Object.defineProperty(this, 'index', {
|
|
get: () => {
|
|
this.bindRelation();
|
|
const {parent: {el: {views=[]}={}}={}} = this
|
|
return views.indexOf(this.el)
|
|
},
|
|
});
|
|
this.el.type = this.type
|
|
if(this.uid) {
|
|
this.el.uid = this.uid
|
|
}
|
|
this.bindRelation()
|
|
},
|
|
// #ifdef VUE3
|
|
beforeUnmount() {
|
|
this.removeEl()
|
|
},
|
|
// #endif
|
|
// #ifdef VUE2
|
|
beforeDestroy() {
|
|
this.removeEl()
|
|
},
|
|
// #endif
|
|
methods: {
|
|
removeEl() {
|
|
if (this.parent) {
|
|
this.parent.el.views = this.parent.el.views.filter(
|
|
(item) => item._uid !== this._uid
|
|
);
|
|
}
|
|
},
|
|
bindRelation() {
|
|
if(!this.el._uid) {
|
|
this.el._uid = this._uid
|
|
}
|
|
if(['text','qrcode'].includes(this.type)) {
|
|
this.el.text = this.$slots && this.$slots.default && this.$slots.default[0].text || `${this.text || ''}`.replace(/\\n/g, '\n')
|
|
}
|
|
if(this.type == 'image') {
|
|
this.el.src = this.src
|
|
}
|
|
if (!this.parent) {
|
|
return;
|
|
}
|
|
let views = this.parent.el.views || [];
|
|
if(views.indexOf(this.el) !== -1) {
|
|
this.parent.el.views = views.map(v => v._uid == this._uid ? this.el : v)
|
|
} else {
|
|
this.parent.el.views = [...views, this.el];
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.bindRelation()
|
|
},
|
|
}
|
|
} |