mirror of
https://github.com/rustfs/console.git
synced 2026-08-30 17:14:47 +08:00
overtrue
d22e9e4690
- 修复了18个只有图标没有文字的按钮，提升用户体验和可访问性 - 为存储桶配置、对象管理、用户管理、策略管理、事件管理等页面的按钮添加了文字说明 - 所有修改都使用了已存在的翻译键值，确保国际化支持 - 包括编辑、删除、添加、设置等常用操作的按钮文案优化
61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import ClipboardJS from 'clipboard'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps({
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
copyIcon: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: false,
|
|
default: () => {
|
|
return `copy-input-${Math.random().toString(36).substring(2, 15)}`
|
|
},
|
|
},
|
|
})
|
|
|
|
const model = defineModel<string>()
|
|
|
|
const message = useMessage()
|
|
|
|
const clipboard = new ClipboardJS(props.copyIcon ? '#' + props.id + 'btn' : '#' + props.id + 'btn2')
|
|
clipboard.on('success', function (e) {
|
|
message.success(t('Copy Success'))
|
|
e.clearSelection()
|
|
})
|
|
|
|
// 这里成功的时候也响应error，所以这里也加上
|
|
clipboard.on('error', function (e) {
|
|
// 如果复制失败，则使用navigator.clipboard.writeText进行复制
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard.writeText(model.value || '')
|
|
}
|
|
message.success(t('Copy Success'))
|
|
})
|
|
onUnmounted(() => {
|
|
clipboard.destroy()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full">
|
|
<NInputGroup>
|
|
<n-input v-model:value="model" :readonly="props.readonly" :id="props.id" />
|
|
<n-input-group-label v-if="props.copyIcon" class="flex items-center cursor-pointer" :id="props.id + 'btn'" :data-clipboard-target="`#${props.id}`" :title="t('Copy')">
|
|
<Icon :size="25" name="ri:file-copy-line"></Icon>
|
|
</n-input-group-label>
|
|
<NButton type="primary" v-else :id="props.id + 'btn2'" :data-clipboard-target="`#${props.id}`">{{
|
|
t('Copy')
|
|
}}</NButton>
|
|
</NInputGroup>
|
|
</div>
|
|
</template>
|