113 lines
2.2 KiB
Vue
113 lines
2.2 KiB
Vue
<template>
|
|
<n-dropdown
|
|
trigger="click"
|
|
:options="getOptions"
|
|
class="dropdown-icon"
|
|
@select="handleSelect"
|
|
>
|
|
<n-input placeholder="" readonly>
|
|
<template #prefix>
|
|
<n-icon
|
|
v-for="(item,index) in getOptions"
|
|
v-show="item.key === selectIcon"
|
|
:key="index"
|
|
color="#111111"
|
|
:component="item.component"
|
|
size="24"
|
|
/>
|
|
</template>
|
|
</n-input>
|
|
</n-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive, toRefs, h, computed } from 'vue'
|
|
import { NIcon } from 'naive-ui'
|
|
import Icons from './tools/icon.js'
|
|
export default {
|
|
name: 'IconBoard',
|
|
props: {
|
|
selected: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
emits: ['update:selected'],
|
|
|
|
setup(props, { emit }) {
|
|
const data = reactive({
|
|
selectIcon: props.selected
|
|
})
|
|
const renderOption = ({ node, option }) => {
|
|
return h(NIcon, {
|
|
class: 'board-icon',
|
|
size: 24,
|
|
onClick: () => {
|
|
console.log(option.key)
|
|
}
|
|
},
|
|
{ default: () => h(option.key) })
|
|
}
|
|
|
|
const getOptions = computed(() => {
|
|
const options = Icons.map((item, index) => {
|
|
const object = {
|
|
key: `icon_${item.name}`,
|
|
component: item,
|
|
icon: function icon() {
|
|
return h(NIcon, {
|
|
class: 'board-icon',
|
|
color: '#111111',
|
|
size: 24 }, {
|
|
default: () => h(item)
|
|
})
|
|
}
|
|
}
|
|
return object
|
|
})
|
|
return options
|
|
})
|
|
|
|
const nodeProps = (option) => {
|
|
return {
|
|
class: 'dropdown__icon',
|
|
style: {
|
|
display: 'inline-block'
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleSelect(key) {
|
|
data.selectIcon = key
|
|
emit('update:selected', key)
|
|
}
|
|
|
|
return {
|
|
...toRefs(data),
|
|
Icons,
|
|
renderOption,
|
|
getOptions,
|
|
nodeProps,
|
|
handleSelect
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style lang='scss'>
|
|
.v-binder-follower-content{
|
|
.dropdown-icon{
|
|
width: 510px;
|
|
padding: 5px 15px;
|
|
.n-dropdown-option{
|
|
display: inline-block;
|
|
padding: 6px;
|
|
}
|
|
.n-dropdown-option-body__suffix{
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|