73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import { ElMessageBox } from 'element-plus'
|
|
import { ref } from 'vue'
|
|
import IconLink from '@/components/icons/IconLink.vue'
|
|
|
|
const emit = defineEmits(['grabImage'])
|
|
const input = ref('')
|
|
const grabImage = () => {
|
|
// console.log(input.value)
|
|
// input.value && emit('grabImage', input.value)
|
|
|
|
const isOk = isValidURL(input.value)
|
|
|
|
if (isOk) {
|
|
emit('grabImage', input.value)
|
|
} else {
|
|
ElMessageBox({
|
|
type: 'error',
|
|
message: '请输入正确的链接'
|
|
})
|
|
}
|
|
}
|
|
|
|
const isValidURL = (url: string) => {
|
|
try {
|
|
const parsedURL = new URL(url)
|
|
const hostname = parsedURL.hostname
|
|
const domain = hostname.split('.').slice(-2).join('.')
|
|
return domain === 'vip.com'
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="vpShop-link">
|
|
<el-input
|
|
v-model="input"
|
|
placeholder="输入唯品会链接自动抓取图片"
|
|
size="large"
|
|
style="max-width: 580px; width: 100%; border: 1px solid #000000"
|
|
>
|
|
<template #prefix>
|
|
<IconLink />
|
|
</template>
|
|
<template #suffix>
|
|
<div class="grabButton" @click="grabImage">抓取图片</div>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.vpShop-link {
|
|
:deep(.el-input__wrapper) {
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.grabButton {
|
|
cursor: pointer;
|
|
color: #000000;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.grabButton {
|
|
cursor: pointer;
|
|
color: #000000;
|
|
}
|
|
</style>
|