mzkj
/
edu
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增组件示例

This commit is contained in:
Jason 2023-01-10 11:09:05 +08:00
parent 21866eb315
commit b081a2b3e5
10 changed files with 329 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
admin/src/views/template/component/file.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div>
<el-card header="基础使用" shadow="none" class="!border-none">
<div class="flex flex-wrap">
<div class="flex m-4">
<div class="mr-4">选择图片：</div>
<material-picker v-model="state.value1" />
</div>
<div class="flex m-4">
<div class="mr-4">选择视频：</div>
<material-picker type="video" v-model="state.value3" />
</div>
<div class="flex flex-1 m-4">
<div class="mr-4">多张图片：</div>
<div class="flex-1">
<!-- 外层需要有足够的宽度，这样预览图和选择按钮才不会直接换行 -->
<material-picker :limit="4" v-model="state.value2" />
</div>
</div>
</div>
</el-card>
<el-card header="进阶用法" shadow="none" class="!border-none mt-4">
<div class="flex flex-wrap">
<div class="flex m-4">
<div class="mr-4">自定义选择器大小：</div>
<material-picker size="60px" v-model="state.value4" />
</div>
<div class="flex m-4">
<div class="mr-4">使用插槽：</div>
<material-picker v-model="state.value5">
<template #upload>
<el-button>选择文件</el-button>
</template>
</material-picker>
</div>
<div class="flex m-4">
<div class="mr-4">选出地址不带域名：</div>
<material-picker :exclude-domain="true" v-model="state.value6" />
</div>
</div>
<div>
<div class="flex m-4 items-center">
<div class="w-20 flex-none">带域名：</div>
<el-input class="w-[500px]" :model-value="state.value5" />
</div>
<div class="flex m-4 items-center">
<div class="w-20 flex-none">不带域名：</div>
<el-input class="w-[500px]" :model-value="state.value6" />
</div>
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
const state = reactive({
value1: '',
value2: [],
value3: '',
value4: '',
value5: '',
value6: ''
})
</script>

64
admin/src/views/template/component/icon.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<div>
<el-card header="element-plus图标" shadow="none" class="!border-none">
<div class="flex items-center">
<icon class="m-4" :size="24" name="el-icon-Search" />
<icon class="m-4" :size="24" name="el-icon-Plus" />
<icon class="m-4" :size="24" name="el-icon-FullScreen" />
<icon class="m-4" :size="24" name="el-icon-Setting" />
<icon class="m-4" :size="24" name="el-icon-Warning" />
</div>
</el-card>
<el-card header="本地图标" shadow="none" class="!border-none mt-4">
<div class="flex items-center">
<icon class="m-4" :size="24" name="local-icon-baoxian" />
<icon class="m-4" :size="24" name="local-icon-youhui" />
<icon class="m-4" :size="24" name="local-icon-daiyunying" />
<icon class="m-4" :size="24" name="local-icon-diancanshezhi" />
<icon class="m-4" :size="24" name="local-icon-dianzifapiao" />
</div>
</el-card>
<el-card header="图标选择器" shadow="none" class="!border-none mt-4">
<div class="flex items-center">
<icon-picker v-model="state.value" />
</div>
</el-card>
<el-card
header="element-plus图标库大全（点击复制图标名称）"
shadow="none"
class="!border-none mt-4"
>
<div class="flex items-center">
<div class="flex flex-wrap">
<div v-for="item in getElementPlusIconNames()" :key="item" class="m-1">
<el-button v-copy="item">
<icon :name="item" :size="20" />
</el-button>
</div>
</div>
</div>
</el-card>
<el-card
header="本地图标库大全（点击复制图标名称）"
shadow="none"
class="!border-none mt-4"
>
<div class="flex items-center">
<div class="flex flex-wrap">
<div v-for="item in getLocalIconNames()" :key="item" class="m-1">
<el-button v-copy="item">
<icon :name="item" :size="20" />
</el-button>
</div>
</div>
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
import Icon from '@/components/icon/index.vue'
import { getElementPlusIconNames, getLocalIconNames } from '@/components/icon'
const state = reactive({
value: ''
})
</script>

12
admin/src/views/template/component/link.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<div>
<el-card header="基础使用" shadow="none" class="!border-none">
<link-picker v-model="state.value1" />
</el-card>
</div>
</template>
<script lang="ts" setup>
const state = reactive({
value1: {}
})
</script>

9
admin/src/views/template/component/overflow.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div>
<el-card header="基础使用" shadow="none" class="!border-none">
<overflow-tooltip class="w-20 m-4" content="超出自动打点，悬浮弹窗显示全部内容" />
<overflow-tooltip class="w-60 m-4" content="超出自动打点，悬浮弹窗显示全部内容" />
</el-card>
</div>
</template>
<script lang="ts" setup></script>

48
admin/src/views/template/component/popover_input.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div>
<el-card header="基础使用" shadow="none" class="!border-none">
<div class="flex flex-wrap">
<div class="m-4">
<popover-input @confirm="onConfirm">
<template #default>
<el-button> 点击输入 </el-button>
</template>
</popover-input>
</div>
<div class="m-4">
<popover-input type="number" @confirm="onConfirm">
<template #default>
<el-button> 输入数字 </el-button>
</template>
</popover-input>
</div>
<div class="m-4">
<popover-input size="small" @confirm="onConfirm">
<template #default>
<el-button> 调整大小 </el-button>
</template>
</popover-input>
</div>
<div class="m-4">
<popover-input :limit="20" :show-limit="true" @confirm="onConfirm">
<template #default>
<el-button> 限制输入长度 </el-button>
</template>
</popover-input>
</div>
<div class="m-4">
<popover-input value="默认值" @confirm="onConfirm">
<template #default>
<el-button> 默认值 </el-button>
</template>
</popover-input>
</div>
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
const onConfirm = (value: string) => {
console.log(value)
}
</script>

16
admin/src/views/template/component/rich_text.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div>
<el-card header="基础使用" shadow="none" class="!border-none">
<editor v-model="state.value1" height="500px" />
</el-card>
<el-card header="简洁模式" shadow="none" class="!border-none mt-4">
<editor v-model="state.value2" height="500px" mode="simple" />
</el-card>
</div>
</template>
<script lang="ts" setup>
const state = reactive({
value1: '',
value2: ''
})
</script>

65
admin/src/views/template/component/upload.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div>
<el-card header="基础使用" shadow="none" class="!border-none">
<div class="flex flex-wrap">
<div class="m-4">
<upload
@change="onChange"
@success="onSuccess"
@error="onError"
:show-progress="true"
>
<el-button type="primary">上传图片</el-button>
</upload>
</div>
<div class="m-4">
<upload
type="video"
@change="onChange"
@success="onSuccess"
@error="onError"
:show-progress="true"
>
<el-button type="primary">上传视频</el-button>
</upload>
</div>
<div class="m-4">
<upload
:multiple="false"
@change="onChange"
@success="onSuccess"
@error="onError"
:show-progress="true"
>
<el-button type="primary">取消多选</el-button>
</upload>
</div>
<div class="m-4">
<upload
:limit="2"
@change="onChange"
@success="onSuccess"
@error="onError"
:show-progress="true"
>
<el-button type="primary">一次最多上传2张</el-button>
</upload>
</div>
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
import Upload from '@/components/upload/index.vue'
const onChange = (file: any) => {
console.log('上传文件的状态发生改变', file)
}
const onSuccess = (file: any) => {
console.log('上传文件成功', file)
}
const onError = (file: any) => {
console.log('上传文件失败', file)
}
</script>

2
pc/layouts/components/header/information.vue
View File

@ -11,7 +11,7 @@
<el-dropdown-menu>
<NuxtLink
:to="{
path: '/information/default',
path: '/information/search',
query: {
cid: item.id,
name: item.name

3
pc/layouts/components/header/navbar.vue
View File

@ -19,9 +19,6 @@
<template v-if="item.component == 'mobile'">
<Mobile :menu-item="item" />
</template>
<template v-if="item.component == 'admin'">
<Admin :menu-item="item" />
</template>
</div>
</template>
</Menu>

96
pc/pages/information/[source]/index.vue
View File

@ -6,42 +6,44 @@
</span>
<span v-else>{{ route.query.name || getSourceText }}</span>
</div>
<div
class="bg-white px-5 rounded overflow-hidden"
v-if="data.lists.length"
>
<div class="pt-5 text-tx-secondary" v-if="route.query.keywords">
为您找到相关结果 {{ data.count }}个
<div v-loading="pending">
<div
class="bg-white px-5 rounded overflow-hidden"
v-if="data.lists.length"
>
<div class="pt-5 text-tx-secondary" v-if="route.query.keywords">
为您找到相关结果 {{ data.count }}个
</div>
<InformationItems
v-for="item in data.lists"
:key="item.id"
:id="item.id"
:title="item.title"
:desc="item.desc"
:click="item.click"
:author="item.author"
:create-time="item.create_time"
:image="item.image"
:only-title="false"
/>
<div class="py-4 flex justify-end">
<el-pagination
v-model:current-page="params.page_no"
:total="data.count"
:page-size="params.page_size"
hide-on-single-page
@current-change="refresh()"
/>
</div>
</div>
<InformationItems
v-for="item in data.lists"
:key="item.id"
:id="item.id"
:title="item.title"
:desc="item.desc"
:click="item.click"
:author="item.author"
:create-time="item.create_time"
:image="item.image"
:only-title="false"
/>
<div class="py-4 flex justify-end">
<el-pagination
v-model:current-page="params.page_no"
:total="data.count"
:page-size="params.page_size"
hide-on-single-page
@current-change="refresh()"
<div v-else class="flex-1 flex justify-center items-center">
<el-empty
:image="empty_news"
description="暂无资讯"
:image-size="250"
/>
</div>
</div>
<div v-else class="flex-1 flex justify-center items-center">
<el-empty
:image="empty_news"
description="暂无资讯"
:image-size="250"
/>
</div>
</div>
</template>
<script lang="ts" setup>
@ -49,16 +51,24 @@ import { ElPagination, ElEmpty } from 'element-plus'
import empty_news from '@/assets/images/empty_news.png'
import { getArticleList } from '~~/api/news'
const route = useRoute()
const sort = computed(() =>
route.params.source == 'search' ? '' : route.params.source
)
const keyword = computed(() => route.query.keywords || '')
const cid = computed(() => route.query.cid || '')
const params = reactive({
page_no: 1,
page_size: 15,
keyword: route.query.keywords,
cid: route.query.cid || '',
sort: route.params.source
})
const { data, refresh } = await useAsyncData(() => getArticleList(params), {
initialCache: false
keyword,
cid,
sort
})
const { data, refresh, pending } = await useAsyncData(
() => getArticleList(params),
{
initialCache: false
}
)
const getSourceText = computed(() => {
switch (route.params.source) {
@ -71,12 +81,8 @@ const getSourceText = computed(() => {
}
})
watch(
() => route.query.keywords,
(value) => {
params.keyword = value as string
refresh()
}
)
watch([() => route.query.keywords, () => route.query.cid], () => {
refresh()
})
</script>
<style lang="scss" scoped></style>