princess-ui/packages/princess-ui

princess-ui

pnpm i princess-ui

安装

全部安装

import PrincessUI from "princess-ui"
import "princess-ui/theme-chalk/index.css"
...
app.use(PrincessUI)

按需使用 使用unplugin-vue-components插件

import Components from "unplugin-vue-components/vite"
import PrincessResolver from "princess-ui/PrincessResolver"
...
    Components({
        resolvers: [PrincessResolver()],
    }),
...

使用umd

• 全量使用

• 按需使用

<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/princess-ui@0.0.8-beta.3/lib/tree/index.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/princess-ui@0.0.8-beta.3/theme-chalk/ps-tree.css" rel="stylesheet">

<div id="app">
    <div>11</div>
    <div>{{value}}</div>
    <ps-tree :list="list">
        <template #default="{ data, deep }">
            <div :style="{
                    marginLeft: deep * 10 + 'px',
                    'position': 'relative',
                    zIndex: 10
                }">
                    {{ data.isFolder }}-{{ data.title }} 11-22 {{ deep * 10 + 'px' }}
             </div>
        </template>
    </ps-tree>
</div>
<script>
    const app = Vue.createApp({
        setup() {
            const list = Vue.ref(psTree.convertTreeData([
                {
                    key: 1,
                    title: "1",
                    children: [
                        {
                            key: 5,
                            title: "5",
                            children: []
                        },
                    ]
                },
                {
                    key: 2,
                    title: "2"
                },
                {
                    key: 3,
                    title: "3"
                },
            ]))
            return { 
            value: "123",
            list
            }
        }
    }).use(psTree).mount('#app')
</script>