Skip to content

V
vue3-quasar-ts-study01
Commit 20b57642 authored by hucy's avatar hucy ☘
Browse files
Options

fix:不重要的提交

parent 15a7620e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1489 additions and 11 deletions
package.json
View file @ 20b57642
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
"core-js": "^3.6.5", "core-js": "^3.6.5",
"decimal.js": "^10.4.2", "decimal.js": "^10.4.2",
"echarts": "^5.4.1", "echarts": "^5.4.1",
"hcy-tool-test": "^1.0.4",
"konva": "^8.4.3", "konva": "^8.4.3",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mitt": "^3.0.0", "mitt": "^3.0.0",
......
src/common/utils/get-type.ts
View file @ 20b57642
export const getType = function (value: any): string { type Types =
| 'Number'
| 'String'
| 'Boolean'
| 'Null'
| 'Undefined'
| 'Array'
| 'Object';
export const getType = function (value: any): Types {
const typeofs = Object.prototype.toString.call(value); const typeofs = Object.prototype.toString.call(value);
switch (typeofs) { switch (typeofs) {
...@@ -24,6 +33,6 @@ export const getType = function (value: any): string { ...@@ -24,6 +33,6 @@ export const getType = function (value: any): string {
return 'Object'; return 'Object';
default: default:
return typeofs; return typeofs as any;
} }
}; };
src/components/index.ts
View file @ 20b57642
...@@ -17,6 +17,7 @@ import AgGridLoadingOverlayComponent from './ag-grid/LoadingOverlayComponent.vue ...@@ -17,6 +17,7 @@ import AgGridLoadingOverlayComponent from './ag-grid/LoadingOverlayComponent.vue
import AgGridDateComponent from './ag-grid/DateComponent.vue'; import AgGridDateComponent from './ag-grid/DateComponent.vue';
import DialogTip from './dialog-tip/DialogTip.vue'; import DialogTip from './dialog-tip/DialogTip.vue';
import DialogLayout from './dialog-layout/DialogLayout.vue'; import DialogLayout from './dialog-layout/DialogLayout.vue';
import JsonView from './json-view/JsonView.vue';
export { export {
DateTimePick as ComDateTimePick, DateTimePick as ComDateTimePick,
...@@ -37,6 +38,7 @@ export { ...@@ -37,6 +38,7 @@ export {
DialogTip as ComDialogTip, DialogTip as ComDialogTip,
DialogLayout as ComDialogLayout, DialogLayout as ComDialogLayout,
Btn as MyBtn, Btn as MyBtn,
JsonView as ComJsonView,
}; };
export default { export default {
...@@ -58,4 +60,5 @@ export default { ...@@ -58,4 +60,5 @@ export default {
DialogTip, DialogTip,
DialogLayout, DialogLayout,
Btn, Btn,
JsonView,
}; };
src/components/json-view/JsonView.vue 0 → 100644
View file @ 20b57642
<!--
* @FileDescription: JSON 预览组件
* @Date: 2023-05-29
* @LastEditTime: 2023-05-29
-->
<script setup lang="ts">
import ObjView from './element/ObjView.vue';
import ArrView from './element/ArrView.vue';
import HtmlView from './element/HtmlView.vue';
interface IDetailProps {
data: any;
mainColor?: string;
objSideColor?: string;
arrSideColor?: string;
stringColor?: string;
numberColor?: string;
booleanColor?: string;
nullColor?: string;
otherColor?: string;
}
const props = withDefaults(defineProps<IDetailProps>(), {
data: () => {
return {};
},
mainColor: '#587498',
objSideColor: '#3C7DC4', // 大括号颜色
arrSideColor: '#a64942', // 中括号颜色
stringColor: '#5A8F29',
numberColor: '#b38766',
booleanColor: '#FF8F00',
nullColor: '#a2a9af',
otherColor: '#2B2B2B',
});
function isObject(data: any) {
const typeofs = Object.prototype.toString.call(data);
if (typeofs === '[object Object]') {
return true;
} else {
return false;
}
}
function isArray(data: any) {
const typeofs = Object.prototype.toString.call(data);
if (typeofs === '[object Array]') {
return true;
} else {
return false;
}
}
</script>
<template>
<template v-if="isObject(props.data)">
<obj-view v-bind="props" />
</template>
<template v-else-if="isArray(props.data)">
<arr-view v-bind="props" />
</template>
<template v-else>
<html-view v-bind="props" />
</template>
</template>
<style lang="scss" scoped></style>
src/components/json-view/element/ArrView.vue 0 → 100644
View file @ 20b57642
<!--
* @FileDescription: JSON 数组 预览组件
* @Date: 2023-05-29
* @LastEditTime: 2023-05-29
-->
<script setup lang="ts">
import { ref } from 'vue';
import ObjView from './ObjView.vue';
import HtmlView from './HtmlView.vue';
import { isObject, isArray, isLastArr } from '../utils';
interface IDetailProps {
data: any;
isLast?: boolean;
mainColor?: string;
objSideColor?: string;
arrSideColor?: string;
stringColor?: string;
numberColor?: string;
booleanColor?: string;
nullColor?: string;
otherColor?: string;
}
const props = withDefaults(defineProps<IDetailProps>(), {
data: () => {
return {};
},
isLast: true,
});
const show = ref(true);
function clickStart() {
show.value = !show.value;
}
</script>
<template>
<div style="font-family: 'Gill Sans', sans-serif; position: relative">
<div :style="{ color: arrSideColor }" class="obj-side-start">
<q-icon
:name="show ? 'bi-dash-square' : 'bi-plus-square'"
@click="clickStart"
class="icon-action"
/>
&nbsp;[
</div>
<div style="padding-left: 16px" v-show="show">
<template v-for="(m, n) in props.data" :key="n">
<div v-if="isObject(m) && Object.keys(m).length > 0">
<obj-view
v-bind="props"
:data="m"
:is-last="isLastArr(n, props.data)"
/>
</div>
<div v-else-if="isArray(m) && m.length > 0">
<arr-view
v-bind="props"
:data="m"
:is-last="isLastArr(n, props.data)"
/>
</div>
<div v-else>
<html-view
v-bind="props"
:data="m"
:is-last="isLastArr(n, props.data)"
/>
</div>
</template>
</div>
<div v-show="!show" class="hide-text" :style="{ color: arrSideColor }">
...
</div>
<div class="obj-side-end" v-show="show">
<span :style="{ color: arrSideColor }">]</span>
<span v-if="!props.isLast" :style="{ color: mainColor }">&nbsp;,</span>
</div>
</div>
</template>
<style lang="scss" scoped>
.obj-side-start {
// padding: 0 8px;
.icon-action {
&:hover {
cursor: pointer;
}
}
}
.obj-side-end {
// padding: 0 8px;
}
.hide-text {
position: absolute;
top: 0;
left: 46px;
&::after {
position: absolute;
content: ']';
right: -8px;
}
}
</style>
src/components/json-view/element/HtmlView.vue 0 → 100644
View file @ 20b57642
<!--
* @FileDescription: JSON 文本 预览组件
* @Date: 2023-05-29
* @LastEditTime: 2023-05-29
-->
<script setup lang="ts">
interface IDetailProps {
data: any;
isLast?: boolean;
mainColor?: string;
objSideColor?: string;
arrSideColor?: string;
stringColor?: string;
numberColor?: string;
booleanColor?: string;
nullColor?: string;
otherColor?: string;
}
const props = withDefaults(defineProps<IDetailProps>(), {
data: () => {
return {};
},
isLast: true,
});
function htmlTranslate(value: any) {
const typeofs = Object.prototype.toString.call(value);
if (typeofs === '[object String]') {
return `"${value}"`;
} else if (typeofs === '[object Null]') {
return 'null';
} else {
return value;
}
}
function getColor(value: any) {
const typeofs = Object.prototype.toString.call(value);
switch (typeofs) {
case '[object Number]':
return props.numberColor; // NaN Infinity 也是Number类型
case '[object String]':
return props.stringColor;
case '[object Boolean]':
return props.booleanColor;
case '[object Null]':
return props.nullColor;
default:
return props.otherColor;
}
}
</script>
<template>
<span style="font-family: 'Gill Sans', sans-serif">
<span :style="{ color: getColor(props.data) }">
{{ htmlTranslate(props.data) }}</span
>
<span v-if="!props.isLast" :style="{ color: mainColor }">&nbsp;,</span>
</span>
</template>
<style lang="scss" scoped></style>
src/components/json-view/element/ObjView.vue 0 → 100644
View file @ 20b57642
<!--
* @FileDescription: JSON 对象 预览组件
* @Date: 2023-05-29
* @LastEditTime: 2023-05-29
-->
<script setup lang="ts">
import { ref } from 'vue';
import ArrView from './ArrView.vue';
import HtmlView from './HtmlView.vue';
import { isArray, isLastObj, isLastArr, isObject } from '../utils';
interface IDetailProps {
data: any;
isLast?: boolean;
nest?: boolean;
mainColor?: string;
objSideColor?: string;
arrSideColor?: string;
stringColor?: string;
numberColor?: string;
booleanColor?: string;
nullColor?: string;
otherColor?: string;
}
const props = withDefaults(defineProps<IDetailProps>(), {
data: () => {
return {};
},
isLast: true,
nest: false,
});
const show = ref(true);
function clickStart() {
show.value = !show.value;
}
</script>
<template>
<div
style="font-family: 'Gill Sans', sans-serif; position: relative"
:style="{ paddingLeft: props.nest ? '16px' : 0 }"
>
<div :style="{ color: objSideColor }" class="obj-side-start">
<q-icon
:name="show ? 'bi-dash-square' : 'bi-plus-square'"
@click="clickStart"
class="icon-action"
/>
&nbsp;{
</div>
<div class="json-fa" v-show="show">
<template v-for="(item, key1, index) in props.data" :key="key1">
<div v-if="isArray(item) && item.length > 0">
<div :style="{ color: mainColor }">"{{ key1 }}":</div>
<arr-view
v-bind="props"
:data="item"
:is-last="isLastArr(index, props.data)"
class="childrens"
/>
</div>
<div v-else-if="isObject(item) && Object.keys(item).length > 0">
<div :style="{ color: mainColor }">"{{ key1 }}":</div>
<obj-view
v-bind="props"
:data="item"
:is-last="isLastObj(index, props.data)"
:nest="true"
/>
</div>
<div v-else>
<span :style="{ color: mainColor }"> "{{ key1 }}"&nbsp;:&nbsp;</span>
<html-view
v-bind="props"
:data="item"
:is-last="isLastObj(index, props.data)"
/>
</div>
</template>
</div>
<div
v-show="!show"
class="hide-text"
:style="{ color: objSideColor, left: props.nest ? '48px' : '32px' }"
>
...
</div>
<div class="obj-side-end" v-show="show">
<span :style="{ color: objSideColor }">}</span>
<span v-if="!props.isLast" :style="{ color: mainColor }">&nbsp;,</span>
</div>
</div>
</template>
<style lang="scss" scoped>
.json-fa {
padding-left: 16px;
}
.childrens {
padding-left: 16px;
}
.obj-side-start {
// padding: 0 8px;
.icon-action {
&:hover {
cursor: pointer;
}
}
}
.obj-side-end {
// padding: 0 8px;
}
.hide-text {
position: absolute;
top: 0;
&::after {
position: absolute;
content: '}';
right: -8px;
}
}
</style>
src/components/json-view/utils.ts 0 → 100644
View file @ 20b57642
export function isObject(data: any) {
const typeofs = Object.prototype.toString.call(data);
if (typeofs === '[object Object]') {
return true;
} else {
return false;
}
}
export function isArray(data: any) {
const typeofs = Object.prototype.toString.call(data);
if (typeofs === '[object Array]') {
return true;
} else {
return false;
}
}
export function isLastArr(index: any, data: any) {
const len = data.length;
if (index === len - 1) {
return true;
} else {
return false;
}
}
export function isLastObj(index: any, data: any) {
const len = Object.keys(data).length;
if (index === len - 1) {
return true;
} else {
return false;
}
}
src/css/quasar.variables.scss
View file @ 20b57642
...@@ -22,6 +22,7 @@ $padding-xl: ($space-base * 3); ...@@ -22,6 +22,7 @@ $padding-xl: ($space-base * 3);
// $primary: #78c0a8; // $primary: #78c0a8;
$primary: rgba(116, 194, 225, 1); $primary: rgba(116, 194, 225, 1);
$primary-bg-light: rgba(116, 194, 225, 0.125); $primary-bg-light: rgba(116, 194, 225, 0.125);
$primary-focus-shadow: rgba(116, 194, 225, 0.35);
$secondary: #26a69a; $secondary: #26a69a;
$accent: #9c27b0; $accent: #9c27b0;
......
src/layouts/MainLayout.vue
View file @ 20b57642
...@@ -7,14 +7,14 @@ ...@@ -7,14 +7,14 @@
<img <img
:src=" :src="
leftDrawerOpen leftDrawerOpen
? require('./menuListIcons/toggle-left-drawer-show.svg') ? require('./menuListIcons/kk-left-show.jpg')
: require('./menuListIcons/toggle-left-drawer-hide.svg') : require('./menuListIcons/kk-left-hide.jpg')
" "
/> />
</q-avatar> </q-avatar>
</q-btn> </q-btn>
<q-toolbar-title style="min-width: 140px"> Quasar App </q-toolbar-title> <q-toolbar-title style="min-width: 140px"> 傲来小神仙 </q-toolbar-title>
<q-tabs <q-tabs
v-model="defaultRouter" v-model="defaultRouter"
inline-label inline-label
......
src/layouts/TopLeftText.vue
View file @ 20b57642
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template> <template>
<div class="top-left-box"> <div class="top-left-box">
<span>人间草木</span> <span>两眼空空</span>
</div> </div>
</template> </template>
......
src/layouts/config.ts
View file @ 20b57642
...@@ -98,6 +98,34 @@ export const MenuList = [ ...@@ -98,6 +98,34 @@ export const MenuList = [
link: '/js-page6', link: '/js-page6',
active: false, active: false,
}, },
{
title: 'JSON预览',
caption: '',
icon: require('./menuListIcons/amis.svg'),
link: '/json-view',
active: false,
},
{
title: '二叉树',
caption: '',
icon: require('./menuListIcons/amis.svg'),
link: '/binary-tree',
active: false,
},
{
title: 'MDN Range',
caption: '',
icon: require('./menuListIcons/amis.svg'),
link: '/MDN-Range',
active: false,
},
{
title: '输入框',
caption: '评论输入框',
icon: require('./menuListIcons/amis.svg'),
link: '/review-input-box',
active: false,
},
], ],
}, },
{ {
......
src/modules/MDN-Range/MdnRange.vue 0 → 100644
View file @ 20b57642
<!--
* @FileDescription: MDN Range
* @Date: 2023-06-05
* @LastEditTime: 2023-06-06
-->
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const _inputRef = ref<any>(null);
// const state = reactive({
// lastEditRange: null as any, // 定义最后光标对象
// });
onMounted(() => {
//
});
function rangeTest() {
let html;
const showRangeDiv = document.getElementById('showRange') as HTMLElement;
const selection = document.getSelection() as Selection;
if (selection.type === 'Range' && selection.rangeCount > 0) {
html = '你选取了' + selection.rangeCount + '段内容<br/>';
for (let i = 0; i < selection.rangeCount; i++) {
let range = selection.getRangeAt(i);
html += '第' + (i + 1) + '段内容为：' + range + '<br/>';
}
showRangeDiv.innerHTML = html;
} else {
showRangeDiv.innerHTML = '你没有选择内容';
}
}
function rangeSet() {
const oP1 = document.getElementById('p1') as HTMLElement;
const oB1 = document.getElementById('b1') as HTMLElement;
const oRange = document.createRange();
oRange.setStart(oB1.firstChild as ChildNode, 2); // 设置range的“起点”
oRange.setEnd(oP1.lastChild as ChildNode, 3); // 设置range的“结束点”
// Range.startContainer 只读；
// 返回包含 Range 开始的节点。【返回的是一个文本节点】
console.log(oRange.startContainer); // 元素oB1.firstChild，文本节点
// Range.startOffset 只读；
// 返回一个数字，表示 Range 在 startContainer 中的起始位置。
console.log(oRange.startOffset); // 2，可看到“起点”在<b id="b1">Hello</b>应是第三个字符。
}
// function getCursor() {
// // 编辑框设置焦点
// const inputDom = _inputRef.value;
// inputDom.focus();
// const selection = document.getSelection() as Selection;
// const rangeCount = selection.rangeCount;
// if (rangeCount > 0) {
// // 设置最后光标对象
// state.lastEditRange = selection.getRangeAt(0);
// state.lastEditRange.deleteContents(); // 从 Document 中移除 Range 内容
// console.log('最后光标对象', state.lastEditRange);
// // 创建标签
// const el = document.createElement('span');
// el.innerHTML = '这是我创建的内容';
// // 在 Range 开头插入一个节点
// state.lastEditRange.insertNode(el);
// }
// }
// 插入话题
function insertTopic() {
insertHtmlAtCaret('#');
insertHtmlAtCaret('插入话题');
insertHtmlAtCaret('#');
const range = (window.getSelection() as Selection).getRangeAt(0);
range.selectNodeContents(
range.startContainer.childNodes[range.startOffset - 2]
);
}
// 插入标签
function insertEmoji() {
// 编辑框设置焦点
const inputDom = _inputRef.value;
inputDom.focus();
const selection = document.getSelection() as Selection;
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
// 设置最后光标对象
let range = selection.getRangeAt(0);
range.deleteContents(); // 从 Document 中移除 Range 内容
// 创建标签
const img = document.createElement('img');
img.setAttribute('class', 'img');
img.src = require('./imgs/angel.png');
img.style.height = '24px';
img.style.width = '24px';
// img.alt = item.label;
// 在 Range 开头插入一个节点
range.insertNode(img);
range = range.cloneRange();
range.setStartAfter(img);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
}
function insertHtmlAtCaret(html: any) {
// 编辑框设置焦点
const inputDom = _inputRef.value;
inputDom.focus();
const selection = document.getSelection() as Selection;
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
// 设置最后光标对象
let range = selection.getRangeAt(0);
range.deleteContents(); // 从 Document 中移除 Range 内容
// 创建标签
const el = document.createElement('span');
el.innerHTML = html;
const frag = document.createDocumentFragment();
let node;
let lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
}
}
function getVal() {
const re = getDomValue(_inputRef.value);
console.log(re);
}
// 获取纯文本内容
function getDomValue(elem: any) {
let res = '';
Array.from(elem.childNodes).forEach((child: any) => {
if (child.nodeName === '#text') {
res += child.nodeValue;
} else if (child.nodeName === 'BR') {
res += '\n';
} else if (child.nodeName === 'BUTTON') {
res += getDomValue(child);
} else if (child.nodeName === 'IMG') {
res += child.alt;
} else if (child.nodeName === 'DIV') {
res += '\n' + getDomValue(child);
}
});
return res;
}
</script>
<template>
<div class="q-pa-md">
<div class="reference q-pa-md q-mb-md rounded-borders">
<p>参考链接：</p>
<a
href="https://developer.mozilla.org/zh-CN/docs/Web/API/Range"
target="_blank"
rel="noopener noreferrer"
>MDN Range</a
>
<br />
<a
href="http://www.jianshu.com/p/ad2f818cc3b0"
target="_blank"
rel="noopener noreferrer"
>html5之Range对象详解</a
>
<br />
<a
href="https://segmentfault.com/a/1190000005869372"
target="_blank"
rel="noopener noreferrer"
>html元素contenteditable属性如何定位光标和设置光标</a
>
<br />
<a
href="https://juejin.cn/post/6844903793864212494"
target="_blank"
rel="noopener noreferrer"
>div+contenteditable 实现富文本发布框的小结</a
>
</div>
<input type="button" value="点击我" @click="rangeTest" />
<div id="showRange"></div>
<br />
<button @click="rangeSet">点我查看节点</button>
<p id="p1"><span>span</span><b id="b1">Hello</b> World</p>
<br />
<button @click="insertTopic">点我插入话题</button>
<img
src="./imgs/angel.png"
alt=""
style="width: 25px; height: 25px"
@click="insertEmoji"
/>
<button @click="getVal">点我获取纯文本内容</button>
<div class="_input" contenteditable="true" ref="_inputRef">输入文字</div>
</div>
</template>
<style lang="scss" scoped>
.reference {
border: 1px solid $border-color;
background: $primary-bg-light;
}
._input {
min-width: 200px;
min-height: 60px;
font-size: 14px;
padding: 5px 8px;
border: 1px solid #ddd;
}
</style>
src/modules/MDN-Range/route.ts 0 → 100644
View file @ 20b57642
export default [
{
path: 'MDN-Range',
name: 'MDN_RANGE',
component: () => import('./MdnRange.vue'),
meta: {
title: 'MDN Range',
permission: ['*'],
keepalive: true,
},
},
];
src/modules/binary-tree/BinaryTree.vue 0 → 100644
View file @ 20b57642
<!--
* @FileDescription: 用JS做二叉树遍历算法
* https://juejin.cn/post/7028073289943613471
* @Date: 2023-05-29
* @LastEditTime: 2023-05-29
-->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import Com from 'src/components';
const state = reactive({
data: {} as any,
});
onMounted(() => {
getData();
});
/**
* 我们用js的对象来表示二叉树
* 对象拥有三个属性，left、value、right,分别是左子树，值和右子树
* 上面 a+b*(c-d)-e/f 的例子我们用js可以这样表示
*/
function getData() {
state.data = {
value: '-',
left: {
value: '+',
left: {
value: 'a',
},
right: {
value: '*',
left: {
value: 'b',
},
right: {
value: '-',
left: {
value: 'c',
},
right: {
value: 'd',
},
},
},
},
right: {
value: '/',
left: {
value: 'e',
},
right: {
value: 'f',
},
},
};
}
</script>
<template>
<div>
<div class="row q-gutter-md">
<div class="img-box">
<img src="./imgs/binary-tree.jpg" />
</div>
<div class="q-gutter-md">
<table>
<thead>
<tr>
<th colspan="3">深度遍历</th>
</tr>
</thead>
<tbody>
<tr>
<th>前序</th>
<td>先访问根，然后访问左子树，最后访问右子树，DLR</td>
<td>-+a*b-cd/ef</td>
</tr>
<tr>
<th>中序</th>
<td>先访问左子树，然后访问根，最后访问右子树，LDR</td>
<td>a+b*c-d-e/f</td>
</tr>
<tr>
<th>后序</th>
<td>先后访问左子树，然后访问右子树，最后访问根，LRD</td>
<td>abcd-*+ef/-</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">广度遍历</th>
</tr>
</thead>
<tbody>
<tr>
<th>广度</th>
<td>按层的顺序一层一层遍历</td>
<td>-+/a*efb-cd</td>
</tr>
</tbody>
</table>
</div>
<div class="q-gutter-md">
<p>用js表示二叉树</p>
<Com.JsonView :data="state.data" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.img-box {
width: 350px;
> img {
width: 100%;
}
}
table {
border-collapse: collapse;
border: 1px solid #0d3f67;
color: #0d3f67;
th {
padding: 6px 4px;
font-size: 16px;
min-width: 120px;
border: 1px solid #0d3f67;
}
td {
padding: 6px 16px;
font-size: 16px;
border: 1px solid #0d3f67;
}
}
</style>
src/modules/binary-tree/route.ts 0 → 100644
View file @ 20b57642
export default [
{
path: 'binary-tree',
name: 'BINARY_TREE',
component: () => import('./BinaryTree.vue'),
meta: {
title: '二叉树',
permission: ['*'],
keepalive: true,
},
},
];
src/modules/json-view/IndexPage.vue 0 → 100644
View file @ 20b57642
<!--
* @FileDescription: JSON 预览
* @Date: 2023-05-16
* @LastEditTime: 2023-05-16
-->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { ComJsonView } from 'src/components';
const state = reactive({
data: {
name: '张三',
age: 28,
isShow: true,
money: null,
www: undefined,
children: [
{ name: '孩子1', age: 3 },
{ name: '孩子2', age: 1 },
'这是一句字符串',
100,
['1F', '2F', { name: '李四' }],
'珠穆朗玛峰',
],
sex: '男',
data: [
{ name: '张三', age: 18 },
{ name: '李四', age: 28 },
],
} as any,
});
onMounted(() => {
console.log('数据', state.data);
});
</script>
<template>
<div>{{ JSON.stringify(state.data) }}</div>
<br />
<div class="box">
<ComJsonView :data="state.data" />
</div>
<br />
</template>
<style lang="scss" scoped>
.box {
width: 500px;
padding: $padding-md;
margin-left: 40px;
border: 1px solid rgba(0, 0, 0, 0.562);
}
</style>
src/modules/json-view/route.ts 0 → 100644
View file @ 20b57642
export default [
{
path: 'json-view',
name: 'JSON_VIEW',
component: () => import('./IndexPage.vue'),
meta: {
title: 'JSON预览',
permission: ['*'],
keepalive: true,
},
},
];
src/modules/review-input-box/ReviewInputBox.vue 0 → 100644
View file @ 20b57642
This diff is collapsed.
src/modules/review-input-box/route.ts 0 → 100644
View file @ 20b57642
export default [
{
path: 'review-input-box',
name: 'REVIEW_INPUT_BOX',
component: () => import('./ReviewInputBox.vue'),
meta: {
title: '输入框',
permission: ['*'],
keepalive: true,
},
},
];
src/modules/vue-study/IndexPage.vue
View file @ 20b57642
...@@ -9,6 +9,7 @@ export default { ...@@ -9,6 +9,7 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted, watch, ref, nextTick, markRaw } from 'vue'; import { reactive, onMounted, watch, ref, nextTick, markRaw } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getType, isEmpty } from 'hcy-tool-test';
// import { useMessage } from 'src/common/hooks'; // import { useMessage } from 'src/common/hooks';
import PROVICE from './provice'; import PROVICE from './provice';
import { ChartOption, Series_A, Series_B, Series_D } from './config'; import { ChartOption, Series_A, Series_B, Series_D } from './config';
...@@ -16,7 +17,6 @@ import DateDetail from './element/DateDetail.vue'; ...@@ -16,7 +17,6 @@ import DateDetail from './element/DateDetail.vue';
import ImageScale from './element/ImageScale.vue'; import ImageScale from './element/ImageScale.vue';
import CropperImg from './element/CropperImg.vue'; import CropperImg from './element/CropperImg.vue';
import InsertCoin from './element/InsertCoin.vue'; import InsertCoin from './element/InsertCoin.vue';
// const { info } = useMessage(); // const { info } = useMessage();
const citySelectRef = ref<any>(null); const citySelectRef = ref<any>(null);
...@@ -70,6 +70,14 @@ watch( ...@@ -70,6 +70,14 @@ watch(
); );
onMounted(() => { onMounted(() => {
// const mytool = require('hcy-tool-test');
// const mytool = require('./test-utils/index');
const type = getType(123);
console.log(type);
const isE = isEmpty(0);
console.log(isE);
handleData(); handleData();
setChart(); setChart();
}); });
......
src/modules/vue-study/element/InsertCoin.vue
View file @ 20b57642
...@@ -7,6 +7,9 @@ import { ref } from 'vue'; ...@@ -7,6 +7,9 @@ import { ref } from 'vue';
defineExpose({ defineExpose({
openModel, openModel,
}); });
const emit = defineEmits<{
(e: 'onOk', value: any): void;
}>();
const show = ref(false); const show = ref(false);
const amount = ref(1); const amount = ref(1);
...@@ -18,6 +21,9 @@ function openModel() { ...@@ -18,6 +21,9 @@ function openModel() {
function onClose() { function onClose() {
show.value = false; show.value = false;
} }
function onOk() {
emit('onOk', amount);
}
</script> </script>
<template> <template>
<q-dialog v-model="show" persistent> <q-dialog v-model="show" persistent>
...@@ -33,12 +39,39 @@ function onClose() { ...@@ -33,12 +39,39 @@ function onClose() {
<q-card-section style="padding-bottom: 8px"> <q-card-section style="padding-bottom: 8px">
<div class="content" style="width: 100%"> <div class="content" style="width: 100%">
<div class="img-content" style="height: 300px; width: 100%">1</div> <div class="img-content" style="height: 300px; width: 100%">
<div class="img-cont-box">
<div
class="img-main-box img-main-box-left"
:class="[
amount === 1
? 'img-main-box-active'
: 'img-main-box-unactive',
]"
@click="amount = 1"
>
<div class="background-left"></div>
</div>
</div>
<div class="img-cont-box">
<div
class="img-main-box img-main-box-right"
:class="[
amount === 2
? 'img-main-box-active'
: 'img-main-box-unactive',
]"
@click="amount = 2"
>
<div class="background-right"></div>
</div>
</div>
</div>
<div> <div>
<q-checkbox v-model="giveLike" label="同时点赞内容" /> <q-checkbox v-model="giveLike" label="同时点赞内容" />
</div> </div>
<div class="row justify-center"> <div class="row justify-center">
<q-btn unelevated color="primary" label="确定" /> <q-btn unelevated color="primary" label="确定" @click="onOk" />
</div> </div>
<div class="experience-box row justify-center"> <div class="experience-box row justify-center">
经验值+10（今日20/50） 经验值+10（今日20/50）
...@@ -63,7 +96,66 @@ function onClose() { ...@@ -63,7 +96,66 @@ function onClose() {
transform: translateY(-18px); transform: translateY(-18px);
} }
.img-content { .img-content {
// background-color: bisque; display: grid;
grid-template-columns: repeat(2, 1fr);
}
.img-cont-box {
padding: 16px;
}
.img-main-box {
border-radius: 8px;
box-sizing: border-box;
width: 100%;
height: 100%;
position: relative;
> div {
width: 100%;
height: 100%;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
&::before {
position: absolute;
top: 12px;
left: 15px;
font-size: 14px;
}
&:hover {
cursor: pointer;
}
}
.img-main-box-active {
border: 2px solid $primary;
color: $primary;
}
.img-main-box-unactive {
border: 2px dashed rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.2);
> div {
filter: grayscale(1);
}
&:hover {
border: 2px dashed $primary;
color: $primary;
}
}
.img-main-box-left {
&::before {
content: '1硬币';
}
}
.background-left {
background: url('../icons/one.svg');
}
.img-main-box-right {
&::before {
content: '2硬币';
}
}
.background-right {
background: url('../icons/two.svg');
} }
.experience-box { .experience-box {
font-size: 12px; font-size: 12px;
......
src/modules/vue-study/icons/one.svg 0 → 100644
View file @ 20b57642
This diff is collapsed.
src/modules/vue-study/icons/two.svg 0 → 100644
View file @ 20b57642
This diff is collapsed.
src/router/routes.ts
View file @ 20b57642
...@@ -7,6 +7,10 @@ import VUE_STUDY from '../modules/vue-study/route'; ...@@ -7,6 +7,10 @@ import VUE_STUDY from '../modules/vue-study/route';
import VUE_KONVA from '../modules/vue-konva/route'; import VUE_KONVA from '../modules/vue-konva/route';
import VECTOR from '../modules/vector/route'; import VECTOR from '../modules/vector/route';
import VUE_KONVA_LINE from '../modules/vue-konva-line/route'; import VUE_KONVA_LINE from '../modules/vue-konva-line/route';
import JSON_VIEW from '../modules/json-view/route';
import BINARY_TREE from '../modules/binary-tree/route';
import MDN_RANGE from '../modules/MDN-Range/route';
import REVIEW_INPUT_BOX from '../modules/review-input-box/route';
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
{ {
...@@ -18,7 +22,7 @@ const routes: RouteRecordRaw[] = [ ...@@ -18,7 +22,7 @@ const routes: RouteRecordRaw[] = [
path: '', path: '',
name: 'LaoutIndexPage', name: 'LaoutIndexPage',
component: () => import('pages/IndexPage.vue'), component: () => import('pages/IndexPage.vue'),
redirect: '/vue-study', redirect: '/review-input-box',
children: [ children: [
{ {
path: 'home', path: 'home',
...@@ -137,6 +141,10 @@ const routes: RouteRecordRaw[] = [ ...@@ -137,6 +141,10 @@ const routes: RouteRecordRaw[] = [
...VUE_KONVA, ...VUE_KONVA,
...VECTOR, ...VECTOR,
...VUE_KONVA_LINE, ...VUE_KONVA_LINE,
...JSON_VIEW,
...BINARY_TREE,
...MDN_RANGE,
...REVIEW_INPUT_BOX,
], ],
}, },
], ],
......
yarn.lock
View file @ 20b57642
...@@ -3618,6 +3618,11 @@ hash-sum@^1.0.2: ...@@ -3618,6 +3618,11 @@ hash-sum@^1.0.2:
resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04" resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
integrity sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA== integrity sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==
hcy-tool-test@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/hcy-tool-test/-/hcy-tool-test-1.0.4.tgz#e97211b0ab9ec230a3888387990e095d35c1c0fc"
integrity sha512-2w+mSrtDoDkNkQo+Cy/wtNhKdS8pJNECHroi1W9OqDZ4fc+yiPcIfhe0HJ5BCsv744dVyndelL6hDMgaJ5fe4A==
he@^1.2.0: he@^1.2.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment