feat:新增pure-admin前端
This commit is contained in:
chenchun
41
Yi.Pure.Vue3/src/views/components/animatecss.vue
Normal file
41
Yi.Pure.Vue3/src/views/components/animatecss.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import ReAnimateSelector from "@/components/ReAnimateSelector";
|
||||
|
||||
defineOptions({
|
||||
name: "AnimateCss"
|
||||
});
|
||||
|
||||
const animate = ref("");
|
||||
|
||||
watch(animate, () => {
|
||||
console.log("animate", animate.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
<el-link
|
||||
href="https://animate.style/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
animate.css
|
||||
</el-link>
|
||||
选择器
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/animatecss.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/animatecss.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<ReAnimateSelector v-model="animate" class="!w-[200px]" />
|
||||
</el-card>
|
||||
</template>
|
||||
29
Yi.Pure.Vue3/src/views/components/button.vue
Normal file
29
Yi.Pure.Vue3/src/views/components/button.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "ButtonPage"
|
||||
});
|
||||
|
||||
const { VITE_PUBLIC_PATH } = import.meta.env;
|
||||
|
||||
const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">通过 iframe 引入按钮页面</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/button.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/button.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
|
||||
</el-card>
|
||||
</template>
|
||||
161
Yi.Pure.Vue3/src/views/components/cascader.vue
Normal file
161
Yi.Pure.Vue3/src/views/components/cascader.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
provinceAndCityDataPlus,
|
||||
provinceAndCityData,
|
||||
convertTextToCode,
|
||||
regionDataPlus,
|
||||
regionData,
|
||||
CodeToText
|
||||
} from "@/utils/chinaArea";
|
||||
import { ref } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Cascader"
|
||||
});
|
||||
|
||||
const selectedOptions1 = ref(["110000", "110100"]);
|
||||
const selectedOptions2 = ref(["120000", "120100", "120101"]);
|
||||
const selectedOptions3 = ref(["130000", ""]);
|
||||
const selectedOptions4 = ref(["120000", "120100", ""]);
|
||||
|
||||
const handleChange = value => {
|
||||
console.log(value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<p class="font-medium">区域级联选择器</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cascader.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/cascader.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
1. 二级联动（不带“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions1"
|
||||
:options="provinceAndCityData"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</span>
|
||||
<div class="leading-10">
|
||||
<div>绑定值：{{ selectedOptions1 }}</div>
|
||||
<div>
|
||||
区域码转汉字：
|
||||
{{ CodeToText[selectedOptions1[0]] }},
|
||||
{{ CodeToText[selectedOptions1[1]] }}
|
||||
</div>
|
||||
<div>
|
||||
汉字转区域码：
|
||||
{{
|
||||
convertTextToCode(
|
||||
CodeToText[selectedOptions1[0]],
|
||||
CodeToText[selectedOptions1[1]]
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
2. 二级联动（带有“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions3"
|
||||
:options="provinceAndCityDataPlus"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</span>
|
||||
<div class="leading-10">
|
||||
<div>绑定值：{{ selectedOptions3 }}</div>
|
||||
<div>
|
||||
区域码转汉字：
|
||||
{{ CodeToText[selectedOptions3[0]] }},
|
||||
{{ CodeToText[selectedOptions3[1]] }}
|
||||
</div>
|
||||
<div>
|
||||
汉字转区域码：
|
||||
{{
|
||||
convertTextToCode(
|
||||
CodeToText[selectedOptions3[0]],
|
||||
CodeToText[selectedOptions3[1]]
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
3. 三级联动（不带“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions2"
|
||||
:options="regionData"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</span>
|
||||
<div class="leading-10">
|
||||
<div>绑定值：{{ selectedOptions2 }}</div>
|
||||
<div>
|
||||
区域码转汉字：
|
||||
{{ CodeToText[selectedOptions2[0]] }},
|
||||
{{ CodeToText[selectedOptions2[1]] }},
|
||||
{{ CodeToText[selectedOptions2[2]] }}
|
||||
</div>
|
||||
<div>
|
||||
汉字转区域码：
|
||||
{{
|
||||
convertTextToCode(
|
||||
CodeToText[selectedOptions2[0]],
|
||||
CodeToText[selectedOptions2[1]],
|
||||
CodeToText[selectedOptions2[2]]
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
4. 三级联动（带"全部选项"）
|
||||
<el-cascader
|
||||
v-model="selectedOptions4"
|
||||
:options="regionDataPlus"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</span>
|
||||
<div class="leading-10">
|
||||
<div>绑定值：{{ selectedOptions4 }}</div>
|
||||
<div>
|
||||
区域码转汉字：
|
||||
{{ CodeToText[selectedOptions4[0]] }},
|
||||
{{ CodeToText[selectedOptions4[1]] }},
|
||||
{{ CodeToText[selectedOptions4[2]] }}
|
||||
</div>
|
||||
<div>
|
||||
汉字转区域码：
|
||||
{{
|
||||
convertTextToCode(
|
||||
CodeToText[selectedOptions4[0]],
|
||||
CodeToText[selectedOptions4[1]],
|
||||
CodeToText[selectedOptions4[2]]
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
333
Yi.Pure.Vue3/src/views/components/check-button.vue
Normal file
333
Yi.Pure.Vue3/src/views/components/check-button.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { getKeyList } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "CheckButton"
|
||||
});
|
||||
|
||||
const spaceSize = ref(20);
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
const checked = ref(true);
|
||||
|
||||
const radio = ref("wait");
|
||||
const radioBox = ref("complete");
|
||||
const radioCustom = ref("progress");
|
||||
|
||||
const checkboxGroup = ref(["apple", "tomato"]);
|
||||
const checkboxGroupBox = ref(["cucumber", "onion", "blueberry"]);
|
||||
const checkboxGroupCustom = ref(["tomato", "watermelon", "strawberry"]);
|
||||
|
||||
/** 单选（可控制间距的按钮样式） */
|
||||
const checkTag = ref([
|
||||
{
|
||||
title: "等待中",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "进行中",
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
title: "已完成",
|
||||
checked: false
|
||||
}
|
||||
]);
|
||||
const curTagMap = ref({});
|
||||
function onChecked(tag, index) {
|
||||
if (size.value === "disabled") return;
|
||||
curTagMap.value[index] = Object.assign({
|
||||
...tag,
|
||||
checked: !tag.checked
|
||||
});
|
||||
checkTag.value.map(item => (item.checked = false));
|
||||
checkTag.value[index].checked = curTagMap.value[index].checked;
|
||||
const { title, checked } = curTagMap.value[index];
|
||||
message(checked ? `已选中${title}` : `取消选中${title}`, {
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
|
||||
/** 多选（可控制间距的按钮样式） */
|
||||
const checkGroupTag = ref([
|
||||
{
|
||||
title: "苹果",
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
title: "西红柿",
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
title: "香蕉",
|
||||
checked: false
|
||||
}
|
||||
]);
|
||||
const curTagGroupMap = ref({});
|
||||
function onGroupChecked(tag, index) {
|
||||
if (size.value === "disabled") return;
|
||||
curTagGroupMap.value[index] = Object.assign({
|
||||
...tag,
|
||||
checked: !tag.checked
|
||||
});
|
||||
checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked;
|
||||
}
|
||||
|
||||
function onSingleChecked() {
|
||||
if (size.value === "disabled") return;
|
||||
checked.value = !checked.value;
|
||||
}
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-button.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/check-button.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<p class="mb-2">单选（紧凑风格的按钮样式）</p>
|
||||
<el-radio-group
|
||||
v-model="radio"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio-button value="wait">等待中</el-radio-button>
|
||||
<el-radio-button value="progress">进行中</el-radio-button>
|
||||
<el-radio-button value="complete">已完成</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">单选（带有边框）</p>
|
||||
<el-radio-group
|
||||
v-model="radioBox"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio value="wait" border>等待中</el-radio>
|
||||
<el-radio value="progress" border>进行中</el-radio>
|
||||
<el-radio value="complete" border>已完成</el-radio>
|
||||
</el-radio-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">单选（自定义内容）</p>
|
||||
<el-radio-group
|
||||
v-model="radioCustom"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio-button value="wait">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline icon="ri:progress-8-fill" class="mr-1" />
|
||||
等待中
|
||||
</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button value="progress">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline icon="ri:progress-6-line" class="mr-1" />
|
||||
进行中
|
||||
</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button value="complete">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline icon="ri:progress-8-line" class="mr-1" />
|
||||
已完成
|
||||
</span>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">多选（紧凑风格的按钮样式）</p>
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroup"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox-button value="apple">苹果</el-checkbox-button>
|
||||
<el-checkbox-button value="tomato">西红柿</el-checkbox-button>
|
||||
<el-checkbox-button value="banana">香蕉</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">多选（带有边框）</p>
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroupBox"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox value="cucumber" border>黄瓜</el-checkbox>
|
||||
<el-checkbox value="onion" border>洋葱</el-checkbox>
|
||||
<el-checkbox value="blueberry" border>蓝莓</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">多选（来点不一样的体验）</p>
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroupCustom"
|
||||
class="pure-checkbox"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox-button value="tomato">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline icon="streamline-emojis:tomato" class="mr-1" />
|
||||
番茄
|
||||
</span>
|
||||
</el-checkbox-button>
|
||||
<el-checkbox-button value="watermelon">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline
|
||||
icon="streamline-emojis:watermelon-1"
|
||||
class="mr-1"
|
||||
/>
|
||||
西瓜
|
||||
</span>
|
||||
</el-checkbox-button>
|
||||
<el-checkbox-button value="strawberry">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline
|
||||
icon="streamline-emojis:strawberry-1"
|
||||
class="mr-1"
|
||||
/>
|
||||
草莓
|
||||
</span>
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<el-divider />
|
||||
|
||||
<p>可控制间距的按钮样式</p>
|
||||
<el-slider
|
||||
v-model="spaceSize"
|
||||
class="mb-2 !w-[300px]"
|
||||
:show-tooltip="false"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<p class="mb-2">单选</p>
|
||||
<el-space wrap :size="spaceSize">
|
||||
<el-check-tag
|
||||
v-for="(tag, index) in checkTag"
|
||||
:key="index"
|
||||
:class="[
|
||||
'select-none',
|
||||
size === 'disabled' && 'tag-disabled',
|
||||
tag.checked && 'is-active'
|
||||
]"
|
||||
:checked="tag.checked"
|
||||
@change="onChecked(tag, index)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
</el-check-tag>
|
||||
</el-space>
|
||||
<p class="mb-2 mt-4">
|
||||
多选
|
||||
{{
|
||||
getKeyList(
|
||||
checkGroupTag.filter(tag => tag.checked),
|
||||
"title"
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<el-space wrap :size="spaceSize">
|
||||
<el-check-tag
|
||||
v-for="(tag, index) in checkGroupTag"
|
||||
:key="index"
|
||||
:class="[
|
||||
'select-none',
|
||||
size === 'disabled' && 'tag-disabled',
|
||||
tag.checked && 'is-active'
|
||||
]"
|
||||
:checked="tag.checked"
|
||||
@change="onGroupChecked(tag, index)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
</el-check-tag>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">单个可选按钮</p>
|
||||
<el-check-tag
|
||||
:class="[
|
||||
'select-none',
|
||||
size === 'disabled' && 'tag-disabled',
|
||||
checked && 'is-active'
|
||||
]"
|
||||
:checked="checked"
|
||||
@change="onSingleChecked"
|
||||
>
|
||||
一个人也要努力 😊
|
||||
</el-check-tag>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
|
||||
:deep(.pure-checkbox) {
|
||||
.el-checkbox-button {
|
||||
/* 选中时的自定义样式 */
|
||||
&.is-checked {
|
||||
.el-checkbox-button__inner {
|
||||
color: var(--el-color-primary);
|
||||
background-color: var(--el-color-primary-light-8);
|
||||
border-color: transparent;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 禁用时的自定义样式 */
|
||||
&.is-disabled {
|
||||
.el-checkbox-button__inner {
|
||||
color: var(--el-disabled-text-color);
|
||||
background-color: var(
|
||||
--el-button-disabled-bg-color,
|
||||
var(--el-fill-color-blank)
|
||||
);
|
||||
border-color: var(
|
||||
--el-button-disabled-border-color,
|
||||
var(--el-border-color-light)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 可控制间距的按钮禁用样式 */
|
||||
.tag-disabled {
|
||||
color: var(--el-disabled-text-color);
|
||||
cursor: not-allowed;
|
||||
background-color: var(--el-color-info-light-9);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-info-light-9);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
89
Yi.Pure.Vue3/src/views/components/check-card.vue
Normal file
89
Yi.Pure.Vue3/src/views/components/check-card.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
// https://plus-pro-components.com/components/check-card-group.html
|
||||
import "plus-pro-components/es/components/check-card-group/style/css";
|
||||
import { PlusCheckCardGroup } from "plus-pro-components";
|
||||
|
||||
defineOptions({
|
||||
name: "CheckCard"
|
||||
});
|
||||
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
const list = ref("0");
|
||||
const list1 = ref([]);
|
||||
|
||||
const options = [
|
||||
{
|
||||
title: "标题一",
|
||||
value: "0",
|
||||
description: "坚持梦想，成就不凡的自己",
|
||||
avatar:
|
||||
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
||||
},
|
||||
{
|
||||
title: "标题二",
|
||||
value: "1",
|
||||
description: "每一次努力，都是成长的契机",
|
||||
avatar:
|
||||
"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
|
||||
}
|
||||
];
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://plus-pro-components.com/components/check-card-group.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
多选卡片组
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-card.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/check-card.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2 mt-4">单选</p>
|
||||
<PlusCheckCardGroup
|
||||
v-model="list"
|
||||
:options="options"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">多选</p>
|
||||
<PlusCheckCardGroup
|
||||
v-model="list1"
|
||||
:options="options"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
multiple
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
93
Yi.Pure.Vue3/src/views/components/collapse.vue
Normal file
93
Yi.Pure.Vue3/src/views/components/collapse.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Collapse"
|
||||
});
|
||||
|
||||
const radio = ref();
|
||||
const collapseRef = ref();
|
||||
const activeNames = ref(["1", "2", "3", "4", "5"]);
|
||||
const isOpen = ref(true);
|
||||
|
||||
function onClick() {
|
||||
isOpen.value
|
||||
? (activeNames.value = [])
|
||||
: radio.value === "accordion"
|
||||
? (activeNames.value = ["5"])
|
||||
: (activeNames.value = ["1", "2", "3", "4", "5"]);
|
||||
isOpen.value = !isOpen.value;
|
||||
}
|
||||
|
||||
const handleChange = (val: string[]) => {
|
||||
console.log(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/collapse.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
折叠面板
|
||||
</el-link>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/collapse.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/collapse.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础用法</p>
|
||||
<el-radio-group v-model="radio" class="mb-3">
|
||||
<el-radio value="">可同时展开多个面板</el-radio>
|
||||
<el-radio value="accordion">每次只能展开一个面板</el-radio>
|
||||
</el-radio-group>
|
||||
<el-button size="small" text bg class="ml-8 mb-1" @click="onClick">
|
||||
外部触发打开、关闭
|
||||
</el-button>
|
||||
<el-collapse
|
||||
ref="collapseRef"
|
||||
v-model="activeNames"
|
||||
class="w-[360px]"
|
||||
:accordion="radio === 'accordion' ? true : false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-collapse-item title="周一" name="1">
|
||||
周一启航，新的篇章
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="周二" name="2">
|
||||
周二律动，携手共进
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="周三" name="3">
|
||||
周三昂扬，激情不减
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="周四" name="4">
|
||||
周四精进，事半功倍
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="5">
|
||||
<template #title>
|
||||
周五
|
||||
<IconifyIconOnline
|
||||
icon="streamline-emojis:beaming-face-with-smiling-eyes"
|
||||
class="ml-1"
|
||||
width="30"
|
||||
/>
|
||||
</template>
|
||||
周五喜悦，收尾归档
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
</template>
|
||||
105
Yi.Pure.Vue3/src/views/components/color-picker.vue
Normal file
105
Yi.Pure.Vue3/src/views/components/color-picker.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "ColorPicker"
|
||||
});
|
||||
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
const isOpen = ref(false);
|
||||
const colorPickerRef = ref();
|
||||
|
||||
const color = ref("rgba(255, 69, 0, 0.68)");
|
||||
const otherColor = ref("hsla(209, 100%, 56%, 0.73)");
|
||||
const predefineColors = ref([
|
||||
"#ff4500",
|
||||
"#ff8c00",
|
||||
"#ffd700",
|
||||
"#90ee90",
|
||||
"#00ced1",
|
||||
"#1e90ff",
|
||||
"#c71585",
|
||||
"rgba(255, 69, 0, 0.68)",
|
||||
"rgb(255, 120, 0)",
|
||||
"hsv(51, 100, 98)",
|
||||
"hsva(120, 40, 94, 0.5)",
|
||||
"hsl(181, 100%, 37%)",
|
||||
"hsla(209, 100%, 56%, 0.73)",
|
||||
"#c7158577"
|
||||
]);
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
|
||||
function onClick() {
|
||||
isOpen.value ? colorPickerRef.value.hide() : colorPickerRef.value.show();
|
||||
isOpen.value = !isOpen.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/color-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
颜色选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/color-picker.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>
|
||||
<el-color-picker
|
||||
v-model="color"
|
||||
show-alpha
|
||||
:predefine="predefineColors"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">外部触发器</p>
|
||||
<el-space wrap>
|
||||
<el-color-picker
|
||||
ref="colorPickerRef"
|
||||
v-model="otherColor"
|
||||
show-alpha
|
||||
:predefine="predefineColors"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<el-button
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
@click="onClick"
|
||||
>
|
||||
{{ isOpen ? "关闭" : "打开" }}
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</template>
|
||||
74
Yi.Pure.Vue3/src/views/components/contextmenu/basic.vue
Normal file
74
Yi.Pure.Vue3/src/views/components/contextmenu/basic.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">基础用法</p>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item>GitHub</v-contextmenu-item>
|
||||
<v-contextmenu-item>GitLab</v-contextmenu-item>
|
||||
|
||||
<v-contextmenu-divider />
|
||||
|
||||
<v-contextmenu-submenu title="蔬菜菜">
|
||||
<v-contextmenu-item>土豆</v-contextmenu-item>
|
||||
|
||||
<v-contextmenu-submenu title="青菜">
|
||||
<v-contextmenu-item>小油菜</v-contextmenu-item>
|
||||
<v-contextmenu-item>空心菜</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
|
||||
<v-contextmenu-item>黄瓜</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
|
||||
<v-contextmenu-item disabled>菠萝蜜</v-contextmenu-item>
|
||||
|
||||
<v-contextmenu-divider />
|
||||
|
||||
<v-contextmenu-item>哈密瓜</v-contextmenu-item>
|
||||
</v-contextmenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
ContextmenuSubmenu,
|
||||
ContextmenuGroup
|
||||
} from "v-contextmenu";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ExampleSimple",
|
||||
|
||||
components: {
|
||||
[Contextmenu.name]: Contextmenu,
|
||||
[ContextmenuItem.name]: ContextmenuItem,
|
||||
[ContextmenuDivider.name]: ContextmenuDivider,
|
||||
[ContextmenuSubmenu.name]: ContextmenuSubmenu,
|
||||
[ContextmenuGroup.name]: ContextmenuGroup
|
||||
},
|
||||
|
||||
directives: {
|
||||
contextmenu: directive
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: rgb(90 167 164 / 20%);
|
||||
border: 3px dashed rgb(90 167 164 / 90%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
41
Yi.Pure.Vue3/src/views/components/contextmenu/index.vue
Normal file
41
Yi.Pure.Vue3/src/views/components/contextmenu/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import basic from "./basic.vue";
|
||||
import menuGroup from "./menuGroup.vue";
|
||||
import menuDynamic from "./menuDynamic.vue";
|
||||
import "v-contextmenu/dist/themes/default.css";
|
||||
|
||||
defineOptions({
|
||||
name: "ContextMenu"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">右键菜单</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/contextmenu"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/contextmenu
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 基础用法 -->
|
||||
<basic />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 按钮组 -->
|
||||
<menuGroup />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 动态菜单 -->
|
||||
<menuDynamic />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
110
Yi.Pure.Vue3/src/views/components/contextmenu/menuDynamic.vue
Normal file
110
Yi.Pure.Vue3/src/views/components/contextmenu/menuDynamic.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">动态菜单</p>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-group title="操作">
|
||||
<v-contextmenu-item :hide-on-click="false" @click="extra.push('item')">
|
||||
添加菜单
|
||||
</v-contextmenu-item>
|
||||
<v-contextmenu-item :hide-on-click="false" @click="extra.push('group')">
|
||||
添加菜单组
|
||||
</v-contextmenu-item>
|
||||
<v-contextmenu-item
|
||||
:hide-on-click="false"
|
||||
@click="extra.push('submenu')"
|
||||
>
|
||||
添加子菜单
|
||||
</v-contextmenu-item>
|
||||
<v-contextmenu-item :hide-on-click="false" @click="extra.pop()">
|
||||
删除
|
||||
</v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
|
||||
<template v-for="(item, index) of extra" :key="index">
|
||||
<v-contextmenu-divider />
|
||||
|
||||
<v-contextmenu-group
|
||||
v-if="item === 'group'"
|
||||
:title="`菜单组 ${index + 1}`"
|
||||
>
|
||||
<v-contextmenu-item>菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单3</v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
|
||||
<v-contextmenu-submenu
|
||||
v-else-if="item === 'submenu'"
|
||||
:title="`子菜单 ${index + 1}`"
|
||||
>
|
||||
<v-contextmenu-item>菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单3</v-contextmenu-item>
|
||||
</v-contextmenu-submenu>
|
||||
|
||||
<v-contextmenu-item v-else>菜单 {{ index + 1 }}</v-contextmenu-item>
|
||||
</template>
|
||||
</v-contextmenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
ContextmenuSubmenu,
|
||||
ContextmenuGroup
|
||||
} from "v-contextmenu";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ExampleDynamic",
|
||||
|
||||
components: {
|
||||
[Contextmenu.name]: Contextmenu,
|
||||
[ContextmenuItem.name]: ContextmenuItem,
|
||||
[ContextmenuDivider.name]: ContextmenuDivider,
|
||||
[ContextmenuSubmenu.name]: ContextmenuSubmenu,
|
||||
[ContextmenuGroup.name]: ContextmenuGroup
|
||||
},
|
||||
|
||||
directives: {
|
||||
contextmenu: directive
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
extra: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
addItem(type = "item") {
|
||||
this.extra.push(type);
|
||||
},
|
||||
removeItem() {
|
||||
this.extra.pop();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
margin-bottom: 30px;
|
||||
background-color: rgb(90 167 164 / 20%);
|
||||
border: 3px dashed rgb(90 167 164 / 90%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
71
Yi.Pure.Vue3/src/views/components/contextmenu/menuGroup.vue
Normal file
71
Yi.Pure.Vue3/src/views/components/contextmenu/menuGroup.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">按钮组</p>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
<v-contextmenu ref="contextmenu">
|
||||
<v-contextmenu-item>菜单</v-contextmenu-item>
|
||||
|
||||
<v-contextmenu-group>
|
||||
<v-contextmenu-item>Github</v-contextmenu-item>
|
||||
<v-contextmenu-item>Codepen</v-contextmenu-item>
|
||||
<v-contextmenu-item disabled>Alipay</v-contextmenu-item>
|
||||
<v-contextmenu-item>Wechat</v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
|
||||
<v-contextmenu-divider />
|
||||
|
||||
<v-contextmenu-group title="按钮组">
|
||||
<v-contextmenu-item>菜单1</v-contextmenu-item>
|
||||
<v-contextmenu-item>菜单2</v-contextmenu-item>
|
||||
<v-contextmenu-item disabled>菜单3</v-contextmenu-item>
|
||||
</v-contextmenu-group>
|
||||
</v-contextmenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import {
|
||||
directive,
|
||||
Contextmenu,
|
||||
ContextmenuItem,
|
||||
ContextmenuDivider,
|
||||
ContextmenuSubmenu,
|
||||
ContextmenuGroup
|
||||
} from "v-contextmenu";
|
||||
|
||||
const ExampleSFC = defineComponent({
|
||||
name: "ExampleSFC",
|
||||
|
||||
components: {
|
||||
[Contextmenu.name]: Contextmenu,
|
||||
[ContextmenuItem.name]: ContextmenuItem,
|
||||
[ContextmenuDivider.name]: ContextmenuDivider,
|
||||
[ContextmenuSubmenu.name]: ContextmenuSubmenu,
|
||||
[ContextmenuGroup.name]: ContextmenuGroup
|
||||
},
|
||||
|
||||
directives: {
|
||||
contextmenu: directive
|
||||
}
|
||||
});
|
||||
|
||||
export default ExampleSFC;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: rgb(90 167 164 / 20%);
|
||||
border: 3px dashed rgb(90 167 164 / 90%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
42
Yi.Pure.Vue3/src/views/components/count-to.vue
Normal file
42
Yi.Pure.Vue3/src/views/components/count-to.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
|
||||
|
||||
defineOptions({
|
||||
name: "CountTo"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">数字动画</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/count-to.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/count-to.vue
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<ReNormalCountTo
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'2em'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
<br />
|
||||
<ul class="flex">
|
||||
<ReboundCountTo
|
||||
v-for="(num, inx) of [1, 6, 6, 6]"
|
||||
:key="inx"
|
||||
:i="num"
|
||||
:blur="inx"
|
||||
:delay="inx + 1"
|
||||
/>
|
||||
</ul>
|
||||
</el-card>
|
||||
</template>
|
||||
BIN
Yi.Pure.Vue3/src/views/components/cropping/avatar.png
Normal file
BIN
Yi.Pure.Vue3/src/views/components/cropping/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
89
Yi.Pure.Vue3/src/views/components/cropping/index.vue
Normal file
89
Yi.Pure.Vue3/src/views/components/cropping/index.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup lang="tsx">
|
||||
import avatar from "./avatar.png";
|
||||
import { ref, onBeforeUnmount } from "vue";
|
||||
import ReCropper from "@/components/ReCropper";
|
||||
import { formatBytes } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "Cropping"
|
||||
});
|
||||
|
||||
const infos = ref();
|
||||
const popoverRef = ref();
|
||||
const refCropper = ref();
|
||||
const showPopover = ref(false);
|
||||
const cropperImg = ref<string>("");
|
||||
|
||||
function onCropper({ base64, blob, info }) {
|
||||
console.log(blob);
|
||||
infos.value = info;
|
||||
cropperImg.value = base64;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
popoverRef.value.hide();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
图片裁剪，基于开源的
|
||||
<el-link
|
||||
href="https://fengyuanchen.github.io/cropperjs/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
cropperjs
|
||||
</el-link>
|
||||
进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cropping"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/cropping
|
||||
</el-link>
|
||||
</template>
|
||||
<div v-loading="!showPopover" element-loading-background="transparent">
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:visible="showPopover"
|
||||
placement="right"
|
||||
width="300px"
|
||||
>
|
||||
<template #reference>
|
||||
<ReCropper
|
||||
ref="refCropper"
|
||||
class="w-[30vw]"
|
||||
:src="avatar"
|
||||
circled
|
||||
@cropper="onCropper"
|
||||
@readied="showPopover = true"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex flex-wrap justify-center items-center text-center">
|
||||
<el-image
|
||||
v-if="cropperImg"
|
||||
:src="cropperImg"
|
||||
:preview-src-list="Array.of(cropperImg)"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-if="infos" class="mt-1">
|
||||
<p>
|
||||
图像大小：{{ parseInt(infos.width) }} ×
|
||||
{{ parseInt(infos.height) }}像素
|
||||
</p>
|
||||
<p>
|
||||
文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
339
Yi.Pure.Vue3/src/views/components/date-picker.vue
Normal file
339
Yi.Pure.Vue3/src/views/components/date-picker.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "DatePicker"
|
||||
});
|
||||
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
|
||||
const value = ref("");
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "今天",
|
||||
value: new Date()
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
value: () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
return date;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "一周前",
|
||||
value: () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return date;
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const disabledDate = (time: Date) => {
|
||||
return time.getTime() > Date.now();
|
||||
};
|
||||
|
||||
const value1 = ref("");
|
||||
const value2 = ref("");
|
||||
const value3 = ref("");
|
||||
const value4 = ref("");
|
||||
|
||||
const value5 = ref("");
|
||||
const shortcuts1 = [
|
||||
{
|
||||
text: "上周",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "三个月前",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const value6 = ref("");
|
||||
const shortcuts2 = [
|
||||
{
|
||||
text: "本月",
|
||||
value: [new Date(), new Date()]
|
||||
},
|
||||
{
|
||||
text: "今年",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date(new Date().getFullYear(), 0);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "六个月前",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setMonth(start.getMonth() - 6);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const value7 = ref("");
|
||||
const dateFormat = ref("");
|
||||
|
||||
const value8 = ref("");
|
||||
|
||||
const value9 = ref("2023-10-30");
|
||||
const holidays = [
|
||||
"2023-10-22",
|
||||
"2023-10-23",
|
||||
"2023-10-24",
|
||||
"2023-10-25",
|
||||
"2023-10-26",
|
||||
"2023-10-27",
|
||||
"2023-10-28",
|
||||
"2023-10-29",
|
||||
"2023-10-30",
|
||||
"2023-10-31"
|
||||
];
|
||||
|
||||
const isHoliday = ({ dayjs }) => {
|
||||
return holidays.includes(dayjs.format("YYYY-MM-DD"));
|
||||
};
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/date-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
日期选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/date-picker.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/date-picker.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">选择某一天</p>
|
||||
<el-date-picker
|
||||
v-model="value"
|
||||
type="date"
|
||||
class="!w-[160px]"
|
||||
placeholder="请选择"
|
||||
:disabled-date="disabledDate"
|
||||
:shortcuts="shortcuts"
|
||||
:popper-options="{
|
||||
placement: 'bottom-start'
|
||||
}"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">选择周、月、年或多个日期</p>
|
||||
<el-space wrap>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="week"
|
||||
class="!w-[160px]"
|
||||
format="YYYY年第ww周"
|
||||
placeholder="选择某年中的某周"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="month"
|
||||
class="!w-[160px]"
|
||||
placeholder="选择某月"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="year"
|
||||
class="!w-[160px]"
|
||||
placeholder="选择某年"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
type="dates"
|
||||
class="!w-[160px]"
|
||||
placeholder="选择多个日期"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
</el-space>
|
||||
|
||||
<p class="mb-2 mt-4">选择一段时间</p>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
type="daterange"
|
||||
class="!w-[240px]"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:shortcuts="shortcuts1"
|
||||
:popper-options="{
|
||||
placement: 'bottom-start' // 下拉面板出现的位置，或 'top-start'、'bottom-end'、'top-end' 等，具体看 https://popper.js.org/docs/v2/constructors/#options
|
||||
}"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">选择月份范围</p>
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="monthrange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:shortcuts="shortcuts2"
|
||||
:popper-options="{
|
||||
placement: 'bottom-start'
|
||||
}"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">日期格式</p>
|
||||
<el-radio-group
|
||||
v-model="dateFormat"
|
||||
class="mb-2"
|
||||
:disabled="size === 'disabled'"
|
||||
@change="value7 = ''"
|
||||
>
|
||||
<el-radio value="">Date</el-radio>
|
||||
<el-radio value="YYYY-MM-DD">年月日</el-radio>
|
||||
<el-radio value="x">时间戳</el-radio>
|
||||
</el-radio-group>
|
||||
<br />
|
||||
<el-space wrap>
|
||||
<el-date-picker
|
||||
v-model="value7"
|
||||
type="date"
|
||||
class="!w-[160px]"
|
||||
placeholder="请选择日期"
|
||||
format="YYYY/MM/DD"
|
||||
:value-format="dateFormat"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<span class="ml-2">{{ value7 }}</span>
|
||||
</el-space>
|
||||
|
||||
<p class="mb-2 mt-4">自定义前缀</p>
|
||||
<el-date-picker
|
||||
v-model="value8"
|
||||
type="date"
|
||||
class="!w-[160px]"
|
||||
placeholder="请选择日期"
|
||||
:prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">自定义内容</p>
|
||||
<el-date-picker
|
||||
v-model="value9"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<template #default="cell">
|
||||
<div class="cell" :class="{ current: cell.isCurrent }">
|
||||
<span class="text">{{ cell.text }}</span>
|
||||
<span v-if="isHoliday(cell)" class="holiday" />
|
||||
</div>
|
||||
</template>
|
||||
</el-date-picker>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cell {
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.cell .text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.cell.current .text {
|
||||
color: #fff;
|
||||
background: #626aef;
|
||||
}
|
||||
|
||||
.cell .holiday {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--el-color-danger);
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
288
Yi.Pure.Vue3/src/views/components/datetime-picker.vue
Normal file
288
Yi.Pure.Vue3/src/views/components/datetime-picker.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "DateTimePicker"
|
||||
});
|
||||
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
|
||||
const value = ref("");
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "今天",
|
||||
value: new Date()
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
value: () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
return date;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "一周前",
|
||||
value: () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return date;
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const value1 = ref("");
|
||||
const datetimeFormat = ref("");
|
||||
|
||||
const value2 = ref("");
|
||||
const shortcuts1 = [
|
||||
{
|
||||
text: "上周",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "三个月前",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const value3 = ref("");
|
||||
const datePickerRef = ref();
|
||||
const placement = ref("auto");
|
||||
const checkTag = ref([
|
||||
{
|
||||
title: "auto", // https://popper.js.org/docs/v2/constructors/#options
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "auto-start",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "auto-end",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "top",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "top-start",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "top-end",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "bottom",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "bottom-start",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "bottom-end",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "right",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "right-start",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "right-end",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "left",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "left-start",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "left-end",
|
||||
checked: false
|
||||
}
|
||||
]);
|
||||
const curTagMap = ref({});
|
||||
function onChecked(tag, index) {
|
||||
if (size.value === "disabled") return;
|
||||
placement.value = tag.title;
|
||||
curTagMap.value[index] = Object.assign({
|
||||
...tag,
|
||||
checked: !tag.checked
|
||||
});
|
||||
checkTag.value.map(item => (item.checked = false));
|
||||
checkTag.value[index].checked = curTagMap.value[index].checked;
|
||||
// 外部触发日期时间选择面板的打开与关闭
|
||||
curTagMap.value[index].checked
|
||||
? datePickerRef.value.handleOpen()
|
||||
: datePickerRef.value.handleClose();
|
||||
}
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never" :style="{ height: '100vh' }">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/datetime-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
日期时间选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/datetime-picker.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/datetime-picker.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">日期和时间点</p>
|
||||
<el-date-picker
|
||||
v-model="value"
|
||||
type="datetime"
|
||||
class="!w-[200px]"
|
||||
placeholder="请选择日期时间"
|
||||
:shortcuts="shortcuts"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">日期时间格式</p>
|
||||
<el-radio-group
|
||||
v-model="datetimeFormat"
|
||||
class="mb-2"
|
||||
:disabled="size === 'disabled'"
|
||||
@change="value1 = ''"
|
||||
>
|
||||
<el-radio value="">Date</el-radio>
|
||||
<el-radio value="YYYY-MM-DD HH:mm:ss">年月日 时分秒</el-radio>
|
||||
<el-radio value="x">时间戳</el-radio>
|
||||
</el-radio-group>
|
||||
<br />
|
||||
<el-space wrap>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
class="!w-[200px]"
|
||||
placeholder="请选择日期时间"
|
||||
format="YYYY/MM/DD hh:mm:ss"
|
||||
:value-format="datetimeFormat"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<span class="ml-2">{{ value1 }}</span>
|
||||
</el-space>
|
||||
|
||||
<p class="mb-2 mt-4">日期和时间范围</p>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期时间"
|
||||
end-placeholder="结束日期时间"
|
||||
:popper-options="{
|
||||
placement: 'bottom-start'
|
||||
}"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">
|
||||
弹出面板位置可控（如果弹出位置不足以完整展示面板会自动调整位置）
|
||||
</p>
|
||||
<el-space wrap class="w-[400px]">
|
||||
<el-check-tag
|
||||
v-for="(tag, index) in checkTag"
|
||||
:key="index"
|
||||
:class="[
|
||||
'select-none',
|
||||
size === 'disabled' && 'tag-disabled',
|
||||
tag.checked && 'is-active'
|
||||
]"
|
||||
:checked="tag.checked"
|
||||
@change="onChecked(tag, index)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
</el-check-tag>
|
||||
</el-space>
|
||||
<el-date-picker
|
||||
ref="datePickerRef"
|
||||
v-model="value3"
|
||||
type="datetime"
|
||||
class="ml-[15%]"
|
||||
placeholder="请选择日期时间"
|
||||
:popper-options="{
|
||||
placement
|
||||
}"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-disabled {
|
||||
color: var(--el-disabled-text-color);
|
||||
cursor: not-allowed;
|
||||
background-color: var(--el-color-info-light-9);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-info-light-9);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
Yi.Pure.Vue3/src/views/components/dialog/form.vue
Normal file
47
Yi.Pure.Vue3/src/views/components/dialog/form.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
// 声明 props 类型
|
||||
export interface FormProps {
|
||||
formInline: {
|
||||
user: string;
|
||||
region: string;
|
||||
};
|
||||
}
|
||||
|
||||
// 声明 props 默认值
|
||||
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({ user: "", region: "" })
|
||||
});
|
||||
|
||||
// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
|
||||
// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
|
||||
// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
|
||||
// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
|
||||
// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
|
||||
const newFormInline = ref(props.formInline);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form :model="newFormInline">
|
||||
<el-form-item label="姓名">
|
||||
<el-input
|
||||
v-model="newFormInline.user"
|
||||
class="!w-[220px]"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="城市">
|
||||
<el-select
|
||||
v-model="newFormInline.region"
|
||||
class="!w-[220px]"
|
||||
placeholder="请选择城市"
|
||||
>
|
||||
<el-option label="上海" value="上海" />
|
||||
<el-option label="浙江" value="浙江" />
|
||||
<el-option label="深圳" value="深圳" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
22
Yi.Pure.Vue3/src/views/components/dialog/formPrimitive.vue
Normal file
22
Yi.Pure.Vue3/src/views/components/dialog/formPrimitive.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from "@vueuse/core";
|
||||
|
||||
// 声明 props 类型
|
||||
export interface FormProps {
|
||||
data: string;
|
||||
}
|
||||
|
||||
// 声明 props 默认值
|
||||
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
data: () => ""
|
||||
});
|
||||
|
||||
// 使用 vueuse 的双向绑定工具
|
||||
const emit = defineEmits(["update:data"]);
|
||||
const data = useVModel(props, "data", emit);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" />
|
||||
</template>
|
||||
555
Yi.Pure.Vue3/src/views/components/dialog/index.vue
Normal file
555
Yi.Pure.Vue3/src/views/components/dialog/index.vue
Normal file
@@ -0,0 +1,555 @@
|
||||
<script setup lang="tsx">
|
||||
import { useRouter } from "vue-router";
|
||||
import { h, createVNode, ref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import formPrimitive from "./formPrimitive.vue";
|
||||
import forms, { type FormProps } from "./form.vue";
|
||||
import { cloneDeep, debounce } from "@pureadmin/utils";
|
||||
import {
|
||||
addDialog,
|
||||
closeDialog,
|
||||
updateDialog,
|
||||
closeAllDialog
|
||||
} from "@/components/ReDialog";
|
||||
|
||||
defineOptions({
|
||||
name: "DialogPage"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function onBaseClick() {
|
||||
addDialog({
|
||||
title: "基础用法",
|
||||
contentRenderer: () => <p>弹框内容-基础用法</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
|
||||
});
|
||||
}
|
||||
|
||||
function onDraggableClick() {
|
||||
addDialog({
|
||||
title: "可拖拽",
|
||||
draggable: true,
|
||||
contentRenderer: () => h("p", "弹框内容-可拖拽") // h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
|
||||
});
|
||||
}
|
||||
|
||||
function onFullscreenClick() {
|
||||
addDialog({
|
||||
title: "全屏",
|
||||
fullscreen: true,
|
||||
contentRenderer: () => createVNode("p", null, "弹框内容-全屏") // createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
|
||||
});
|
||||
}
|
||||
|
||||
function onFullscreenIconClick() {
|
||||
addDialog({
|
||||
title: "全屏按钮和全屏事件",
|
||||
fullscreenIcon: true,
|
||||
fullscreenCallBack: ({ options, index }) =>
|
||||
message(options.fullscreen ? "全屏" : "非全屏"),
|
||||
contentRenderer: () => <p>弹框内容-全屏按钮和全屏事件</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onModalClick() {
|
||||
addDialog({
|
||||
title: "无背景遮罩层",
|
||||
modal: false,
|
||||
contentRenderer: () => <p>弹框内容-无背景遮罩层</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onStyleClick() {
|
||||
addDialog({
|
||||
title: "自定义弹出位置",
|
||||
top: "60vh",
|
||||
style: { marginRight: "20px" },
|
||||
contentRenderer: () => <p>弹框内容-自定义弹出位置</p>
|
||||
});
|
||||
}
|
||||
|
||||
// 添加 600ms 防抖
|
||||
const onoOpenDelayClick = debounce(
|
||||
() =>
|
||||
addDialog({
|
||||
title: "延时2秒打开弹框",
|
||||
openDelay: 2000 - 600,
|
||||
contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
|
||||
}),
|
||||
600
|
||||
);
|
||||
|
||||
function onCloseDelayClick() {
|
||||
addDialog({
|
||||
title: "延时2秒关闭弹框",
|
||||
closeDelay: 2000,
|
||||
contentRenderer: () => <p>弹框内容-延时2秒关闭弹框</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onShowCloseClick() {
|
||||
addDialog({
|
||||
title: "不显示右上角关闭按钮图标",
|
||||
showClose: false,
|
||||
contentRenderer: () => <p>弹框内容-不显示右上角关闭按钮图标</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onBeforeCloseClick() {
|
||||
addDialog({
|
||||
title: "禁止通过键盘ESC关闭",
|
||||
closeOnPressEscape: false,
|
||||
contentRenderer: () => <p>弹框内容-禁止通过键盘ESC关闭</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onCloseOnClickModalClick() {
|
||||
addDialog({
|
||||
title: "禁止通过点击modal关闭",
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => <p>弹框内容-禁止通过点击modal关闭</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onHideFooterClick() {
|
||||
addDialog({
|
||||
title: "隐藏底部取消、确定按钮",
|
||||
hideFooter: true,
|
||||
contentRenderer: () => <p>弹框内容-隐藏底部取消、确定按钮</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onHeaderRendererClick() {
|
||||
addDialog({
|
||||
title: "自定义头部",
|
||||
showClose: false,
|
||||
headerRenderer: ({ close, titleId, titleClass }) => (
|
||||
// jsx 语法
|
||||
<div class="flex flex-row justify-between">
|
||||
<h4 id={titleId} class={titleClass}>
|
||||
自定义头部
|
||||
</h4>
|
||||
<el-button type="danger" onClick={close}>
|
||||
关闭
|
||||
</el-button>
|
||||
</div>
|
||||
),
|
||||
contentRenderer: () => <p>弹框内容-自定义头部</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onFooterRendererClick() {
|
||||
addDialog({
|
||||
title: "自定义底部",
|
||||
footerRenderer: ({ options, index }) => (
|
||||
<el-button onClick={() => closeDialog(options, index)}>
|
||||
{options.title}-{index}
|
||||
</el-button>
|
||||
),
|
||||
contentRenderer: () => <p>弹框内容-自定义底部</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onFooterButtonsClick() {
|
||||
addDialog({
|
||||
title: "自定义底部按钮",
|
||||
footerButtons: [
|
||||
{
|
||||
label: "按钮1",
|
||||
size: "small",
|
||||
type: "success",
|
||||
btnClick: ({ dialog: { options, index }, button }) => {
|
||||
console.log(options, index, button);
|
||||
closeDialog(options, index);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "按钮2",
|
||||
text: true,
|
||||
bg: true,
|
||||
btnClick: ({ dialog: { options, index }, button }) => {
|
||||
console.log(options, index, button);
|
||||
closeDialog(options, index);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "按钮3",
|
||||
size: "large",
|
||||
type: "warning",
|
||||
btnClick: ({ dialog: { options, index }, button }) => {
|
||||
console.log(options, index, button);
|
||||
closeDialog(options, index);
|
||||
}
|
||||
}
|
||||
],
|
||||
contentRenderer: () => <p>弹框内容-自定义底部按钮</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onOpenClick() {
|
||||
addDialog({
|
||||
title: "打开后的回调",
|
||||
open: ({ options, index }) => message({ options, index } as any),
|
||||
contentRenderer: () => <p>弹框内容-打开后的回调</p>
|
||||
});
|
||||
}
|
||||
|
||||
function onCloseCallBackClick() {
|
||||
addDialog({
|
||||
title: "关闭后的回调",
|
||||
closeCallBack: ({ options, index, args }) => {
|
||||
console.log(options, index, args);
|
||||
let text = "";
|
||||
if (args?.command === "cancel") {
|
||||
text = "您点击了取消按钮";
|
||||
} else if (args?.command === "sure") {
|
||||
text = "您点击了确定按钮";
|
||||
} else {
|
||||
text = "您点击了右上角关闭按钮或空白页或按下了esc键";
|
||||
}
|
||||
message(text);
|
||||
},
|
||||
contentRenderer: () => <p>弹框内容-关闭后的回调</p>
|
||||
});
|
||||
}
|
||||
|
||||
// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取
|
||||
function onNestingClick() {
|
||||
addDialog({
|
||||
title: "嵌套的弹框",
|
||||
contentRenderer: ({ index }) => (
|
||||
<el-button
|
||||
onClick={() =>
|
||||
addDialog({
|
||||
title: `第${index + 1}个子弹框`,
|
||||
width: "40%",
|
||||
contentRenderer: ({ index }) => (
|
||||
<el-button
|
||||
onClick={() =>
|
||||
addDialog({
|
||||
title: `第${index + 1}个子弹框`,
|
||||
width: "30%",
|
||||
contentRenderer: () => (
|
||||
<>
|
||||
<el-button round onClick={() => closeAllDialog()}>
|
||||
哎呦，你干嘛，赶快关闭所有弹框
|
||||
</el-button>
|
||||
</>
|
||||
)
|
||||
})
|
||||
}
|
||||
>
|
||||
点击打开第{index + 1}个子弹框
|
||||
</el-button>
|
||||
)
|
||||
})
|
||||
}
|
||||
>
|
||||
点击打开第{index + 1}个子弹框
|
||||
</el-button>
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
// 满足在 contentRenderer 内容区更改弹框自身属性值的场景
|
||||
function onUpdateClick() {
|
||||
const curPage = ref(1);
|
||||
addDialog({
|
||||
title: `第${curPage.value}页`,
|
||||
contentRenderer: () => (
|
||||
<>
|
||||
<el-button
|
||||
disabled={curPage.value > 1 ? false : true}
|
||||
onClick={() => {
|
||||
curPage.value -= 1;
|
||||
updateDialog(`第${curPage.value}页`);
|
||||
}}
|
||||
>
|
||||
上一页
|
||||
</el-button>
|
||||
<el-button
|
||||
onClick={() => {
|
||||
curPage.value += 1;
|
||||
updateDialog(`第${curPage.value}页`);
|
||||
}}
|
||||
>
|
||||
下一页
|
||||
</el-button>
|
||||
</>
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
// popconfirm 确认框
|
||||
function onPopconfirmClick() {
|
||||
addDialog({
|
||||
width: "30%",
|
||||
title: "popconfirm确认框示例",
|
||||
popconfirm: { title: "是否确认修改当前数据" },
|
||||
contentRenderer: () => <p>点击右下方确定按钮看看效果吧</p>
|
||||
});
|
||||
}
|
||||
|
||||
// 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
|
||||
function onFormOneClick() {
|
||||
addDialog({
|
||||
width: "30%",
|
||||
title: "结合Form表单（第一种方式）",
|
||||
contentRenderer: () => forms,
|
||||
props: {
|
||||
// 赋默认值
|
||||
formInline: {
|
||||
user: "菜虚鲲",
|
||||
region: "浙江"
|
||||
}
|
||||
},
|
||||
closeCallBack: ({ options, args }) => {
|
||||
// options.props 是响应式的
|
||||
const { formInline } = options.props as FormProps;
|
||||
const text = `姓名：${formInline.user} 城市：${formInline.region}`;
|
||||
if (args?.command === "cancel") {
|
||||
// 您点击了取消按钮
|
||||
message(`您点击了取消按钮，当前表单数据为 ${text}`);
|
||||
} else if (args?.command === "sure") {
|
||||
message(`您点击了确定按钮，当前表单数据为 ${text}`);
|
||||
} else {
|
||||
message(
|
||||
`您点击了右上角关闭按钮或空白页或按下了esc键，当前表单数据为 ${text}`
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 结合Form表单（第二种方式）h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
|
||||
const formInline = ref({
|
||||
user: "菜虚鲲",
|
||||
region: "浙江"
|
||||
});
|
||||
const resetFormInline = cloneDeep(formInline.value);
|
||||
function onFormTwoClick() {
|
||||
addDialog({
|
||||
width: "30%",
|
||||
title: "结合Form表单（第二种方式）",
|
||||
contentRenderer: () =>
|
||||
h(forms, {
|
||||
formInline: formInline.value
|
||||
}),
|
||||
closeCallBack: () => {
|
||||
message(
|
||||
`当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
|
||||
);
|
||||
// 重置表单数据
|
||||
formInline.value = cloneDeep(resetFormInline);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 结合Form表单（第三种方式）createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
|
||||
const formThreeInline = ref({
|
||||
user: "菜虚鲲",
|
||||
region: "浙江"
|
||||
});
|
||||
const resetFormThreeInline = cloneDeep(formThreeInline.value);
|
||||
function onFormThreeClick() {
|
||||
addDialog({
|
||||
width: "30%",
|
||||
title: "结合Form表单（第三种方式）",
|
||||
contentRenderer: () =>
|
||||
createVNode(forms, {
|
||||
formInline: formThreeInline.value
|
||||
}),
|
||||
closeCallBack: () => {
|
||||
message(
|
||||
`当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
|
||||
);
|
||||
// 重置表单数据
|
||||
formThreeInline.value = cloneDeep(resetFormThreeInline);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 结合Form表单（第四种方式）使用jsx语法
|
||||
// 需要注意的是如果 forms 没注册，这里 forms 注册了是因为上面 contentRenderer: () => forms、h(forms) 、createVNode(createVNode) 间接给注册了
|
||||
// 如果只使用了jsx语法，如下 `contentRenderer: () => <forms formInline={formFourInline.value} />` 是不会给 forms 组件进行注册的，需要在 `script` 中任意位置（最好是末尾）写上 forms 即可
|
||||
// 同理如果在 tsx 文件中，这么使用 `contentRenderer: () => <forms formInline={formFourInline.value} />`，也是不会给 forms 组件进行注册，需要在 return 中写上 forms
|
||||
const formFourInline = ref({
|
||||
user: "菜虚鲲",
|
||||
region: "浙江"
|
||||
});
|
||||
const resetFormFourInline = cloneDeep(formFourInline.value);
|
||||
function onFormFourClick() {
|
||||
addDialog({
|
||||
width: "30%",
|
||||
title: "结合Form表单（第四种方式）",
|
||||
contentRenderer: () => <forms formInline={formFourInline.value} />,
|
||||
closeCallBack: () => {
|
||||
message(
|
||||
`当前表单数据为 姓名：${formFourInline.value.user} 城市：${formFourInline.value.region}`
|
||||
);
|
||||
// 重置表单数据
|
||||
formFourInline.value = cloneDeep(resetFormFourInline);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 子组件 prop 为 primitive 类型的 demo
|
||||
const formPrimitiveParam = ref("Hello World");
|
||||
const resetFormPrimitiveParam = ref(formPrimitiveParam.value);
|
||||
function onFormPrimitiveFormClick() {
|
||||
addDialog({
|
||||
width: "30%",
|
||||
title: "子组件 prop 为 primitive 类型 demo",
|
||||
contentRenderer: () =>
|
||||
h(formPrimitive, {
|
||||
data: formPrimitiveParam.value,
|
||||
"onUpdate:data": val => (formPrimitiveParam.value = val)
|
||||
}),
|
||||
closeCallBack: () => {
|
||||
message(`当前表单内容：${formPrimitiveParam.value}`);
|
||||
// 重置表单数据
|
||||
formPrimitiveParam.value = resetFormPrimitiveParam.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onBeforeCancelClick() {
|
||||
addDialog({
|
||||
title: "点击底部取消按钮的回调",
|
||||
contentRenderer: () => (
|
||||
<p>弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）</p>
|
||||
),
|
||||
beforeCancel: (done, { options, index }) => {
|
||||
console.log(
|
||||
"%coptions, index===>>>: ",
|
||||
"color: MidnightBlue; background: Aquamarine; font-size: 20px;",
|
||||
options,
|
||||
index
|
||||
);
|
||||
// done(); // 需要关闭把注释解开即可
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onBeforeSureClick() {
|
||||
addDialog({
|
||||
title: "点击底部确定按钮的回调",
|
||||
contentRenderer: () => (
|
||||
<p>
|
||||
弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
|
||||
</p>
|
||||
),
|
||||
beforeSure: (done, { options, index }) => {
|
||||
console.log(
|
||||
"%coptions, index===>>>: ",
|
||||
"color: MidnightBlue; background: Aquamarine; font-size: 20px;",
|
||||
options,
|
||||
index
|
||||
);
|
||||
// done(); // 需要关闭把注释解开即可
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onSureBtnLoading() {
|
||||
addDialog({
|
||||
sureBtnLoading: true,
|
||||
title: "点击底部确定按钮可开启按钮动画",
|
||||
contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>,
|
||||
beforeSure: (done, { closeLoading }) => {
|
||||
// closeLoading() // 关闭确定按钮动画，不关闭弹框
|
||||
// done() // 关闭确定按钮动画并关闭弹框
|
||||
setTimeout(() => done(), 800);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
二次封装 Element Plus 的
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/dialog.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
Dialog
|
||||
</el-link>
|
||||
，采用函数式调用弹框组件（更多操作实例请参考
|
||||
<span
|
||||
class="cursor-pointer text-primary"
|
||||
@click="router.push({ name: 'SystemDept' })"
|
||||
>
|
||||
系统管理页面
|
||||
</span>
|
||||
）
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/dialog"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/dialog
|
||||
</el-link>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button @click="onBaseClick"> 基础用法 </el-button>
|
||||
<el-button @click="onDraggableClick"> 可拖拽 </el-button>
|
||||
<el-button @click="onFullscreenClick"> 全屏 </el-button>
|
||||
<el-button @click="onFullscreenIconClick"> 全屏按钮和全屏事件 </el-button>
|
||||
<el-button @click="onModalClick"> 无背景遮罩层 </el-button>
|
||||
<el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
|
||||
<el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>
|
||||
<el-button @click="onCloseDelayClick"> 延时2秒关闭弹框 </el-button>
|
||||
<el-button @click="onShowCloseClick">
|
||||
不显示右上角关闭按钮图标
|
||||
</el-button>
|
||||
<el-button @click="onBeforeCloseClick"> 禁止通过键盘ESC关闭 </el-button>
|
||||
<el-button @click="onCloseOnClickModalClick">
|
||||
禁止通过点击modal关闭
|
||||
</el-button>
|
||||
<el-button @click="onHideFooterClick"> 隐藏底部取消、确定按钮 </el-button>
|
||||
<el-button @click="onHeaderRendererClick"> 自定义头部 </el-button>
|
||||
<el-button @click="onFooterRendererClick"> 自定义底部 </el-button>
|
||||
<el-button @click="onFooterButtonsClick"> 自定义底部按钮 </el-button>
|
||||
<el-button @click="onOpenClick"> 打开后的回调 </el-button>
|
||||
<el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
|
||||
<el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
|
||||
<el-button @click="onUpdateClick"> 更改弹框自身属性值 </el-button>
|
||||
<el-button @click="onPopconfirmClick">popconfirm确认框</el-button>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
<el-space wrap>
|
||||
<el-button @click="onFormOneClick">
|
||||
结合Form表单（第一种方式）
|
||||
</el-button>
|
||||
<el-button @click="onFormTwoClick">
|
||||
结合Form表单（第二种方式）
|
||||
</el-button>
|
||||
<el-button @click="onFormThreeClick">
|
||||
结合Form表单（第三种方式）
|
||||
</el-button>
|
||||
<el-button @click="onFormFourClick">
|
||||
结合Form表单（第四种方式）
|
||||
</el-button>
|
||||
<el-button @click="onFormPrimitiveFormClick">
|
||||
子组件 prop 为 primitive 类型
|
||||
</el-button>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
<el-space wrap>
|
||||
<el-button @click="onBeforeCancelClick">
|
||||
点击底部取消按钮的回调（会暂停弹框的关闭）
|
||||
</el-button>
|
||||
<el-button @click="onBeforeSureClick">
|
||||
点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
|
||||
</el-button>
|
||||
<el-button @click="onSureBtnLoading">
|
||||
点击底部确定按钮可开启按钮动画
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</template>
|
||||
242
Yi.Pure.Vue3/src/views/components/el-button.vue
Normal file
242
Yi.Pure.Vue3/src/views/components/el-button.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "PureButton"
|
||||
});
|
||||
|
||||
const { isDark } = useDark();
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
|
||||
const baseRadio = ref("default");
|
||||
const buttonList = [
|
||||
{
|
||||
type: "",
|
||||
text: "Default",
|
||||
icon: "ep:search"
|
||||
},
|
||||
{
|
||||
type: "primary",
|
||||
text: "Primary",
|
||||
icon: "ep:edit"
|
||||
},
|
||||
{
|
||||
type: "success",
|
||||
text: "Success",
|
||||
icon: "ep:check"
|
||||
},
|
||||
{
|
||||
type: "info",
|
||||
text: "Info",
|
||||
icon: "ep:message"
|
||||
},
|
||||
{
|
||||
type: "warning",
|
||||
text: "Warning",
|
||||
icon: "ep:star"
|
||||
},
|
||||
{
|
||||
type: "danger",
|
||||
text: "Danger",
|
||||
icon: "ep:delete"
|
||||
}
|
||||
];
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/button.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Button 按钮
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/el-button.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/el-button.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础按钮</p>
|
||||
<el-radio-group v-model="baseRadio" class="mb-3">
|
||||
<el-radio label="default" value="default" />
|
||||
<el-radio label="plain" value="plain" />
|
||||
<el-radio label="round" value="round" />
|
||||
<el-radio label="circle" value="circle" />
|
||||
<el-radio label="link" value="link" />
|
||||
<el-radio label="text" value="text" />
|
||||
<el-radio label="text-bg" value="text-bg" />
|
||||
</el-radio-group>
|
||||
<br />
|
||||
<el-space wrap>
|
||||
<el-button
|
||||
v-for="(button, index) in buttonList"
|
||||
:key="index"
|
||||
:type="button.type as any"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:plain="baseRadio === 'plain'"
|
||||
:round="baseRadio === 'round'"
|
||||
:circle="baseRadio === 'circle'"
|
||||
:link="baseRadio === 'link'"
|
||||
:text="baseRadio === 'text' || baseRadio === 'text-bg'"
|
||||
:bg="baseRadio === 'text-bg'"
|
||||
:icon="useRenderIcon(button.icon)"
|
||||
>
|
||||
<template v-if="baseRadio !== 'circle'" #default>
|
||||
<p>{{ button.text }}</p>
|
||||
</template>
|
||||
</el-button>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-4">加载状态按钮</p>
|
||||
<el-button
|
||||
text
|
||||
bg
|
||||
type="primary"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:loading="size !== 'disabled'"
|
||||
>
|
||||
{{ size === "disabled" ? "停止加载" : "加载中" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:loading-icon="useRenderIcon('ep:eleme')"
|
||||
:loading="size !== 'disabled'"
|
||||
>
|
||||
{{ size === "disabled" ? "停止加载" : "加载中" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:loading="size !== 'disabled'"
|
||||
>
|
||||
<template #loading>
|
||||
<div class="custom-loading">
|
||||
<svg class="circular" viewBox="-10, -10, 50, 50">
|
||||
<path
|
||||
class="path"
|
||||
d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
"
|
||||
style="fill: rgb(0 0 0 / 0%); stroke-width: 4px"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
{{ size === "disabled" ? "停止加载" : "加载中" }}
|
||||
</el-button>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-4">自定义元素标签。例如：按钮、div、链接</p>
|
||||
<el-button :size="dynamicSize" :disabled="size === 'disabled'">
|
||||
button 标签
|
||||
</el-button>
|
||||
<el-button
|
||||
tag="div"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
div 标签
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
tag="a"
|
||||
:href="
|
||||
size === 'disabled'
|
||||
? 'javascript:void(0);'
|
||||
: 'https://element-plus.org/zh-CN/component/button.html#tag'
|
||||
"
|
||||
:target="size === 'disabled' ? '_self' : '_blank'"
|
||||
rel="noopener noreferrer"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
a 链接
|
||||
</el-button>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-4">自定义颜色</p>
|
||||
<el-space wrap>
|
||||
<el-button
|
||||
color="#626aef"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:dark="isDark"
|
||||
>
|
||||
Default
|
||||
</el-button>
|
||||
<el-button
|
||||
color="#626aef"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:dark="isDark"
|
||||
plain
|
||||
>
|
||||
Plain
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
|
||||
.el-button .custom-loading .circular {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 6px;
|
||||
animation: loading-rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.el-button .custom-loading .circular .path {
|
||||
stroke: var(--el-button-text-color);
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 2;
|
||||
animation: loading-dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
28
Yi.Pure.Vue3/src/views/components/icon-select.vue
Normal file
28
Yi.Pure.Vue3/src/views/components/icon-select.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { IconSelect } from "@/components/ReIcon";
|
||||
|
||||
defineOptions({
|
||||
name: "IconSelect"
|
||||
});
|
||||
|
||||
const icon = ref("ep:add-location");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">图标选择器</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/icon-select.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/icon-select.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<IconSelect v-model="icon" class="w-[200px]" />
|
||||
</el-card>
|
||||
</template>
|
||||
120
Yi.Pure.Vue3/src/views/components/json-editor.vue
Normal file
120
Yi.Pure.Vue3/src/views/components/json-editor.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch } from "vue";
|
||||
import "vue-json-pretty/lib/styles.css";
|
||||
import VueJsonPretty from "vue-json-pretty";
|
||||
|
||||
defineOptions({
|
||||
name: "JsonEditor"
|
||||
});
|
||||
|
||||
const defaultData = {
|
||||
status: 200,
|
||||
text: "",
|
||||
error: null,
|
||||
config: undefined,
|
||||
data: [
|
||||
{
|
||||
news_id: 51184,
|
||||
title: "iPhone X Review: Innovative future with real black technology",
|
||||
source: "Netease phone"
|
||||
},
|
||||
{
|
||||
news_id: 51183,
|
||||
title:
|
||||
"Traffic paradise: How to design streets for people and unmanned vehicles in the future?",
|
||||
source: "Netease smart",
|
||||
link: "http://netease.smart/traffic-paradise/1235"
|
||||
},
|
||||
{
|
||||
news_id: 51182,
|
||||
title:
|
||||
"Teslamask's American Business Relations: The government does not pay billions to build factories",
|
||||
source: "AI Finance",
|
||||
members: ["Daniel", "Mike", "John"]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
val: JSON.stringify(defaultData),
|
||||
data: defaultData,
|
||||
showLine: true,
|
||||
showLineNumber: true,
|
||||
showDoubleQuotes: true,
|
||||
showLength: true,
|
||||
editable: true,
|
||||
showIcon: true,
|
||||
editableTrigger: "click",
|
||||
deep: 3
|
||||
});
|
||||
|
||||
watch(
|
||||
() => state.val,
|
||||
newVal => {
|
||||
try {
|
||||
state.data = JSON.parse(newVal);
|
||||
} catch (err) {
|
||||
// console.log('JSON ERROR');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.data,
|
||||
newVal => {
|
||||
try {
|
||||
state.val = JSON.stringify(newVal);
|
||||
} catch (err) {
|
||||
// console.log('JSON ERROR');
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
JSON编辑器，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/leezng/vue-json-pretty"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vue-json-pretty
|
||||
</el-link>
|
||||
（支持大数据量）。
|
||||
</span>
|
||||
<span class="font-medium">
|
||||
当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
|
||||
<el-link
|
||||
href="https://github.com/surmon-china/vue-codemirror"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
codemirror6
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/json-editor.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/json-editor.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<vue-json-pretty
|
||||
v-model:data="state.data"
|
||||
:deep="state.deep"
|
||||
:show-double-quotes="state.showDoubleQuotes"
|
||||
:show-line="state.showLine"
|
||||
:show-length="state.showLength"
|
||||
:show-icon="state.showIcon"
|
||||
:show-line-number="state.showLineNumber"
|
||||
:editable="state.editable"
|
||||
:editable-trigger="state.editableTrigger as any"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
204
Yi.Pure.Vue3/src/views/components/message.vue
Normal file
204
Yi.Pure.Vue3/src/views/components/message.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import { h } from "vue";
|
||||
import hot from "@/assets/svg/hot.svg?component";
|
||||
import { message, closeAllMessage } from "@/utils/message";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
defineOptions({
|
||||
name: "Message"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 消息提示 </span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/message.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/message.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4>
|
||||
|
||||
<el-space wrap>
|
||||
<el-button
|
||||
type="info"
|
||||
@click="message('Info类型消息', { customClass: 'el' })"
|
||||
>
|
||||
Info
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
@click="
|
||||
message('Success类型消息', { customClass: 'el', type: 'success' })
|
||||
"
|
||||
>
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="
|
||||
message('Warning类型消息', { customClass: 'el', type: 'warning' })
|
||||
"
|
||||
>
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="message('Error类型消息', { customClass: 'el', type: 'error' })"
|
||||
>
|
||||
Error
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="message('可关闭消息', { customClass: 'el', showClose: true })"
|
||||
>
|
||||
可关闭
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message('分组消息合并', {
|
||||
customClass: 'el',
|
||||
type: 'success',
|
||||
grouping: true
|
||||
})
|
||||
"
|
||||
>
|
||||
分组消息合并
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message('自定义消息图标', {
|
||||
customClass: 'el',
|
||||
icon: useRenderIcon(Check)
|
||||
})
|
||||
"
|
||||
>
|
||||
自定义图标
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message('3秒后关闭', {
|
||||
customClass: 'el',
|
||||
duration: 3000,
|
||||
onClose: () =>
|
||||
message('消息已关闭', { customClass: 'el', type: 'success' })
|
||||
})
|
||||
"
|
||||
>
|
||||
自定义延时关闭时间并设置关闭后其他操作
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message(
|
||||
h('p', null, [
|
||||
h('span', null, 'Message can be '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
]),
|
||||
{ customClass: 'el' }
|
||||
)
|
||||
"
|
||||
>
|
||||
自定义内容
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message('<strong>This is <i>HTML</i> string</strong>', {
|
||||
customClass: 'el',
|
||||
dangerouslyUseHTMLString: true
|
||||
})
|
||||
"
|
||||
>
|
||||
HTML 片段作为正文内容
|
||||
</el-button>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<h4 class="mb-4">
|
||||
类似 Ant Design 风格的消息提示，点击弹出提示信息（基于 ElMessage
|
||||
样式改版，不会影响 ElMessage
|
||||
原本样式，使用和打包大小成本极低并适配整体暗色风格）
|
||||
</h4>
|
||||
|
||||
<el-space wrap>
|
||||
<el-button type="info" @click="message('Info类型消息')">Info</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
@click="message('Success类型消息', { type: 'success' })"
|
||||
>
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="message('Warning类型消息', { type: 'warning' })"
|
||||
>
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="message('Error类型消息', { type: 'error' })"
|
||||
>
|
||||
Error
|
||||
</el-button>
|
||||
<el-button @click="message('可关闭消息', { showClose: true })">
|
||||
可关闭
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="message('分组消息合并', { type: 'success', grouping: true })"
|
||||
>
|
||||
分组消息合并
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message('自定义消息图标', {
|
||||
icon: hot
|
||||
})
|
||||
"
|
||||
>
|
||||
自定义图标
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message('3秒后关闭', {
|
||||
duration: 3000,
|
||||
onClose: () => message('消息已关闭', { type: 'success' })
|
||||
})
|
||||
"
|
||||
>
|
||||
自定义延时关闭时间并设置关闭后其他操作
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message(
|
||||
h('p', null, [
|
||||
h('span', null, 'Message can be '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
])
|
||||
)
|
||||
"
|
||||
>
|
||||
自定义内容
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
message('<strong>This is <i>HTML</i> string</strong>', {
|
||||
dangerouslyUseHTMLString: true
|
||||
})
|
||||
"
|
||||
>
|
||||
HTML 片段作为正文内容
|
||||
</el-button>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
147
Yi.Pure.Vue3/src/views/components/progress.vue
Normal file
147
Yi.Pure.Vue3/src/views/components/progress.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "PureProgress"
|
||||
});
|
||||
|
||||
const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/progress.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
进度条
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/progress.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/progress.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-4">直线进度条动画</p>
|
||||
<div class="w-1/4">
|
||||
<el-progress indeterminate :percentage="50" class="mb-4" />
|
||||
<el-progress
|
||||
indeterminate
|
||||
:percentage="100"
|
||||
:format="format"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
indeterminate
|
||||
:percentage="100"
|
||||
status="success"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
indeterminate
|
||||
:percentage="100"
|
||||
status="warning"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
indeterminate
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
class="mb-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">进度条内显示百分比标识</p>
|
||||
<div class="w-1/4">
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="26"
|
||||
:percentage="70"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="100"
|
||||
status="success"
|
||||
striped
|
||||
striped-flow
|
||||
:duration="70"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="22"
|
||||
:percentage="80"
|
||||
status="warning"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
striped
|
||||
striped-flow
|
||||
class="mb-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">自定义内容</p>
|
||||
<div class="w-1/4 demo-progress">
|
||||
<el-progress :percentage="50">
|
||||
<el-button text>自定义内容</el-button>
|
||||
</el-progress>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
>
|
||||
<span>自定义内容</span>
|
||||
</el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success">
|
||||
<el-button type="success" :icon="useRenderIcon('ep:check')" circle />
|
||||
</el-progress>
|
||||
<el-progress type="dashboard" :percentage="80">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}%</span>
|
||||
<span class="percentage-label">上升率</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.percentage-value {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.demo-progress .el-progress--line {
|
||||
width: 350px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.demo-progress .el-progress--circle {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
164
Yi.Pure.Vue3/src/views/components/seamless-scroll.vue
Normal file
164
Yi.Pure.Vue3/src/views/components/seamless-scroll.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, unref } from "vue";
|
||||
import SeamlessScroll from "@/components/ReSeamlessScroll";
|
||||
|
||||
defineOptions({
|
||||
name: "SeamlessScroll"
|
||||
});
|
||||
|
||||
const scroll = ref();
|
||||
|
||||
const listData = ref([
|
||||
{
|
||||
title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
|
||||
}
|
||||
]);
|
||||
|
||||
const classOption = reactive({
|
||||
direction: "top"
|
||||
});
|
||||
|
||||
function changeDirection(val) {
|
||||
(unref(scroll) as any).reset();
|
||||
unref(classOption).direction = val;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-space wrap>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">无缝滚动</span>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('top')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'top' ? 'red' : '' }"
|
||||
>
|
||||
向上滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('bottom')"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
color: classOption.direction === 'bottom' ? 'red' : ''
|
||||
}"
|
||||
>
|
||||
向下滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('left')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'left' ? 'red' : '' }"
|
||||
>
|
||||
向左滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('right')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'right' ? 'red' : '' }"
|
||||
>
|
||||
向右滚动
|
||||
</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/seamless-scroll.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/seamless-scroll.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<SeamlessScroll
|
||||
ref="scroll"
|
||||
:data="listData"
|
||||
:class-option="classOption"
|
||||
class="warp"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="(item, index) in listData" :key="index">
|
||||
<span class="title" v-text="item.title" />
|
||||
</li>
|
||||
</ul>
|
||||
</SeamlessScroll>
|
||||
</el-card>
|
||||
</el-space>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
width: 360px;
|
||||
height: 270px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
list-style: none;
|
||||
|
||||
li,
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
265
Yi.Pure.Vue3/src/views/components/segmented.vue
Normal file
265
Yi.Pure.Vue3/src/views/components/segmented.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<script setup lang="tsx">
|
||||
import { h, ref, watch } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Segmented, { type OptionsType } from "@/components/ReSegmented";
|
||||
|
||||
defineOptions({
|
||||
name: "Segmented"
|
||||
});
|
||||
|
||||
/** 基础用法 */
|
||||
const value = ref(4); // 必须为number类型
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
|
||||
const optionsBasis: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一"
|
||||
},
|
||||
{
|
||||
label: "周二"
|
||||
},
|
||||
{
|
||||
label: "周三"
|
||||
},
|
||||
{
|
||||
label: "周四"
|
||||
},
|
||||
{
|
||||
label: "周五"
|
||||
}
|
||||
];
|
||||
|
||||
/** tooltip 提示 */
|
||||
const optionsTooltip: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一",
|
||||
tip: "周一启航，新的篇章"
|
||||
},
|
||||
{
|
||||
label: "周二",
|
||||
tip: "周二律动，携手共进"
|
||||
},
|
||||
{
|
||||
label: "周三",
|
||||
tip: "周三昂扬，激情不减"
|
||||
},
|
||||
{
|
||||
label: "周四",
|
||||
tip: "周四精进，事半功倍"
|
||||
},
|
||||
{
|
||||
label: "周五",
|
||||
tip: "周五喜悦，收尾归档"
|
||||
}
|
||||
];
|
||||
|
||||
/** 禁用 */
|
||||
const optionsDisabled: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一"
|
||||
},
|
||||
{
|
||||
label: "周二"
|
||||
},
|
||||
{
|
||||
label: "周三",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: "周四"
|
||||
},
|
||||
{
|
||||
label: "周五",
|
||||
disabled: true
|
||||
}
|
||||
];
|
||||
|
||||
/** block */
|
||||
const optionsBlock: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一"
|
||||
},
|
||||
{
|
||||
label: "周二"
|
||||
},
|
||||
{
|
||||
label: "周三"
|
||||
},
|
||||
{
|
||||
label: "周四"
|
||||
},
|
||||
{
|
||||
label: "周五喜悦，收尾归档，周末倒计时",
|
||||
tip: "周五喜悦，收尾归档，周末倒计时"
|
||||
}
|
||||
];
|
||||
|
||||
/** 可设置图标 */
|
||||
const optionsIcon: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一",
|
||||
icon: HomeFilled
|
||||
},
|
||||
{
|
||||
label: "周二"
|
||||
},
|
||||
{
|
||||
label: "周三",
|
||||
icon: "ri:terminal-window-line"
|
||||
},
|
||||
{
|
||||
label: "周四"
|
||||
},
|
||||
{
|
||||
label: "周五",
|
||||
icon: "streamline-emojis:2"
|
||||
}
|
||||
];
|
||||
|
||||
/** 只设置图标 */
|
||||
const optionsOnlyIcon: Array<OptionsType> = [
|
||||
{
|
||||
icon: HomeFilled
|
||||
},
|
||||
{
|
||||
icon: "ri:terminal-window-line"
|
||||
},
|
||||
{
|
||||
icon: "streamline-emojis:cow-face"
|
||||
},
|
||||
{
|
||||
icon: "streamline-emojis:airplane"
|
||||
},
|
||||
{
|
||||
icon: "streamline-emojis:2"
|
||||
}
|
||||
];
|
||||
|
||||
/** 自定义渲染 */
|
||||
const optionsLabel: Array<OptionsType> = [
|
||||
{
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon(HomeFilled), {
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周一</p>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon("ri:terminal-window-line"), {
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周二</p>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon("streamline-emojis:cow-face"), {
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周三</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const optionsChange: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "周二",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "周三",
|
||||
value: 3
|
||||
}
|
||||
];
|
||||
|
||||
/** change 事件 */
|
||||
function onChange({ index, option }) {
|
||||
const { label, value } = option;
|
||||
message(`当前选中项索引为：${index}，名字为${label}，值为${value}`, {
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
|
||||
watch(size, val => (dynamicSize.value = size.value));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/segmented.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/segmented.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-scrollbar>
|
||||
<p class="mb-2">
|
||||
基础用法（v-model）<span class="text-primary">
|
||||
{{ optionsBasis[value].label }}
|
||||
</span>
|
||||
</p>
|
||||
<Segmented v-model="value" :options="optionsBasis" :size="dynamicSize" />
|
||||
<el-divider />
|
||||
<p class="mb-2">tooltip 提示</p>
|
||||
<Segmented :options="optionsTooltip" :size="dynamicSize" />
|
||||
<el-divider />
|
||||
<p class="mb-2">change 事件</p>
|
||||
<Segmented
|
||||
:options="optionsChange"
|
||||
:size="dynamicSize"
|
||||
@change="onChange"
|
||||
/>
|
||||
<el-divider />
|
||||
<p class="mb-2">禁用</p>
|
||||
<Segmented :options="optionsDisabled" :size="dynamicSize" />
|
||||
<el-divider />
|
||||
<p class="mb-2">全局禁用</p>
|
||||
<Segmented :options="optionsBasis" :size="dynamicSize" disabled />
|
||||
<el-divider />
|
||||
<p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
|
||||
<Segmented :options="optionsBlock" block :size="dynamicSize" />
|
||||
<el-divider />
|
||||
<p class="mb-2">可设置图标</p>
|
||||
<Segmented :options="optionsIcon" :size="dynamicSize" />
|
||||
<el-divider />
|
||||
<p class="mb-2">只设置图标</p>
|
||||
<Segmented :options="optionsOnlyIcon" :size="dynamicSize" />
|
||||
<el-divider />
|
||||
<p class="mb-2">自定义渲染</p>
|
||||
<Segmented :options="optionsLabel" :size="dynamicSize" />
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
</style>
|
||||
55
Yi.Pure.Vue3/src/views/components/selector.vue
Normal file
55
Yi.Pure.Vue3/src/views/components/selector.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Selector from "@/components/ReSelector";
|
||||
|
||||
defineOptions({
|
||||
name: "Selector"
|
||||
});
|
||||
|
||||
const selectRange = ref<string>("");
|
||||
const dataLists = ref([
|
||||
{
|
||||
title: "基础用法",
|
||||
echo: [],
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: "回显模式",
|
||||
echo: [2, 7],
|
||||
disabled: true
|
||||
}
|
||||
]);
|
||||
|
||||
const selectedVal = ({ left, right }): void => {
|
||||
selectRange.value = `${left}-${right}`;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card
|
||||
v-for="(item, key) in dataLists"
|
||||
:key="key"
|
||||
class="mb-2"
|
||||
shadow="never"
|
||||
>
|
||||
<template #header>
|
||||
<p class="font-medium">{{ item.title }}</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/selector.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/selector.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<Selector
|
||||
:HsKey="key"
|
||||
:echo="item.echo"
|
||||
:disabled="item.disabled"
|
||||
@selectedVal="selectedVal"
|
||||
/>
|
||||
<h4 v-if="!item.disabled" class="mt-3">选中范围：{{ selectRange }}</h4>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
87
Yi.Pure.Vue3/src/views/components/split-pane.vue
Normal file
87
Yi.Pure.Vue3/src/views/components/split-pane.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import splitpane, { ContextProps } from "@/components/ReSplitPane";
|
||||
import { reactive } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "SplitPane"
|
||||
});
|
||||
|
||||
const settingLR: ContextProps = reactive({
|
||||
minPercent: 20,
|
||||
defaultPercent: 40,
|
||||
split: "vertical"
|
||||
});
|
||||
|
||||
const settingTB: ContextProps = reactive({
|
||||
minPercent: 20,
|
||||
defaultPercent: 40,
|
||||
split: "horizontal"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">切割面板</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/split-pane.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/split-pane.vue
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<div class="split-pane">
|
||||
<splitpane :splitSet="settingLR">
|
||||
<!-- #paneL 表示指定该组件为左侧面板 -->
|
||||
<template #paneL>
|
||||
<!-- 自定义左侧面板的内容 -->
|
||||
<el-scrollbar>
|
||||
<div class="dv-a">A</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<!-- #paneR 表示指定该组件为右侧面板 -->
|
||||
<template #paneR>
|
||||
<!-- 再次将右侧面板进行拆分 -->
|
||||
<splitpane :splitSet="settingTB">
|
||||
<template #paneL>
|
||||
<el-scrollbar><div class="dv-b">B</div></el-scrollbar>
|
||||
</template>
|
||||
<template #paneR>
|
||||
<el-scrollbar>
|
||||
<div class="dv-c">C</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</splitpane>
|
||||
</template>
|
||||
</splitpane>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.split-pane {
|
||||
width: 100%;
|
||||
height: calc(100vh - 300px);
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
border: 1px solid #e5e6eb;
|
||||
|
||||
.dv-a {
|
||||
padding-top: 30vh;
|
||||
color: rgba($color: dodgerblue, $alpha: 80%);
|
||||
}
|
||||
|
||||
.dv-b {
|
||||
padding-top: 10vh;
|
||||
color: rgba($color: #000, $alpha: 80%);
|
||||
}
|
||||
|
||||
.dv-c {
|
||||
padding-top: 18vh;
|
||||
color: rgba($color: #ce272d, $alpha: 80%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
Yi.Pure.Vue3/src/views/components/statistic.vue
Normal file
91
Yi.Pure.Vue3/src/views/components/statistic.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { useTransition } from "@vueuse/core";
|
||||
|
||||
defineOptions({
|
||||
name: "Statistic"
|
||||
});
|
||||
|
||||
const value = ref(Date.now() + 1000 * 60 * 60 * 7);
|
||||
const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);
|
||||
const value2 = ref(dayjs().add(1, "month").startOf("month"));
|
||||
|
||||
const source = ref(0);
|
||||
const outputValue = useTransition(source, {
|
||||
duration: 1500
|
||||
});
|
||||
source.value = 36000;
|
||||
|
||||
function reset() {
|
||||
value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/statistic.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
统计组件
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/statistic.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/statistic.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<re-col :value="6" :xs="24" :sm="24">
|
||||
<el-statistic title="需求人数" :value="outputValue" />
|
||||
</re-col>
|
||||
|
||||
<re-col :value="6" :xs="24" :sm="24">
|
||||
<el-countdown title="距离答疑结束还剩" :value="value" />
|
||||
</re-col>
|
||||
|
||||
<re-col :value="6" :xs="24" :sm="24">
|
||||
<el-countdown
|
||||
title="VIP到期时间还剩"
|
||||
format="HH:mm:ss"
|
||||
:value="value1"
|
||||
/>
|
||||
<el-button class="mt-2" type="primary" text bg @click="reset">
|
||||
重置
|
||||
</el-button>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="6" :xs="24" :sm="24">
|
||||
<el-countdown format="DD天 HH时 mm分 ss秒" :value="value2">
|
||||
<template #title>
|
||||
<div style="display: inline-flex; align-items: center">
|
||||
<IconifyIconOnline icon="ep:calendar" class="mr-2" />
|
||||
距离下个月还剩
|
||||
</div>
|
||||
</template>
|
||||
</el-countdown>
|
||||
<div class="mt-2">{{ value2.format("YYYY-MM-DD") }}</div>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-col {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
128
Yi.Pure.Vue3/src/views/components/swiper.vue
Normal file
128
Yi.Pure.Vue3/src/views/components/swiper.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<script setup lang="ts">
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import SwiperCore from "swiper";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
||||
|
||||
defineOptions({
|
||||
name: "Swiper"
|
||||
});
|
||||
|
||||
SwiperCore.use([Autoplay, Navigation, Pagination]);
|
||||
|
||||
const swiperExample: any[] = [
|
||||
{ id: 0, label: "基础滑动", options: {} },
|
||||
{
|
||||
id: 1,
|
||||
label: "按钮切换",
|
||||
options: {
|
||||
navigation: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "分页器",
|
||||
options: {
|
||||
pagination: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "分页器 / 动态指示点",
|
||||
options: {
|
||||
pagination: { dynamicBullets: true }
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "分页器 / 进度条",
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
type: "progressbar"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: "分页器 / 分式",
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
type: "fraction"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "一次显示多个Slides",
|
||||
options: {
|
||||
pagination: {
|
||||
clickable: true
|
||||
},
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: "无限循环",
|
||||
options: {
|
||||
autoplay: {
|
||||
delay: 2000,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
navigation: true,
|
||||
pagination: {
|
||||
clickable: true
|
||||
},
|
||||
loop: true
|
||||
}
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/nolimits4web/swiper"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
Swiper插件
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/swiper.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/swiper.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-row :gutter="10">
|
||||
<el-col v-for="item in swiperExample" :key="item.id" :span="12">
|
||||
<h6 class="py-[16px] text-base">{{ item.label }}</h6>
|
||||
<swiper v-bind="item.options">
|
||||
<swiper-slide v-for="i in 5" :key="i">
|
||||
<div
|
||||
class="flex justify-center items-center h-[240px] border border-[#999]"
|
||||
>
|
||||
Slide{{ i }}
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-card__body) {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
179
Yi.Pure.Vue3/src/views/components/tag.vue
Normal file
179
Yi.Pure.Vue3/src/views/components/tag.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from "vue";
|
||||
import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTag"
|
||||
});
|
||||
|
||||
const size = ref("default");
|
||||
const checked1 = ref(false);
|
||||
const checked2 = ref(false);
|
||||
const baseTag = ref("dark");
|
||||
const tagList = ref([
|
||||
{
|
||||
type: "primary",
|
||||
text: "Primary"
|
||||
},
|
||||
{
|
||||
type: "success",
|
||||
text: "Success"
|
||||
},
|
||||
{
|
||||
type: "info",
|
||||
text: "Info"
|
||||
},
|
||||
{
|
||||
type: "warning",
|
||||
text: "Warning"
|
||||
},
|
||||
{
|
||||
type: "danger",
|
||||
text: "Danger"
|
||||
}
|
||||
]);
|
||||
const handleClose = tag => {
|
||||
tagList.value.splice(tagList.value.indexOf(tag), 1);
|
||||
};
|
||||
const copyTagList = cloneDeep(tagList.value);
|
||||
function onReset() {
|
||||
tagList.value = cloneDeep(copyTagList);
|
||||
}
|
||||
|
||||
/** 动态编辑标签 */
|
||||
const inputValue = ref("");
|
||||
const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
|
||||
const inputVisible = ref(false);
|
||||
const InputRef = ref();
|
||||
const handleDynamicClose = (tag: string) => {
|
||||
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
|
||||
};
|
||||
const showInput = () => {
|
||||
inputVisible.value = true;
|
||||
nextTick(() => {
|
||||
InputRef.value!.input!.focus();
|
||||
});
|
||||
};
|
||||
const handleInputConfirm = () => {
|
||||
if (!isAllEmpty(inputValue.value)) {
|
||||
dynamicTags.value.push(inputValue.value);
|
||||
}
|
||||
inputVisible.value = false;
|
||||
inputValue.value = "";
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/tag.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Tag 标签
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/tag.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/tag.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础按钮</p>
|
||||
<el-radio-group v-model="baseTag" class="mb-3">
|
||||
<el-radio label="dark" value="dark" />
|
||||
<el-radio label="light" value="light" />
|
||||
<el-radio label="plain" value="plain" />
|
||||
</el-radio-group>
|
||||
<br />
|
||||
<el-space class="mb-3">
|
||||
<el-checkbox
|
||||
v-if="tagList.length > 0"
|
||||
v-model="checked1"
|
||||
label="可移除"
|
||||
/>
|
||||
<el-button v-else size="small" text bg class="mr-6" @click="onReset">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="checked1 && tagList.length > 0"
|
||||
size="small"
|
||||
text
|
||||
bg
|
||||
class="mr-6 ml-4"
|
||||
@click="tagList = []"
|
||||
>
|
||||
移除全部
|
||||
</el-button>
|
||||
<el-checkbox v-model="checked2" label="圆形" />
|
||||
</el-space>
|
||||
<br />
|
||||
<el-space wrap>
|
||||
<el-tag
|
||||
v-for="(tag, index) in tagList"
|
||||
:key="index"
|
||||
:type="tag.type as any"
|
||||
:effect="baseTag as any"
|
||||
:closable="checked1"
|
||||
:round="checked2"
|
||||
:size="size as any"
|
||||
:disabled="size === 'disabled'"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{ tag.text }}
|
||||
</el-tag>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">动态编辑标签</p>
|
||||
<el-tag
|
||||
v-for="tag in dynamicTags"
|
||||
:key="tag"
|
||||
class="mx-1"
|
||||
closable
|
||||
:size="size as any"
|
||||
:disable-transitions="false"
|
||||
@close="handleDynamicClose(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
<el-input
|
||||
v-if="inputVisible"
|
||||
ref="InputRef"
|
||||
v-model="inputValue"
|
||||
class="ml-1 !w-20"
|
||||
size="small"
|
||||
@keyup.enter="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
/>
|
||||
<el-button
|
||||
v-else
|
||||
class="button-new-tag ml-1"
|
||||
size="small"
|
||||
@click="showInput"
|
||||
>
|
||||
新建标签
|
||||
</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
</style>
|
||||
171
Yi.Pure.Vue3/src/views/components/text.vue
Normal file
171
Yi.Pure.Vue3/src/views/components/text.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<script lang="ts" setup>
|
||||
import dayjs from "dayjs";
|
||||
import { ref } from "vue";
|
||||
import { ReText } from "@/components/ReText";
|
||||
|
||||
defineOptions({
|
||||
name: "PureText"
|
||||
});
|
||||
|
||||
const customContent = ref("自定义tooltip内容");
|
||||
|
||||
const changeTooltipContent = () => {
|
||||
customContent.value =
|
||||
"现在的时间是: " + dayjs().format("YYYY-MM-DD HH:mm:ss");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
文本省略，基于
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/text.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
el-text
|
||||
</el-link>
|
||||
和
|
||||
<el-link
|
||||
href="https://vue-tippy.netlify.app/basic-usage"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
VueTippy
|
||||
</el-link>
|
||||
自动省略后显示 Tooltip 提示， 支持多行省略
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/text.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/text.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础用法</p>
|
||||
<el-space wrap>
|
||||
<ul class="content">
|
||||
<li>
|
||||
<ReText>
|
||||
测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
|
||||
</ReText>
|
||||
<ReText :lineClamp="2">
|
||||
测试文本，这是一个稍微有点长的文本，lineClamp参数为2，即两行过长省略后，鼠标悬浮会有tooltip提示
|
||||
</ReText>
|
||||
</li>
|
||||
</ul>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">自定义 Tooltip 内容</p>
|
||||
<div class="mb-2">
|
||||
<el-button @click="changeTooltipContent">
|
||||
点击切换下方 Tooltip 内容
|
||||
</el-button>
|
||||
</div>
|
||||
<el-space wrap>
|
||||
<ul class="content">
|
||||
<li>
|
||||
<ReText :tippyProps="{ content: customContent }">
|
||||
props写法 -
|
||||
测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
|
||||
</ReText>
|
||||
</li>
|
||||
<li>
|
||||
<ReText>
|
||||
<template #content>
|
||||
<div>
|
||||
<b>这是插槽写法: </b>
|
||||
<div>{{ customContent }}</div>
|
||||
</div>
|
||||
</template>
|
||||
插槽写法 -
|
||||
测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
|
||||
</ReText>
|
||||
</li>
|
||||
</ul>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
<p class="mb-2">自定义 el-text 配置</p>
|
||||
<el-space wrap>
|
||||
<ul class="content">
|
||||
<li>
|
||||
<ReText type="primary" size="large">
|
||||
测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
|
||||
</ReText>
|
||||
</li>
|
||||
<li>
|
||||
<ReText :lineClamp="4" type="info">
|
||||
测试文本，这是一个非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长的文本，lineClamp参数为4，即四行过长省略后，鼠标悬浮会有tooltip提示
|
||||
</ReText>
|
||||
</li>
|
||||
</ul>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
<p class="mb-2">自定义 VueTippy 配置</p>
|
||||
<el-space wrap>
|
||||
<ul class="content">
|
||||
<li>
|
||||
<ReText
|
||||
:tippyProps="{ offset: [0, -20], theme: 'light', arrow: false }"
|
||||
>
|
||||
偏移白色无箭头 -
|
||||
测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
|
||||
</ReText>
|
||||
</li>
|
||||
<li>
|
||||
<ReText :lineClamp="4" :tippyProps="{ followCursor: true }">
|
||||
鼠标跟随 -
|
||||
测试文本，这是一个非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长的文本，lineClamp参数为4，即四行过长省略后，鼠标悬浮会有tooltip提示
|
||||
</ReText>
|
||||
</li>
|
||||
</ul>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
<p class="mb-2">组件嵌套: 不需要省略的需设置 truncated 为 false</p>
|
||||
<el-space wrap>
|
||||
<ul class="content">
|
||||
<li>
|
||||
<ReText tag="p" :lineClamp="2">
|
||||
This is a paragraph. Paragraph start
|
||||
<ReText :truncated="false">
|
||||
【 This is ReText
|
||||
<ReText tag="sup" size="small" :truncated="false">
|
||||
superscript 】
|
||||
</ReText>
|
||||
</ReText>
|
||||
<el-text>
|
||||
【 This is El-Text
|
||||
<el-text tag="sub" size="small"> subscript 】 </el-text>
|
||||
</el-text>
|
||||
<el-text tag="ins">【Inserted】</el-text>
|
||||
<el-text tag="del">【Deleted】</el-text>
|
||||
<el-text tag="mark">【Marked】</el-text>
|
||||
Paragraph end.
|
||||
</ReText>
|
||||
</li>
|
||||
</ul>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 400px;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
resize: horizontal;
|
||||
background-color: var(--el-color-info-light-9);
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
204
Yi.Pure.Vue3/src/views/components/time-picker.vue
Normal file
204
Yi.Pure.Vue3/src/views/components/time-picker.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "TimePicker"
|
||||
});
|
||||
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
|
||||
/** 时间选择器 */
|
||||
const value = ref("");
|
||||
const value1 = ref("");
|
||||
const value3 = ref();
|
||||
|
||||
const value2 = ref(new Date(2016, 9, 10, 18, 30));
|
||||
|
||||
const makeRange = (start: number, end: number) => {
|
||||
const result: number[] = [];
|
||||
for (let i = start; i <= end; i++) {
|
||||
result.push(i);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
const disabledHours = () => {
|
||||
return makeRange(0, 16).concat(makeRange(19, 23));
|
||||
};
|
||||
const disabledMinutes = (hour: number) => {
|
||||
if (hour === 17) {
|
||||
return makeRange(0, 29);
|
||||
}
|
||||
if (hour === 18) {
|
||||
return makeRange(31, 59);
|
||||
}
|
||||
};
|
||||
const disabledSeconds = (hour: number, minute: number) => {
|
||||
if (hour === 18 && minute === 30) {
|
||||
return makeRange(1, 59);
|
||||
}
|
||||
};
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
|
||||
/** 时间选择 */
|
||||
const value4 = ref("");
|
||||
const value5 = ref("");
|
||||
const startTime = ref("");
|
||||
const endTime = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/time-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
时间选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/time-picker.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/time-picker.vue
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">日期和时间点</p>
|
||||
<el-space wrap>
|
||||
<p class="text-[15px]">鼠标滚轮进行选择</p>
|
||||
<el-time-picker
|
||||
v-model="value"
|
||||
placeholder="请选择时间"
|
||||
class="!w-[140px]"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<p class="text-[15px]">箭头进行选择</p>
|
||||
<el-time-picker
|
||||
v-model="value1"
|
||||
arrow-control
|
||||
placeholder="请选择时间"
|
||||
class="!w-[140px]"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">限制时间选择范围</p>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
class="!w-[140px]"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
placeholder="Arbitrary time"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">任意时间范围</p>
|
||||
<el-time-picker
|
||||
v-model="value3"
|
||||
class="!w-[220px]"
|
||||
is-range
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/time-select.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
时间选择
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">固定时间点</p>
|
||||
<el-time-select
|
||||
v-model="value4"
|
||||
placeholder="请选择时间"
|
||||
class="!w-[140px]"
|
||||
start="08:30"
|
||||
step="00:15"
|
||||
end="18:30"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">时间格式</p>
|
||||
<el-time-select
|
||||
v-model="value5"
|
||||
placeholder="请选择时间"
|
||||
class="!w-[140px]"
|
||||
start="00:00"
|
||||
step="00:30"
|
||||
end="23:59"
|
||||
format="hh:mm A"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
|
||||
<p class="mb-2 mt-4">固定时间范围</p>
|
||||
<el-space wrap>
|
||||
<el-time-select
|
||||
v-model="startTime"
|
||||
placeholder="开始时间"
|
||||
class="!w-[140px]"
|
||||
:max-time="endTime"
|
||||
start="08:30"
|
||||
step="00:15"
|
||||
end="18:30"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<el-time-select
|
||||
v-model="endTime"
|
||||
placeholder="结束时间"
|
||||
class="!w-[140px]"
|
||||
:min-time="startTime"
|
||||
start="08:30"
|
||||
step="00:15"
|
||||
end="18:30"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
126
Yi.Pure.Vue3/src/views/components/timeline.vue
Normal file
126
Yi.Pure.Vue3/src/views/components/timeline.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<script setup lang="ts">
|
||||
import { markRaw } from "vue";
|
||||
import { randomGradient } from "@pureadmin/utils";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
defineOptions({
|
||||
name: "TimeLine"
|
||||
});
|
||||
|
||||
const { lastBuildTime } = __APP_INFO__;
|
||||
const activities = [
|
||||
{
|
||||
content: "支持圆点发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(useRenderFlicker())
|
||||
},
|
||||
{
|
||||
content: "支持方形发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
|
||||
},
|
||||
{
|
||||
content: "支持渐变发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(
|
||||
useRenderFlicker({
|
||||
background: randomGradient({
|
||||
randomizeHue: true
|
||||
})
|
||||
})
|
||||
)
|
||||
},
|
||||
{
|
||||
content: "支持默认颜色",
|
||||
timestamp: lastBuildTime
|
||||
},
|
||||
{
|
||||
content: "支持自定义颜色",
|
||||
timestamp: lastBuildTime,
|
||||
color: "#F56C6C"
|
||||
},
|
||||
{
|
||||
content: "支持自定义图标",
|
||||
timestamp: lastBuildTime,
|
||||
color: "transparent",
|
||||
icon: useRenderIcon(Iphone, {
|
||||
color: "#0bbd87"
|
||||
})
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">时间线</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/timeline.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/timeline.vue
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:color="activity.color"
|
||||
:timestamp="activity.timestamp"
|
||||
>
|
||||
{{ activity.content }}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
|
||||
<el-timeline class="pl-40">
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:color="activity.color"
|
||||
:timestamp="activity.timestamp"
|
||||
placement="bottom"
|
||||
>
|
||||
<div class="message">
|
||||
vue-pure-admin 第{{ activities.length - index }}个版本发布啦
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.message {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
padding: 5px 12px;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.message::after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
content: "";
|
||||
border-color: var(--el-color-primary) transparent transparent;
|
||||
border-style: solid dashed dashed;
|
||||
border-width: 10px;
|
||||
}
|
||||
</style>
|
||||
94
Yi.Pure.Vue3/src/views/components/upload/form.vue
Normal file
94
Yi.Pure.Vue3/src/views/components/upload/form.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { formUpload } from "@/api/mock";
|
||||
import { message } from "@/utils/message";
|
||||
import { createFormData } from "@pureadmin/utils";
|
||||
|
||||
import UploadIcon from "@iconify-icons/ri/upload-2-line";
|
||||
|
||||
const formRef = ref();
|
||||
const uploadRef = ref();
|
||||
const validateForm = reactive({
|
||||
fileList: [],
|
||||
date: ""
|
||||
});
|
||||
|
||||
const submitForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(valid => {
|
||||
if (valid) {
|
||||
// 多个 file 在一个接口同时上传
|
||||
const formData = createFormData({
|
||||
files: validateForm.fileList.map(file => ({ raw: file.raw })), // file 文件
|
||||
date: validateForm.date // 别的字段
|
||||
});
|
||||
formUpload(formData)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
message("提交成功", { type: "success" });
|
||||
} else {
|
||||
message("提交失败");
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
message(`提交异常 ${error}`, { type: "error" });
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="formRef" :model="validateForm" label-width="82px">
|
||||
<el-form-item
|
||||
label="附件"
|
||||
prop="fileList"
|
||||
:rules="[{ required: true, message: '附件不能为空' }]"
|
||||
>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
v-model:file-list="validateForm.fileList"
|
||||
drag
|
||||
multiple
|
||||
action="#"
|
||||
class="!w-[200px]"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<div class="el-upload__text">
|
||||
<IconifyIconOffline
|
||||
:icon="UploadIcon"
|
||||
width="26"
|
||||
class="m-auto mb-2"
|
||||
/>
|
||||
可点击或拖拽上传
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="日期"
|
||||
prop="date"
|
||||
:rules="[{ required: true, message: '日期不能为空' }]"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="validateForm.date"
|
||||
type="datetime"
|
||||
class="!w-[200px]"
|
||||
placeholder="请选择日期时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" text bg @click="submitForm(formRef)">
|
||||
提交
|
||||
</el-button>
|
||||
<el-button text bg @click="resetForm(formRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
BIN
Yi.Pure.Vue3/src/views/components/upload/imgs/1.jpg
Normal file
BIN
Yi.Pure.Vue3/src/views/components/upload/imgs/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
BIN
Yi.Pure.Vue3/src/views/components/upload/imgs/2.jpg
Normal file
BIN
Yi.Pure.Vue3/src/views/components/upload/imgs/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
Yi.Pure.Vue3/src/views/components/upload/imgs/3.jpg
Normal file
BIN
Yi.Pure.Vue3/src/views/components/upload/imgs/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
318
Yi.Pure.Vue3/src/views/components/upload/index.vue
Normal file
318
Yi.Pure.Vue3/src/views/components/upload/index.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<script setup lang="ts">
|
||||
import axios from "axios";
|
||||
import Sortable from "sortablejs";
|
||||
import UploadForm from "./form.vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "@/utils/message";
|
||||
import type { UploadFile } from "element-plus";
|
||||
import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
|
||||
|
||||
import Add from "@iconify-icons/ep/plus";
|
||||
import Eye from "@iconify-icons/ri/eye-line";
|
||||
import Delete from "@iconify-icons/ri/delete-bin-7-line";
|
||||
|
||||
defineOptions({
|
||||
name: "PureUpload"
|
||||
});
|
||||
|
||||
const fileList = ref([]);
|
||||
const router = useRouter();
|
||||
const curOpenImgIndex = ref(0);
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const urlList = computed(() => getKeyList(fileList.value, "url"));
|
||||
const imgInfos = computed(() => extractFields(fileList.value, "name", "size"));
|
||||
|
||||
const getImgUrl = name => new URL(`./imgs/${name}.jpg`, import.meta.url).href;
|
||||
const srcList = Array.from({ length: 3 }).map((_, index) => {
|
||||
return getImgUrl(index + 1);
|
||||
});
|
||||
|
||||
/** 上传文件前校验 */
|
||||
const onBefore = file => {
|
||||
if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
|
||||
message("只能上传图片");
|
||||
return false;
|
||||
}
|
||||
const isExceed = file.size / 1024 / 1024 > 2;
|
||||
if (isExceed) {
|
||||
message(`单个图片大小不能超过2MB`);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 超出最大上传数时触发 */
|
||||
const onExceed = () => {
|
||||
message("最多上传3张图片，请先删除在上传");
|
||||
};
|
||||
|
||||
/** 移除上传的文件 */
|
||||
const handleRemove = (file: UploadFile) => {
|
||||
fileList.value.splice(fileList.value.indexOf(file), 1);
|
||||
};
|
||||
|
||||
/** 大图预览 */
|
||||
const handlePictureCardPreview = (file: UploadFile) => {
|
||||
curOpenImgIndex.value = fileList.value.findIndex(img => img.uid === file.uid);
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const getUploadItem = () => document.querySelectorAll("#pure-upload-item");
|
||||
|
||||
/** 缩略图拖拽排序 */
|
||||
const imgDrop = uid => {
|
||||
const CLASSNAME = "el-upload-list";
|
||||
const _curIndex = fileList.value.findIndex(img => img.uid === uid);
|
||||
getUploadItem()?.[_curIndex]?.classList?.add(`${CLASSNAME}__item-actions`);
|
||||
const wrapper: HTMLElement = document.querySelector(`.${CLASSNAME}`);
|
||||
Sortable.create(wrapper, {
|
||||
handle: `.${CLASSNAME}__item`,
|
||||
onEnd: ({ newIndex, oldIndex }) => {
|
||||
const oldFile = fileList.value[oldIndex];
|
||||
fileList.value.splice(oldIndex, 1);
|
||||
fileList.value.splice(newIndex, 0, oldFile);
|
||||
// fix: https://github.com/SortableJS/Sortable/issues/232 (firefox is ok, but chromium is bad. see https://bugs.chromium.org/p/chromium/issues/detail?id=410328)
|
||||
getUploadItem().forEach(ele => {
|
||||
ele.classList.remove(`${CLASSNAME}__item-actions`);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 下载图片 */
|
||||
const onDownload = () => {
|
||||
[
|
||||
{ name: "巴旦木.jpeg", type: "img" },
|
||||
{ name: "恭喜发财.png", type: "img" },
|
||||
{ name: "可爱动物.gif", type: "gif" },
|
||||
{ name: "pure-upload.csv", type: "other" },
|
||||
{ name: "pure-upload.txt", type: "other" }
|
||||
].forEach(img => {
|
||||
axios
|
||||
.get(`https://xiaoxian521.github.io/hyperlink/${img.type}/${img.name}`, {
|
||||
responseType: "blob"
|
||||
})
|
||||
.then(({ data }) => {
|
||||
downloadByData(data, img.name);
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/upload.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
文件上传
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/upload
|
||||
</el-link>
|
||||
</template>
|
||||
|
||||
<el-button class="mb-4" text bg @click="onDownload">
|
||||
点击下载安全文件进行上传测试
|
||||
</el-button>
|
||||
<p class="mb-4">
|
||||
综合示例<span class="text-[14px]">
|
||||
（ <span class="text-[red]">自动上传</span>
|
||||
、拖拽上传、拖拽排序、设置请求头、上传进度、大图预览、多选文件、最大文件数量、文件类型限制、文件大小限制、删除文件）
|
||||
</span>
|
||||
</p>
|
||||
<p v-show="fileList.length > 0" class="mb-4">
|
||||
{{ imgInfos }}
|
||||
</p>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
drag
|
||||
multiple
|
||||
class="pure-upload"
|
||||
list-type="picture-card"
|
||||
accept="image/jpeg,image/png,image/gif"
|
||||
action="https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b"
|
||||
:limit="3"
|
||||
:headers="{ Authorization: 'eyJhbGciOiJIUzUxMiJ9.admin' }"
|
||||
:on-exceed="onExceed"
|
||||
:before-upload="onBefore"
|
||||
>
|
||||
<IconifyIconOffline :icon="Add" class="m-auto mt-4" width="30" />
|
||||
<template #file="{ file }">
|
||||
<div
|
||||
v-if="file.status == 'ready' || file.status == 'uploading'"
|
||||
class="mt-[35%] m-auto"
|
||||
>
|
||||
<p class="font-medium">文件上传中</p>
|
||||
<el-progress
|
||||
class="mt-2"
|
||||
:stroke-width="2"
|
||||
:text-inside="true"
|
||||
:show-text="false"
|
||||
:percentage="file.percentage"
|
||||
/>
|
||||
</div>
|
||||
<div v-else @mouseenter.stop="imgDrop(file.uid)">
|
||||
<img
|
||||
class="el-upload-list__item-thumbnail select-none"
|
||||
:src="file.url"
|
||||
/>
|
||||
<span
|
||||
id="pure-upload-item"
|
||||
:class="[
|
||||
'el-upload-list__item-actions',
|
||||
fileList.length > 1 && '!cursor-move'
|
||||
]"
|
||||
>
|
||||
<span
|
||||
title="查看"
|
||||
class="hover:text-primary"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="Eye"
|
||||
class="hover:scale-125 duration-100"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<span title="移除" class="hover:text-[var(--el-color-danger)]">
|
||||
<IconifyIconOffline
|
||||
:icon="Delete"
|
||||
class="hover:scale-125 duration-100"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<!-- 有时文档没写并不代表没有，多看源码好处多多😝 https://github.com/element-plus/element-plus/tree/dev/packages/components/image-viewer/src （emm...这让我想起刚开始写这个项目时，很多东西只有英文或者没有文档，需要看源码时，想笑🥹。那些美好时光都给这些坑了，giao） -->
|
||||
<el-image-viewer
|
||||
v-if="dialogVisible"
|
||||
:initialIndex="curOpenImgIndex"
|
||||
:url-list="urlList"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
@close="dialogVisible = false"
|
||||
@switch="index => (curOpenImgIndex = index)"
|
||||
/>
|
||||
<!-- 将自定义内容插入到body里，有了它在图片预览的时候，想插入个分页器或者别的东东在预览区某个位置就很方便咯（用户需求可以很灵活，开源组件库几乎不可能尽善尽美，很多时候寻找别的解决途径或许更好） -->
|
||||
<teleport to="body">
|
||||
<div
|
||||
v-if="fileList[curOpenImgIndex] && dialogVisible"
|
||||
effect="dark"
|
||||
round
|
||||
size="large"
|
||||
type="info"
|
||||
class="img-name"
|
||||
>
|
||||
<p class="text-[#fff] dark:text-black">
|
||||
{{ fileList[curOpenImgIndex].name }}
|
||||
</p>
|
||||
</div>
|
||||
</teleport>
|
||||
<p class="el-upload__tip">
|
||||
可拖拽上传最多3张单个不超过2MB且格式为jpeg/png/gif的图片
|
||||
</p>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-4 mt-4">
|
||||
结合表单校验进行<span class="text-[red]">手动上传</span>
|
||||
<span class="text-[14px]">
|
||||
（可先打开浏览器控制台找到Network，然后填写表单内容后点击点提交观察请求变化）
|
||||
</span>
|
||||
</p>
|
||||
<div class="flex justify-between">
|
||||
<UploadForm />
|
||||
<div>
|
||||
<p class="text-center">上传接口相关截图</p>
|
||||
<el-image
|
||||
class="w-[200px] rounded-md"
|
||||
:src="srcList[0]"
|
||||
:preview-src-list="srcList"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<p>
|
||||
裁剪、上传头像请参考
|
||||
<span
|
||||
class="font-bold text-[18x] cursor-pointer hover:text-[red]"
|
||||
@click="router.push({ name: 'SystemUser' })"
|
||||
>
|
||||
系统管理-用户管理
|
||||
</span>
|
||||
表格操作栏中的上传头像功能
|
||||
</p>
|
||||
<p class="text-[red] text-[12px] flex flex-auto items-center justify-end">
|
||||
免责声明：上传接口使用免费开源的
|
||||
<el-link
|
||||
href="https://designer.mocky.io/"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Mocky
|
||||
</el-link>
|
||||
<span class="font-bold text-[18x]"> 请不要上传重要信息 </span
|
||||
>，如果造成任何损失，我们概不负责
|
||||
</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.card-header) {
|
||||
display: flex;
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.pure-upload) {
|
||||
.el-upload-dragger {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.img-name {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
z-index: 4000;
|
||||
padding: 5px 23px;
|
||||
background-color: var(--el-text-color-regular);
|
||||
border-radius: 22px;
|
||||
transform: translateX(-50%);
|
||||
|
||||
/** 将下面的 left: 50%; bottom: 80px; transform: translateX(-50%); 注释掉
|
||||
* 解开下面 left: 40px; top: 40px; 注释，体验不一样的感觉。啊？还是差强人意，自己调整位置吧🥹
|
||||
*/
|
||||
// left: 40px;
|
||||
// top: 40px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
|
||||
|
||||
const items = ref([]);
|
||||
const search = ref("");
|
||||
|
||||
for (let i = 0; i < 800; i++) {
|
||||
items.value.push({
|
||||
id: i
|
||||
});
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!search.value) return items.value;
|
||||
const lowerCaseSearch = search.value;
|
||||
return items.value.filter(i => i.id == lowerCaseSearch);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dynamic-scroller-demo">
|
||||
<div class="flex-ac mb-4 shadow-2xl">
|
||||
水平模式 horizontal
|
||||
<el-input
|
||||
v-model="search"
|
||||
class="mr-2 !w-[1/1.5]"
|
||||
clearable
|
||||
placeholder="Filter..."
|
||||
style="width: 300px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DynamicScroller
|
||||
:items="filteredItems"
|
||||
:min-item-size="54"
|
||||
direction="horizontal"
|
||||
class="scroller"
|
||||
>
|
||||
<template #default="{ item, index, active }">
|
||||
<DynamicScrollerItem
|
||||
:item="item"
|
||||
:active="active"
|
||||
:size-dependencies="[item.id]"
|
||||
:data-index="index"
|
||||
:data-active="active"
|
||||
:title="`Click to change message ${index}`"
|
||||
:style="{
|
||||
width: `${Math.max(130, Math.round((item.id?.length / 20) * 20))}px`
|
||||
}"
|
||||
class="message"
|
||||
>
|
||||
<div>
|
||||
<IconifyIconOnline
|
||||
icon="openmoji:beaming-face-with-smiling-eyes"
|
||||
width="40"
|
||||
/>
|
||||
<p class="text-center">{{ item.id }}</p>
|
||||
</div>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
</DynamicScroller>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dynamic-scroller-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
flex: auto 1 1;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 24px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.message {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 32px;
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
36
Yi.Pure.Vue3/src/views/components/virtual-list/index.vue
Normal file
36
Yi.Pure.Vue3/src/views/components/virtual-list/index.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import verticalList from "./vertical.vue";
|
||||
import horizontalList from "./horizontal.vue";
|
||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||
|
||||
defineOptions({
|
||||
name: "VirtualList"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
虚拟列表
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/virtual-list"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/virtual-list
|
||||
</el-link>
|
||||
</template>
|
||||
<div class="w-full flex justify-around flex-wrap">
|
||||
<vertical-list class="h-[500px] w-[500px]" />
|
||||
<horizontal-list class="h-[500px] w-[500px]" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
79
Yi.Pure.Vue3/src/views/components/virtual-list/vertical.vue
Normal file
79
Yi.Pure.Vue3/src/views/components/virtual-list/vertical.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
|
||||
|
||||
const items = ref([]);
|
||||
const search = ref("");
|
||||
|
||||
for (let i = 0; i < 800; i++) {
|
||||
items.value.push({
|
||||
id: i
|
||||
});
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!search.value) return items.value;
|
||||
const lowerCaseSearch = search.value;
|
||||
return items.value.filter(i => i.id == lowerCaseSearch);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dynamic-scroller-demo">
|
||||
<div class="flex-ac mb-4 shadow-2xl">
|
||||
垂直模式 vertical
|
||||
<el-input
|
||||
v-model="search"
|
||||
class="!w-[350px]"
|
||||
clearable
|
||||
placeholder="Filter..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DynamicScroller
|
||||
:items="filteredItems"
|
||||
:min-item-size="54"
|
||||
class="scroller"
|
||||
>
|
||||
<template #default="{ item, index, active }">
|
||||
<DynamicScrollerItem
|
||||
:item="item"
|
||||
:active="active"
|
||||
:size-dependencies="[item.id]"
|
||||
:data-index="index"
|
||||
:data-active="active"
|
||||
:title="`Click to change message ${index}`"
|
||||
class="message"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<IconifyIconOnline
|
||||
icon="openmoji:beaming-face-with-smiling-eyes"
|
||||
width="40"
|
||||
/>
|
||||
<span>{{ item.id }}</span>
|
||||
</div>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
</DynamicScroller>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dynamic-scroller-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
flex: auto 1 1;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.message {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
min-height: 32px;
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
38
Yi.Pure.Vue3/src/views/components/waterfall/api.ts
Normal file
38
Yi.Pure.Vue3/src/views/components/waterfall/api.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
export function randomID(length = 6) {
|
||||
return Number(
|
||||
Math.random().toString().substr(3, length) + Date.now()
|
||||
).toString(36);
|
||||
}
|
||||
|
||||
const COLORS = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
|
||||
|
||||
function getRandomNum(min: number, max: number) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function randomColor() {
|
||||
return COLORS[getRandomNum(0, 4)];
|
||||
}
|
||||
|
||||
const website = "https://www.getphotoblanket.com";
|
||||
|
||||
export const getList = ({ page = 1, pageSize = 20 }) => {
|
||||
const url = `${website}/products.json?page=${page}&limit=${pageSize}`;
|
||||
return fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(res => res.products)
|
||||
.then(res => {
|
||||
return res.map((item: any) => {
|
||||
return {
|
||||
id: randomID(),
|
||||
star: false,
|
||||
price: item.variants[0].price,
|
||||
src: {
|
||||
original: item.images[0].src
|
||||
},
|
||||
backgroundColor: randomColor(),
|
||||
name: item.title
|
||||
};
|
||||
});
|
||||
});
|
||||
};
|
||||
BIN
Yi.Pure.Vue3/src/views/components/waterfall/error.png
Normal file
BIN
Yi.Pure.Vue3/src/views/components/waterfall/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
162
Yi.Pure.Vue3/src/views/components/waterfall/index.vue
Normal file
162
Yi.Pure.Vue3/src/views/components/waterfall/index.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import { getList } from "./api";
|
||||
import error from "./error.png";
|
||||
import loading from "./loading.png";
|
||||
import { ElLoading } from "element-plus";
|
||||
import "vue-waterfall-plugin-next/dist/style.css";
|
||||
import InfiniteLoading from "v3-infinite-loading";
|
||||
import { onMounted, reactive, ref, nextTick } from "vue";
|
||||
import backTop from "@/assets/svg/back_top.svg?component";
|
||||
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
|
||||
|
||||
const options = reactive({
|
||||
// 唯一key值
|
||||
rowKey: "id",
|
||||
// 卡片之间的间隙
|
||||
gutter: 10,
|
||||
// 是否有周围的gutter
|
||||
hasAroundGutter: true,
|
||||
// 卡片在PC上的宽度
|
||||
width: 320,
|
||||
// 自定义行显示个数，主要用于对移动端的适配
|
||||
breakpoints: {
|
||||
1200: {
|
||||
// 当屏幕宽度小于等于1200
|
||||
rowPerView: 4
|
||||
},
|
||||
800: {
|
||||
// 当屏幕宽度小于等于800
|
||||
rowPerView: 3
|
||||
},
|
||||
500: {
|
||||
// 当屏幕宽度小于等于500
|
||||
rowPerView: 2
|
||||
}
|
||||
},
|
||||
// 动画效果 https://animate.style/
|
||||
animationEffect: "animate__zoomInUp",
|
||||
// 动画时间
|
||||
animationDuration: 1000,
|
||||
// 动画延迟
|
||||
animationDelay: 300,
|
||||
// 背景色
|
||||
// backgroundColor: "#2C2E3A",
|
||||
// 图片字段选择器，如果层级较深，使用 xxx.xxx.xxx 方式
|
||||
imgSelector: "src.original",
|
||||
// 加载配置
|
||||
loadProps: {
|
||||
loading,
|
||||
error
|
||||
},
|
||||
// 是否懒加载
|
||||
lazyload: true
|
||||
});
|
||||
|
||||
const page = ref(1);
|
||||
const list = ref([]);
|
||||
const pageSize = ref();
|
||||
const loadingInstance = ref();
|
||||
|
||||
/** 加载更多 */
|
||||
function handleLoadMore() {
|
||||
loadingInstance.value = ElLoading.service({
|
||||
target: ".content",
|
||||
background: "transparent",
|
||||
text: "加载中"
|
||||
});
|
||||
getList({
|
||||
page: page.value,
|
||||
pageSize: pageSize.value
|
||||
}).then(res => {
|
||||
setTimeout(() => {
|
||||
list.value.push(...res);
|
||||
page.value += 1;
|
||||
nextTick(() => {
|
||||
loadingInstance.value.close();
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete(item, index) {
|
||||
list.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function handleClick(item) {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleLoadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-scrollbar max-height="calc(100vh - 120px)" class="content">
|
||||
<Waterfall :list="list" v-bind="options">
|
||||
<template #item="{ item, url, index }">
|
||||
<div
|
||||
class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<LazyImg
|
||||
:url="url"
|
||||
class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
|
||||
<h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
|
||||
{{ item.name }}
|
||||
</h4>
|
||||
<div
|
||||
class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
|
||||
>
|
||||
<div class="text-gray-50">$ {{ item.price }}</div>
|
||||
<div>
|
||||
<button
|
||||
class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
|
||||
@click.stop="handleDelete(item, index)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
|
||||
<!-- <div class="flex justify-center py-10">
|
||||
<button
|
||||
class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
|
||||
@click="handleLoadMore"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<el-backtop
|
||||
title="回到顶部"
|
||||
:right="35"
|
||||
:bottom="50"
|
||||
:visibility-height="400"
|
||||
target=".content .el-scrollbar__wrap"
|
||||
>
|
||||
<backTop />
|
||||
</el-backtop>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.el-loading-spinner .el-loading-text) {
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
BIN
Yi.Pure.Vue3/src/views/components/waterfall/loading.png
Normal file
BIN
Yi.Pure.Vue3/src/views/components/waterfall/loading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Reference in New Issue
Block a user