117 lines
3.2 KiB
Vue
117 lines
3.2 KiB
Vue
<script>
|
||
export default {
|
||
props: {
|
||
colorText: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'hex'
|
||
},
|
||
block: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() { return {
|
||
}},
|
||
methods: {
|
||
num2hex(value){ // todo: 允许其他进制的num输入？
|
||
if (value) {
|
||
switch (typeof value){
|
||
case 'number': value = value.toString(16); break;
|
||
case 'string': // hex = parseInt(value).toString(16); break;
|
||
default:
|
||
}
|
||
}
|
||
return value
|
||
},
|
||
shrinkHex(hex){
|
||
if (/^(0x)?[\dA-F]+$/i.test(hex)){
|
||
hex = hex.replace(/^0x/, '')
|
||
let length
|
||
switch(this.block){
|
||
case '2': return hex.replace(/^(\w{6})\w*(\w{6})$/, '$1$2')
|
||
case '4': return hex.replace(/^(\w{12})\w*(\w{12})$/, '$1$2')
|
||
case '6': return hex.replace(/^(\w{18})\w*(\w{18})$/, '$1$2')
|
||
case '8': return hex.replace(/^(\w{24})\w*(\w{24})$/, '$1$2')
|
||
default: return hex
|
||
}
|
||
}
|
||
return ''
|
||
},
|
||
hex2color(hex){
|
||
if (/^(0x)?[0-9A-Fa-f]+$/.test(hex)){
|
||
hex.replace(/^0x/, '')
|
||
let len=hex.length
|
||
let rest = len % 6
|
||
let fullLength = len + (6-(rest?rest:6)) // ?: 必须放在独立括号内
|
||
hex = hex.padEnd(fullLength, '0')
|
||
return hex.match(/[0-9A-Fa-f]{6}/g)
|
||
}
|
||
return []
|
||
},
|
||
address2colorB64u(address){ // TIC address should be in b64u format, i.e. base64 for url (+ to -, / to _)
|
||
if (/^[0-9a-zA-Z\-_]+$/.test(address)){
|
||
// TIC地址被精心设计为24字节，32个b64字符，不需要填充
|
||
// let len=address.length
|
||
// let rest = len % 4
|
||
// let fullLength = len + (4-(rest?rest:4))
|
||
// address = address.padEnd(fullLength, 'A') // 在 b64 里，'00'字节是A.
|
||
let colorArray = address.match(/[0-9A-Za-z\-_]{4}/g)
|
||
switch(this.block){
|
||
case "2": colorArray.splice(1, colorArray.length-2)
|
||
case "4": colorArray.splice(2, colorArray.length-4)
|
||
case "6": colorArray.splice(3, colorArray.length-6)
|
||
case "8": colorArray.splice(4, colorArray.length-8)
|
||
default:
|
||
}
|
||
return colorArray
|
||
}
|
||
return []
|
||
},
|
||
b64u2hex(b64u){
|
||
if (/^[0-9a-zA-Z\-_]+$/.test(b64u)){
|
||
let b64 = b64u.replace(/\-/g, '+').replace(/_/g, '/')
|
||
return Buffer.from(b64, 'base64').toString('hex')
|
||
}
|
||
return null
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="sColorText">
|
||
<template v-if="type==='hex'">
|
||
<span class="sColorCode"
|
||
v-for="(color,index) in hex2color(shrinkHex(colorText))"
|
||
:style="{background:`#${color}`}"
|
||
:key="index">
|
||
{{color}}
|
||
</span>
|
||
</template>
|
||
<template v-else-if="type==='b64u'">
|
||
<span class="sColorCode"
|
||
v-for="(colorB64u,index) in address2colorB64u(colorText)"
|
||
:style="{background:`#${b64u2hex(colorB64u)}`}"
|
||
:key="index">
|
||
{{colorB64u}}
|
||
</span>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.sColorText{
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
font-family: 'Courier New';
|
||
color: white;
|
||
span{
|
||
padding: 2px 0;
|
||
}
|
||
}
|
||
</style> |