mirroring/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2024-11-01 06:02:38 +08:00
Code Issues Projects Releases Wiki Activity

添加组件示例

Browse Source
This commit is contained in:
icssoa 2022-05-16 14:02:44 +08:00
parent 537cd2f708
commit bc30b0d891
8 changed files with 264 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "front-next",
"version": "5.1.4",
"version": "5.1.5",
"scripts": {
"dev": "vite --host",
"build": "vite build",

80
src/modules/demo/components/demo/context-menu.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<div class="scope">
<div class="h">
<span>cl-context-menu</span>
右键菜单
</div>
<div class="c">
<el-button @contextmenu.stop.prevent="open">右键点击</el-button>
</div>
<div class="f">
<span class="date">2019/10/23</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { ContextMenu } from "@cool-vue/crud";
import { ElMessage } from "element-plus";
function open(e: any) {
ContextMenu.open(e, {
list: [
{
label: "新增",
suffixIcon: "el-icon-plus",
callback(done) {
ElMessage.info("点击了新增");
done();
}
},
{
label: "编辑",
suffixIcon: "el-icon-edit",
callback(done) {
ElMessage.info("点击了编辑");
done();
}
},
{
label: "删除",
suffixIcon: "el-icon-delete"
},
{
label: "二级",
suffixIcon: "el-icon-right",
children: [
{
label: "文本超出隐藏，有一天晚上",
ellipsis: true
},
{
label: "禁用",
disabled: true
},
{
label: "更多",
callback(done) {
ElMessage.warning("开发中");
done();
}
}
]
}
]
});
}
</script>
<style lang="scss" scoped>
.scope {
.btn {
border: 1px solid #dcdfe6;
font-size: 13px;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
}
</style>

27
src/modules/demo/components/demo/copy.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="scope">
<div class="h">
<span>v-copy</span>
复制到剪贴板
</div>
<div class="c">
<el-button @click="toCopy"> https://cool-js.com 点击复制</el-button>
</div>
<div class="f">
<span class="date">2019/09/25</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { useClipboard } from "@vueuse/core";
import { ElMessage } from "element-plus";
const { copy } = useClipboard();
function toCopy() {
copy("https://cool-js.com");
ElMessage.success("保存成功");
}
</script>

14
src/modules/demo/components/demo/crud.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="scope">
<div class="h">
<span>cl-crud</span>
增删改查，加强
</div>
<div class="c">
<router-link to="/crud">传送门</router-link>
</div>
<div class="f">
<span class="date">2019/09/25</span>
</div>
</div>
</template>

14
src/modules/demo/components/demo/editor-quill.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="scope">
<div class="h">
<span>cl-editor-quill</span>
Quill 富文本编辑器
</div>
<div class="c">
<router-link to="/editor-quill">传送门</router-link>
</div>
<div class="f">
<span class="date">2019/11/07</span>
</div>
</div>
</template>

22
src/modules/demo/components/demo/svg.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="scope">
<div class="h">
<span>icon-svg</span>
svg图片库
</div>
<div class="c _svg">
<el-tooltip v-for="(item, index) in list" :key="index" content="icon-like">
<icon-svg :size="18" :name="`icon-${item}`" />
</el-tooltip>
</div>
<div class="f">
<span class="date">2019/09/25</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const list = ref(["like", "video", "rank", "menu", "favor"]);
</script>

14
src/modules/demo/components/demo/upload.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="scope">
<div class="h">
<span>cl-upload</span>
图片上传
</div>
<div class="c">
<router-link to="/upload">传送门</router-link>
</div>
<div class="f">
<span class="date">2019/09/25</span>
</div>
</div>
</template>

92
src/modules/demo/views/demo.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div class="demo scroller1">
<el-row :gutter="10">
<el-col v-for="(item, index) in list" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
<component :is="item" />
</el-col>
</el-row>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import ContextMenu from "../components/demo/context-menu.vue";
import Crud from "../components/demo/crud.vue";
import Upload from "../components/demo/upload.vue";
import EditorQuill from "../components/demo/editor-quill.vue";
import Svg from "../components/demo/svg.vue";
import Copy from "../components/demo/copy.vue";
const list = ref([ContextMenu, Crud, Upload, EditorQuill, Svg, Copy]);
</script>
<style lang="scss">
.demo {
.scope {
background-color: #fff;
border-radius: 3px;
margin-bottom: 10px;
.h {
height: 30px;
display: flex;
align-items: center;
padding: 10px;
font-size: 12px;
span {
background-color: var(--color-primary);
color: #fff;
border-radius: 3px;
padding: 2px 5px;
margin-right: 10px;
font-size: 14px;
letter-spacing: 1px;
}
}
.c {
padding: 10px;
height: 50px;
box-sizing: border-box;
&._svg {
.icon-svg {
margin-right: 15px;
}
}
a {
font-size: 13px;
color: #666;
position: relative;
&:hover {
&:after {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: -2px;
left: 0;
background-color: var(--color-primary);
}
}
}
}
.f {
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
font-size: 12px;
.date {
color: #999;
}
}
}
}
</style>