feat: 更新 VSCode 设置，更新 package.json 脚本，添加新功能页面和重构组件
This commit is contained in:
严浩
@ -1,32 +0,0 @@
|
||||
<script lang="ts">
|
||||
// https://icon-sets.iconify.design
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div b="1px solid pink" mt-2 text-4 p-2 space-y-2>
|
||||
<!-- <div b="1px solid pink">
|
||||
<div>@iconify-json/carbon/icons.json</div>
|
||||
<div i-carbon-face-cool text-orange />
|
||||
</div> -->
|
||||
|
||||
<div b="1px solid pink">
|
||||
<div>Icons({ autoInstall: true })</div>
|
||||
<icon-carbon-face-cool class="text-yellow" w-8 h-8 />
|
||||
</div>
|
||||
|
||||
<!-- <div b="1px solid pink">
|
||||
<div>pacman.svg</div>
|
||||
<div class="icon:pacman text-(pink)" />
|
||||
</div> -->
|
||||
|
||||
<div b="1px solid pink">
|
||||
<div>pacman.svg</div>
|
||||
<icon-svg:pacman text-blue w-12 h-12 />
|
||||
<some-icon text-cyan w-12 h-12 />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SomeIcon from '~icons/svg/pacman';
|
||||
</script>
|
||||
@ -1,54 +0,0 @@
|
||||
<!-- https://github.com/intlify/vue-i18n/blob/master/examples/type-safe/type-annotation/src/components/en-US.json -->
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"unplugin-hello": "Hello, unplugin-vue-i18n!"
|
||||
},
|
||||
"zh": {
|
||||
"unplugin-hello": "你好，unplugin-vue-i18n！"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
<template>
|
||||
<div class="i18nComp">
|
||||
<div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
|
||||
<p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
|
||||
|
||||
<p>
|
||||
<span class="label">t('unplugin-hello')</span>: {{ t('unplugin-hello') }}
|
||||
<b>这个定义在i18n lang="json"的</b>
|
||||
</p>
|
||||
<p>
|
||||
<span class="label">t('message.greeting')</span>: {{ t('message.greeting') }}
|
||||
<b>这个在i18n lang="json"没有，会fallback到全局的</b>
|
||||
</p>
|
||||
|
||||
<form>
|
||||
<label for="locale">Change locale:</label>
|
||||
<select id="locale" v-model="$i18n.locale">
|
||||
<option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale">{{ locale }}</option>
|
||||
</select>
|
||||
<p>$i18n.locale: {{ $i18n.locale }}</p>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n({
|
||||
inheritLocale: true,
|
||||
useScope: 'local',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.i18nComp .label,
|
||||
.i18nComp label {
|
||||
color: #2c3e50;
|
||||
font-weight: bold;
|
||||
background-color: #f8f9fa;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const dialogRef = usePrimevueDialogRef();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div mb-8>dialog-content.vue</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button type="button" label="关闭" severity="secondary" @click="dialogRef?.close"></Button>
|
||||
<Button type="button" label="关闭" @click="dialogRef?.close"></Button>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,78 +0,0 @@
|
||||
import dialogContent from './__dialog-content.vue';
|
||||
|
||||
const dynamicComponent = defineComponent({
|
||||
props: {
|
||||
'defining-props': {
|
||||
type: Object as PropType<Record<string, unknown>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const dialogRef = usePrimevueDialogRef();
|
||||
return () => (
|
||||
<div>
|
||||
<button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
|
||||
<pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
|
||||
<div>PrimeVue DynamicDialog</div> <hr />
|
||||
<pre>{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}</pre> <hr />
|
||||
<pre>{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}</pre> <hr />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// https://primevue.org/dynamicdialog/
|
||||
export const openDialog = async () => {
|
||||
const dialog1 = DialogService.open(dynamicComponent, {
|
||||
props: {
|
||||
header: '对话框1 可以拖动',
|
||||
position: 'bottomleft',
|
||||
draggable: true,
|
||||
pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: pt:mask:class="backdrop-blur-sm"
|
||||
},
|
||||
data: {
|
||||
用inject接收: '通过 DynamicDialogOptions.data 传递的数据',
|
||||
},
|
||||
emits: {
|
||||
// https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
|
||||
// ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
|
||||
'defining-props': {
|
||||
'用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
|
||||
},
|
||||
绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
|
||||
onClose: () => dialog1.close(),
|
||||
},
|
||||
});
|
||||
|
||||
await nextTick();
|
||||
// if ($__DEV__) return;
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
DialogService.open(dialogContent, {
|
||||
props: {
|
||||
header: '对话框2',
|
||||
// draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const openToast = () => {
|
||||
ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 3000 });
|
||||
ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 0 });
|
||||
};
|
||||
|
||||
export const openConfirm = async () => {
|
||||
ConfirmationService.require({
|
||||
message: '确定要继续吗？',
|
||||
header: '确认',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
rejectProps: { label: '取消', severity: 'secondary', outlined: true },
|
||||
acceptProps: { label: '确定' },
|
||||
accept: () => {
|
||||
ToastService.add({ severity: 'info', summary: '已确认', detail: '您已同意操作', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
ToastService.add({ severity: 'error', summary: '已取消', detail: '您已取消操作', life: 3000 });
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -1,49 +0,0 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { openConfirm, openDialog, openToast } from './fns';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="primevue py-4 flex items-start flex-wrap gap-6">
|
||||
<ProgressSpinner class="w-6! h-6! m-0!" />
|
||||
<FloatLabel>
|
||||
<InputText default-value="DEFAULT_VALUE" id="username" />
|
||||
<label for="username">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel>
|
||||
<Select
|
||||
:options="[
|
||||
{ name: '纽约', code: 'NY' },
|
||||
{ name: '罗马', code: 'RM' },
|
||||
{ name: '伦敦', code: 'LDN' },
|
||||
{ name: '伊斯坦布尔', code: 'IST' },
|
||||
{ name: '巴黎', code: 'PRS' },
|
||||
]"
|
||||
optionLabel="name"
|
||||
class="min-w-[200px]"
|
||||
/>
|
||||
<label>SELECT</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel w-full>
|
||||
<UploadDemo />
|
||||
<label>FileUpload</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel>
|
||||
<FileUpload name="demo[]" url="/api/upload" :maxFileSize="1000000" />
|
||||
<label>FileUpload</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel>
|
||||
<DatePicker showButtonBar dateFormat="dd/mm/yy" :default-value="new Date()" />
|
||||
<label>DatePicker</label>
|
||||
</FloatLabel>
|
||||
|
||||
<Button @click="openToast">提示服务</Button>
|
||||
<Button @click="openDialog">对话框服务</Button>
|
||||
<Button @click="openConfirm">确认服务</Button>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user