添加组件示例

package.json

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

src/modules/demo/components/demo/context-menu.vue

@@ -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>

src/modules/demo/components/demo/copy.vue

@@ -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>

src/modules/demo/components/demo/crud.vue

@@ -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>

src/modules/demo/components/demo/editor-quill.vue

@@ -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>

src/modules/demo/components/demo/svg.vue

@@ -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>

src/modules/demo/components/demo/upload.vue

@@ -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>

src/modules/demo/views/demo.vue

@@ -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>