新增前端vue
This commit is contained in:
118
web-vue/packages/test/views/demo/markdown.vue
Normal file
118
web-vue/packages/test/views/demo/markdown.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<PageWrapper title="Markdown 组件实例" :contentFullHeight="false">
|
||||
<CollapseContainer title="Markdown 演示" :expand="true">
|
||||
<Markdown :bizKey="'123456'" :bizType="'testData'" v-model:value="valueRef" @change="handleChange" />
|
||||
<a-button @click="clearValue" class="mt-2 mr-2" type="default"> 清空内容 </a-button>
|
||||
<a href="https://ld246.com/article/1583308420519" target="_blank">语法速查手册</a>、
|
||||
<a href="https://ld246.com/article/1583129520165" target="_blank">基础语法</a>、
|
||||
<a href="https://ld246.com/article/1583305480675" target="_blank">扩展语法</a>、
|
||||
<a href="https://ld246.com/article/1582778815353" target="_blank">键盘快捷键</a>
|
||||
</CollapseContainer>
|
||||
<CollapseContainer title="Markdown 预览" :expand="false">
|
||||
<MarkdownViewer :value="valueRef" />
|
||||
</CollapseContainer>
|
||||
<CollapseContainer title="Markdown 表单" :expand="false">
|
||||
<BasicForm
|
||||
:labelWidth="100"
|
||||
:schemas="schemas"
|
||||
:actionColOptions="{ span: 24, style: 'text-align: center' }"
|
||||
:baseColProps="{ span: 24 }"
|
||||
:showActionButtonGroup="true"
|
||||
@submit="handleSubmit"
|
||||
/>
|
||||
</CollapseContainer>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, h } from 'vue';
|
||||
import { Markdown, MarkdownViewer } from '@jeesite/core/components/Markdown';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
|
||||
import { BasicForm, FormSchema } from '@jeesite/core/components/Form';
|
||||
import { CollapseContainer } from '@jeesite/core/components/Container';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
|
||||
const valueRef = ref(`
|
||||
# 标题h1
|
||||
|
||||
##### 标题h5
|
||||
|
||||
**加粗**
|
||||
*斜体*
|
||||
~~删除线~~
|
||||
[链接](https://jeesite.com)
|
||||
↓分割线↓
|
||||
|
||||
---
|
||||
|
||||
|
||||
* 无序列表1
|
||||
* 无序列表1.1
|
||||
|
||||
1. 有序列表1
|
||||
2. 有序列表2
|
||||
|
||||
* [ ] 任务列表1
|
||||
* [x] 任务列表2
|
||||
|
||||
> 引用示例
|
||||
|
||||
\`\`\`js
|
||||
// 代码块:
|
||||
(() => {
|
||||
var htmlRoot = document.getElementById('htmlRoot');
|
||||
var theme = window.localStorage.getItem('__APP__DARK__MODE__');
|
||||
if (htmlRoot && theme) {
|
||||
htmlRoot.setAttribute('data-theme', theme);
|
||||
theme = htmlRoot = null;
|
||||
}
|
||||
})();
|
||||
\`\`\`
|
||||
|
||||
| 表格 | 示例 | 🎉️ |
|
||||
| --- | --- | --- |
|
||||
| 1 | 2 | 3 |
|
||||
| 4 | 5 | 6 |
|
||||
`);
|
||||
|
||||
function handleChange(v: string) {
|
||||
valueRef.value = v;
|
||||
}
|
||||
|
||||
function clearValue() {
|
||||
valueRef.value = '';
|
||||
}
|
||||
|
||||
// 在表单中展示
|
||||
const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
label: '标题',
|
||||
defaultValue: '标题',
|
||||
rules: [{ required: true }],
|
||||
},
|
||||
{
|
||||
field: 'markdown',
|
||||
component: 'Input',
|
||||
label: '内容',
|
||||
defaultValue: '内容',
|
||||
rules: [{ required: true, trigger: 'blur' }],
|
||||
render: ({ model, field }) => {
|
||||
return h(Markdown, {
|
||||
bizKey: '123456',
|
||||
bizType: 'testData',
|
||||
value: model[field],
|
||||
onChange: (value: string) => {
|
||||
model[field] = value;
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
function handleSubmit(values: any) {
|
||||
createMessage.success('values:' + JSON.stringify(values));
|
||||
}
|
||||
</script>
|
||||
66
web-vue/packages/test/views/demo/params.vue
Normal file
66
web-vue/packages/test/views/demo/params.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<PageWrapper title="组件传参实例">
|
||||
<p class="mb-3">
|
||||
<strong>1、菜单组件参数：</strong>
|
||||
</p>
|
||||
<p class="mb-3"> 如设置组件参数：{ aa: 'aa1', bb: 'bb2' } </p>
|
||||
<p class="mb-3"> 当前接受参数是：{{ props }} </p>
|
||||
<p class="mb-3">
|
||||
<strong>2、路由请求参数：</strong>
|
||||
</p>
|
||||
<p class="mb-3">
|
||||
路由请求参数：
|
||||
<Input
|
||||
v-model:value="value"
|
||||
placeholder="建议为url标准字符，输入后点击切换"
|
||||
style="width: 150px; margin-right: 10px"
|
||||
/>
|
||||
<a-button type="primary" @click="handleClickGo">切换路由</a-button>
|
||||
(输入参数后，点击切换路由按钮)
|
||||
</p>
|
||||
<p class="mb-3"> 接受请求参数是：{{ query }} </p>
|
||||
<p class="mb-3">
|
||||
接受路径参数是：{{ params }} <br />
|
||||
注意：在 Vue Router 4.1.4 中 push params 被移除，请使用 query 代替 <br />
|
||||
原文：https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
|
||||
<br />
|
||||
那么如何使用 params 组件参数呢？一般这样的地址会作为隐形路由使用（隐藏的菜单或权限菜单）<br />
|
||||
菜单管理：链接地址：/demo/params/{test1}，组件路径：/demo/params，是否可见：隐藏 <br />
|
||||
尝试地址栏填写：http://127.0.0.1:3100/demo/params/test123 <br />
|
||||
这样 unref(currentRoute).params.test1 将得到 test123 的值
|
||||
</p>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Input } from 'ant-design-vue';
|
||||
import { computed, ref, unref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import { propTypes } from '@jeesite/core/utils/propTypes';
|
||||
|
||||
const props = defineProps({
|
||||
id: propTypes.string,
|
||||
aa: propTypes.string,
|
||||
bb: propTypes.string,
|
||||
});
|
||||
|
||||
const { currentRoute, push } = useRouter();
|
||||
const value = ref<string>('');
|
||||
|
||||
const params = computed(() => {
|
||||
return unref(currentRoute).params;
|
||||
});
|
||||
|
||||
const query = computed(() => {
|
||||
return unref(currentRoute).query;
|
||||
});
|
||||
|
||||
const handleClickGo = () => {
|
||||
const { name } = unref(currentRoute);
|
||||
push({
|
||||
name: name!,
|
||||
params: { param: unref(value) },
|
||||
query: { query: unref(value) },
|
||||
});
|
||||
};
|
||||
</script>
|
||||
26
web-vue/packages/test/views/demo/watermark.vue
Normal file
26
web-vue/packages/test/views/demo/watermark.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<PageWrapper title="页面水印示例">
|
||||
<a-button type="primary" class="mr-2" @click="setWatermark('Hello JeeSite !')"> 创建水印 1 </a-button>
|
||||
<a-button color="error" class="mr-2" @click="clear"> 清理水印 1 </a-button>
|
||||
<a-button type="primary" class="mr-2" @click="setWatermark2('https://jeesite.com')"> 创建水印 2 </a-button>
|
||||
<a-button color="error" class="mr-2" @click="clearAll"> 清理全部 </a-button>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onUnmounted, ref } from 'vue';
|
||||
import { useWatermark } from '@jeesite/core/hooks/web/useWatermark';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
|
||||
const app = ref(document.body);
|
||||
|
||||
const { setWatermark, clear, clearAll } = useWatermark();
|
||||
const { setWatermark: setWatermark2 } = useWatermark(app, {
|
||||
fontColor: 'red',
|
||||
fontSize: 12,
|
||||
rotate: 30,
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearAll();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user