mirror of
https://github.com/tenrok/vue-json-viewer.git
synced 2026-06-23 20:40:38 +03:00
+4
-4
@@ -71,8 +71,8 @@ new Vue({
|
|||||||
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
|
the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
|
||||||
and published the first algorithm intended to be carried out by such a machine.
|
and published the first algorithm intended to be carried out by such a machine.
|
||||||
As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
|
As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
|
||||||
bornAt: '1815-12-10T00:00:00.000Z',
|
bornAt: new Date('1815-12-10T00:00:00.000Z'),
|
||||||
diedAt: '1852-11-27T00:00:00.000Z'
|
diedAt: new Date('1852-11-27T00:00:00.000Z')
|
||||||
}, {
|
}, {
|
||||||
id: '5968fcad629fa84ab65a5246',
|
id: '5968fcad629fa84ab65a5246',
|
||||||
firstname: 'Grace',
|
firstname: 'Grace',
|
||||||
@@ -99,8 +99,8 @@ new Vue({
|
|||||||
she was a pioneer of computer programming who invented one of the first compiler related tools.
|
she was a pioneer of computer programming who invented one of the first compiler related tools.
|
||||||
She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
|
She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
|
||||||
an early high-level programming language still in use today.`,
|
an early high-level programming language still in use today.`,
|
||||||
bornAt: '1815-12-10T00:00:00.000Z',
|
bornAt: new Date('1815-12-10T00:00:00.000Z'),
|
||||||
diedAt: '1852-11-27T00:00:00.000Z'
|
diedAt: new Date('1852-11-27T00:00:00.000Z')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
+6
-3
@@ -6,13 +6,14 @@ import JsonBoolean from './types/json-boolean'
|
|||||||
import JsonObject from './types/json-object'
|
import JsonObject from './types/json-object'
|
||||||
import JsonArray from './types/json-array'
|
import JsonArray from './types/json-array'
|
||||||
import JsonFunction from './types/json-function'
|
import JsonFunction from './types/json-function'
|
||||||
|
import JsonDate from './types/json-date'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'JsonBox',
|
name: 'JsonBox',
|
||||||
inject: ['expandDepth'],
|
inject: ['expandDepth'],
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: [Object, Array, String, Number, Boolean, Function],
|
type: [Object, Array, String, Number, Boolean, Function, Date],
|
||||||
default: null
|
default: null
|
||||||
},
|
},
|
||||||
keyName: {
|
keyName: {
|
||||||
@@ -55,6 +56,8 @@ export default {
|
|||||||
dataType = JsonUndefined
|
dataType = JsonUndefined
|
||||||
} else if (Array.isArray(this.value)) {
|
} else if (Array.isArray(this.value)) {
|
||||||
dataType = JsonArray
|
dataType = JsonArray
|
||||||
|
} else if (Object.prototype.toString.call(this.value) === '[object Date]') {
|
||||||
|
dataType = JsonDate
|
||||||
} else if (typeof this.value === 'object') {
|
} else if (typeof this.value === 'object') {
|
||||||
dataType = JsonObject
|
dataType = JsonObject
|
||||||
} else if (typeof this.value === 'number') {
|
} else if (typeof this.value === 'number') {
|
||||||
@@ -66,7 +69,7 @@ export default {
|
|||||||
} else if (typeof this.value === 'function') {
|
} else if (typeof this.value === 'function') {
|
||||||
dataType = JsonFunction
|
dataType = JsonFunction
|
||||||
}
|
}
|
||||||
const toggle = this.keyName && (this.value && (Array.isArray(this.value) || typeof this.value === 'object'))
|
const toggle = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]')))
|
||||||
|
|
||||||
if (toggle) {
|
if (toggle) {
|
||||||
elements.push(h('span', {
|
elements.push(h('span', {
|
||||||
@@ -110,7 +113,7 @@ export default {
|
|||||||
}))
|
}))
|
||||||
|
|
||||||
return h('div', {
|
return h('div', {
|
||||||
class: {
|
class: {
|
||||||
'jv-node': true,
|
'jv-node': true,
|
||||||
'toggle': toggle
|
'toggle': toggle
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'JsonDate',
|
||||||
|
functional: true,
|
||||||
|
props: {
|
||||||
|
jsonValue: {
|
||||||
|
type: Date,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render (h, { props }) {
|
||||||
|
const value = props.jsonValue;
|
||||||
|
|
||||||
|
return h('span', {
|
||||||
|
class: {
|
||||||
|
'jv-item': true,
|
||||||
|
'jv-string': true,
|
||||||
|
},
|
||||||
|
domProps: {
|
||||||
|
innerText: `"${value.toLocaleString()}"`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user