|
@@ -0,0 +1,172 @@
|
|
|
+<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: "",
|
|
|
+ text: "Default"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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" size="small">
|
|
|
+ <el-radio label="large">大尺寸</el-radio>
|
|
|
+ <el-radio label="default">默认尺寸</el-radio>
|
|
|
+ <el-radio label="small">小尺寸</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-space>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <p class="mb-2">基础按钮</p>
|
|
|
+ <el-radio-group v-model="baseTag" class="mb-3">
|
|
|
+ <el-radio label="dark" />
|
|
|
+ <el-radio label="light" />
|
|
|
+ <el-radio label="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>
|