element.js
1.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import Vue from 'vue'
const DESIGN_DRAFT_WIDTH = 320
const styleKey = 'commonStyle'
/**
*
* 获取组件中的 「componentsForPropsEditor」对象
* @param {String} elementName
*
* 可以查看下面的组件 Demo
{
name: 'lbp-button',
props: {
color: {
default: 'red',
editor: {
type: 'custom-color-editor'
}
}
},
componentsForPropsEditor: {
'custom-color-editor': {
render() {
return <input type="color" />
}
}
}
}
*/
export function getComponentsForPropsEditor (elementName) {
const Ctor = Vue.component(elementName)
// TODO 为何直接 return new Ctor() 并将其赋值给 vuex 的 state 会报错：Cannot convert a Symbol value to a string
return new Ctor().$options.componentsForPropsEditor
}
export function getVM (pluginName) {
const Ctor = Vue.component(pluginName)
return new Ctor()
}
export function swapZindex (x, y) {
const tmp = y[styleKey].zindex
y[styleKey].zindex = x[styleKey].zindex
x[styleKey].zindex = tmp
}
/**
* !#zh 将 px 转换为 rem
* @param {Number} px
*/
function px2Rem (px) {
const number = Math.pow(10, 6)
const val = (px / (DESIGN_DRAFT_WIDTH / 10)) * number
const rem = Math.round(val) / number + 'rem'
return rem
}
/**
*
* @param {Number} px 元素的某个属性的像素值，比如 height
* @param {Boolean} isToRem 是否将 px 转换为 rem
*/
export function parsePx (px, isRem = false) {
if (isRem) return px2Rem(px)
return `${px}px`
}
export const genUUID = () => {
// http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
}
// Generate four random hex digits.
function S4 () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
// Generate a pseudo-GUID by concatenating random hexadecimal.
export function guid () {
return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
}