添加网址导航-自定义网址导航-文字和背景选择样式优化（参考备注）
This commit is contained in:
expdsn
parent
c8be06730d
commit
cc46aafb3b
|
|
@ -15,6 +15,7 @@ import { AddToToken } from './AdderPage'
|
|||
import DefaultImg from '/tab/icons/bgGameCloud.png'
|
||||
import useAdderPageStore, { type EditBlockItemType } from './useAdderPageStore'
|
||||
import useRouterStore from '@/useRouterStore'
|
||||
import NativeColorPicker from '@/utils/NativeColorPicker'
|
||||
addIcons(MdUpload, MdImage, MdCheck)
|
||||
|
||||
const TypeSelector = defineComponent({
|
||||
|
|
@ -171,6 +172,20 @@ export default defineComponent(() => {
|
|||
if (val.name) form.name = val.name
|
||||
if (val.icon) form.icon = val.icon
|
||||
})
|
||||
watch(
|
||||
() => form.type,
|
||||
(cur, pre) => {
|
||||
if (cur === 1) {
|
||||
if (!form.name) {
|
||||
globalToast.error('文字图标请至少填写文字或者名称')
|
||||
form.type = pre
|
||||
return
|
||||
} else {
|
||||
form.text = form.name.substring(0, 2).toLocaleUpperCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
const addTo = inject(AddToToken)
|
||||
return () => (
|
||||
<div
|
||||
|
|
@ -179,25 +194,24 @@ export default defineComponent(() => {
|
|||
(isGame.value ? 'bg-white/20' : 'bg-white/70')
|
||||
}
|
||||
>
|
||||
<Form labelCol={{ span: 4 }} labelAlign="left">
|
||||
<Form.Item label="地址">
|
||||
<InputGroup compact style="display:flex">
|
||||
<Input
|
||||
v-model:value={form.link}
|
||||
placeholder="搜索想要添加的网址导航"
|
||||
class="w-0 flex-grow"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
debounced.value = debounced.value + ' '
|
||||
}}
|
||||
>
|
||||
获取地址
|
||||
</Button>
|
||||
</InputGroup>
|
||||
<Form>
|
||||
<Form.Item label="地址" class={'relative'}>
|
||||
<Input
|
||||
v-model:value={form.link}
|
||||
placeholder="搜索想要添加的网址导航"
|
||||
class={isGame?.value ? '' : ' bg-black/10 '}
|
||||
/>
|
||||
<span
|
||||
class={'absolute right-[-70px] top-1/2 -translate-y-1/2 cursor-pointer'}
|
||||
onClick={() => {
|
||||
debounced.value = debounced.value + ' '
|
||||
}}
|
||||
>
|
||||
获取地址
|
||||
</span>
|
||||
</Form.Item>
|
||||
<Form.Item label="名称">
|
||||
<Input v-model:value={form.name} />
|
||||
<Input v-model:value={form.name} class={isGame?.value ? '' : ' bg-black/10 '} />
|
||||
</Form.Item>
|
||||
<Form.Item label="图标">
|
||||
<TypeSelector
|
||||
|
|
@ -211,38 +225,29 @@ export default defineComponent(() => {
|
|||
</Form.Item>
|
||||
{form.type === 1 && (
|
||||
<>
|
||||
<div class="flex">
|
||||
<Form.Item
|
||||
label="文字颜色"
|
||||
class="w-0 flex-grow"
|
||||
labelCol={{
|
||||
span: 8
|
||||
<Form.Item label="图标背景">
|
||||
<NativeColorPicker
|
||||
size={30}
|
||||
colorList={[
|
||||
'rgb(227, 127, 53)',
|
||||
'rgb(239, 195, 57)',
|
||||
'rgb(65, 201, 117)',
|
||||
'rgb(67, 195, 195)',
|
||||
'rgb(97, 182, 255)',
|
||||
'rgb(153, 91, 179)'
|
||||
]}
|
||||
value={form.background}
|
||||
onUpdate:value={(e) => {
|
||||
form.background = e
|
||||
}}
|
||||
>
|
||||
<ColorPicker
|
||||
class="shadow-lg"
|
||||
format="rgb"
|
||||
shape="square"
|
||||
v-model:pureColor={form.color}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="图标背景"
|
||||
class="w-0 flex-grow"
|
||||
labelCol={{
|
||||
span: 8
|
||||
}}
|
||||
>
|
||||
<ColorPicker
|
||||
class="shadow-lg"
|
||||
format="rgb"
|
||||
shape="square"
|
||||
v-model:pureColor={form.background}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
></NativeColorPicker>
|
||||
</Form.Item>
|
||||
<Form.Item label="图标文字">
|
||||
<Input v-model:value={form.text} maxlength={2} />
|
||||
<Input
|
||||
v-model:value={form.text}
|
||||
maxlength={2}
|
||||
class={isGame?.value ? '' : ' bg-black/10 '}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,76 +1,82 @@
|
|||
import clsx from "clsx";
|
||||
import { computed } from "vue";
|
||||
import { defineComponent } from "vue";
|
||||
import { MdCheck } from "oh-vue-icons/icons";
|
||||
import { addIcons, OhVueIcon } from "oh-vue-icons";
|
||||
import clsx from 'clsx'
|
||||
import { computed } from 'vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { MdCheck } from 'oh-vue-icons/icons'
|
||||
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
||||
addIcons(MdCheck)
|
||||
export default defineComponent({
|
||||
name: "NativeColorPicker",
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
colorList: {
|
||||
type: Array<string>
|
||||
},
|
||||
class: {
|
||||
type: String,
|
||||
},
|
||||
transparent: {
|
||||
type: Boolean,
|
||||
},
|
||||
firstColor: {
|
||||
type: String,
|
||||
|
||||
}
|
||||
name: 'NativeColorPicker',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
emits: {
|
||||
"update:value": (_value: string) => true,
|
||||
colorList: {
|
||||
type: Array<string>
|
||||
},
|
||||
setup(props, context) {
|
||||
const firstColor = props.value
|
||||
const colorList = computed(() => {
|
||||
let list = [
|
||||
'#ffffff',
|
||||
'#000000',
|
||||
'#FA9B3F',
|
||||
'#333333',
|
||||
'#6D7278',
|
||||
'#D8D8D8',
|
||||
'#0091FF',
|
||||
'#B620E0',
|
||||
'#F31260'
|
||||
]
|
||||
if (props.colorList) {
|
||||
list = props.colorList
|
||||
}
|
||||
if (props.transparent) {
|
||||
list.push('transparent')
|
||||
}
|
||||
if (!list.includes(firstColor)) {
|
||||
list.unshift(firstColor)
|
||||
}
|
||||
return list
|
||||
})
|
||||
return () => <div class={clsx("flex items-center gap-x-2 ", props.class)}>
|
||||
{
|
||||
colorList.value.map((item, index) => < div
|
||||
key={index}
|
||||
onClick={() => context.emit('update:value', item)}
|
||||
class="text-[12px] cursor-pointer w-[20px] h-[20px] shadow-[0_0_2px_#999] rounded-full"
|
||||
style={{
|
||||
backgroundColor: item === 'transparent' ? '' : item,
|
||||
backgroundImage:
|
||||
item === 'transparent'
|
||||
? `linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%),
|
||||
class: {
|
||||
type: String
|
||||
},
|
||||
transparent: {
|
||||
type: Boolean
|
||||
},
|
||||
firstColor: {
|
||||
type: String
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 20
|
||||
}
|
||||
},
|
||||
emits: {
|
||||
'update:value': (_value: string) => true
|
||||
},
|
||||
setup(props, context) {
|
||||
const firstColor = props.value
|
||||
const colorList = computed(() => {
|
||||
let list = [
|
||||
'#ffffff',
|
||||
'#000000',
|
||||
'#FA9B3F',
|
||||
'#333333',
|
||||
'#6D7278',
|
||||
'#D8D8D8',
|
||||
'#0091FF',
|
||||
'#B620E0',
|
||||
'#F31260'
|
||||
]
|
||||
if (props.colorList) {
|
||||
list = props.colorList
|
||||
}
|
||||
if (props.transparent) {
|
||||
list.push('transparent')
|
||||
}
|
||||
if (!list.includes(firstColor)) {
|
||||
list.unshift(firstColor)
|
||||
}
|
||||
return list
|
||||
})
|
||||
return () => (
|
||||
<div class={clsx('flex items-center gap-x-2 ', props.class)}>
|
||||
{colorList.value.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => context.emit('update:value', item)}
|
||||
class="text-[12px] cursor-pointer w-[20px] h-[20px] flex items-center justify-center shadow-[0_0_2px_#999] rounded-full"
|
||||
style={{
|
||||
width: props.size + 'px',
|
||||
height: props.size + 'px',
|
||||
backgroundColor: item === 'transparent' ? '' : item,
|
||||
backgroundImage:
|
||||
item === 'transparent'
|
||||
? `linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%),
|
||||
linear-gradient(45deg,rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%)`
|
||||
: '',
|
||||
backgroundPosition: item === 'transparent' ? '0 0, 2px 2px' : '',
|
||||
backgroundSize: item === 'transparent' ? '4px 4px' : ''
|
||||
}}
|
||||
>
|
||||
{/* <Checkmark16Filled
|
||||
: '',
|
||||
backgroundPosition: item === 'transparent' ? '0 0, 2px 2px' : '',
|
||||
backgroundSize: item === 'transparent' ? '4px 4px' : ''
|
||||
}}
|
||||
>
|
||||
{/* <Checkmark16Filled
|
||||
class="text-[#888]"
|
||||
: class="props.modelValue === item ? '' : 'hidden'"
|
||||
: style="{
|
||||
|
|
@ -78,32 +84,34 @@ export default defineComponent({
|
|||
}"
|
||||
>
|
||||
</Checkmark16Filled> */}
|
||||
{
|
||||
props.value === item &&
|
||||
<OhVueIcon class="text-[#888]" name={MdCheck.name} ></OhVueIcon>
|
||||
{props.value === item && (
|
||||
<OhVueIcon class="text-[#888]" name={MdCheck.name}></OhVueIcon>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
}
|
||||
</div >)
|
||||
}
|
||||
|
||||
<div
|
||||
class="text-[12px] cursor-pointer w-[20px] h-[20px] shadow-[0_0_2px_#999] rounded-full relative"
|
||||
>
|
||||
<div
|
||||
class="w-full h-full rounded-full cursor-pointer"
|
||||
style="background: conic-gradient(#dd0010, yellow, green, #0091ff, red)"
|
||||
>
|
||||
<input
|
||||
|
||||
onInput={(e: any)=> {
|
||||
context.emit('update:value', e?.target.value)
|
||||
}}
|
||||
ref="inputRef"
|
||||
type="color"
|
||||
style="opacity: 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
}
|
||||
})
|
||||
<div
|
||||
class="text-[12px] cursor-pointer shadow-[0_0_2px_#999] rounded-full relative"
|
||||
style={{
|
||||
width: props.size + 'px',
|
||||
height: props.size + 'px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="w-full h-full rounded-full cursor-pointer"
|
||||
style="background: conic-gradient(#dd0010, yellow, green, #0091ff, red)"
|
||||
>
|
||||
<input
|
||||
onInput={(e: any) => {
|
||||
context.emit('update:value', e?.target.value)
|
||||
}}
|
||||
ref="inputRef"
|
||||
type="color"
|
||||
style="opacity: 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
components: {
|
||||
|
||||
Slider: {
|
||||
railSize: 6
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue