搜索结果列表页面开发

src/components/Copy/README.md

@@ -0,0 +1,15 @@
+### Props
+
+| 参数        | 说明                          | 类型      | 可选值       | 默认值   |
+|-----------|-----------------------------|---------|-----------|-------|
+| content   | 需要被复制的内容，复制优先级比插槽内容要高       | string  | —         | ''    |
+| always?   | 是否一直显示复制按钮                  | boolean | —         | false |
+| showText? | 是否显示文案，插槽内容的显示优先级比content要高 | boolean | —         | true  |
+| size?     | 图标的size                     | string  | —         | '20px' |
+
+### Slots
+
+| 参数       | 说明          |
+|----------|-------------|
+| default  | 文本插槽        |
+| icon   | 复制按钮位置对应的插槽 |

src/components/Copy/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="g-copy">
+    <div v-show="showText" ref="copyTextRef" class="g-copy-text">
+      <slot>{{ content }}</slot>
+    </div>
+    <div v-show="!showText || always" @click="onCopy">
+      <slot name="icon">
+        <d-tooltip :content="tooltip" :disabled="disableTootip" :mouse-enter-delay="800">
+          <Icon name="gt-copy" :operable="true" :size="size" />
+        </d-tooltip>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'copy'
+};
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Message } from 'vue-devui/message';
+import { useClipboard } from '@vueuse/core';
+
+const props = withDefaults(defineProps<{
+  content: string;
+  always?: boolean;
+  showText?: boolean;
+  size?: string;
+  tooltip?: string,
+  disableTootip?: boolean
+}>(), {
+  content: '',
+  always: false,
+  showText: true,
+  size: '18px',
+  tooltip: '复制'
+});
+
+const copyTextRef = ref<HTMLElement | null>(null);
+
+const text = ref<string>(props.content);
+
+const { copy, copied } = useClipboard({ source: text, legacy: true });
+
+const onCopy = () => {
+  text.value = props.content || (copyTextRef.value ? copyTextRef.value.innerText : '');
+  copy(text.value);
+};
+
+watch(() => copied.value, (val) => {
+  if (val) {
+    Message({
+      type: 'success',
+      message: '复制成功'
+    });
+  }
+});
+
+</script>
+
+<style scoped lang="scss">
+.g-copy {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-light);
+  &:hover {
+    .g-copy-trigger {
+      display: block !important;
+    }
+  }
+  &-text {
+    margin-right: 8px;
+  }
+  &-trigger {
+    text-align: center;
+    display: flex;
+    &:hover {
+      cursor: pointer;
+      opacity: 0.6;
+    }
+    &-border {
+      width: 24px;
+      height: 24px;
+      border-radius: 3px;
+      margin-left: 6px;
+      border: 1px solid var(--color-border);
+    }
+  }
+  :deep(.icon){
+    color: var(--color-CG500)!important;
+    margin: 0 auto ;
+  }
+  &.border-0 {
+    .g-copy-trigger {
+      border: none;
+    }
+  }
+  &.m-0 {
+    .g-copy-trigger {
+      margin: 0;
+    }
+  }
+}
+</style>