watt-pc-ui

Watt-framework

介绍

瓦特（WATT）开发自用UI库，PC端内的UI组件库，只为PC端适配，尽少控制包体大小，能快速适用于watt内部产品的使用。

使用说明

• [x] 支持cdn
• [x] es module全局使用
• [x] 按需引入

字体使用了 iconfont.cn 的免费方案，字体列表
可以查找已有的图标进行使用

CDN引用方式

暂不支持官方CDN,用户可自行上传到 cdn 服务器使用

全局使用

全局引入方式，与其他的包一样进行引用

import WattPCUI from 'wattpc-ui'
import 'wattpc-ui/dist/style.css'
Vue.use(WattPCUI)

按需引入

在vue3 中使用, 可以在.vue的页面组件或组件中使用

<script setup>
import { createApp } from 'vue'
import App from './App.vue'
import { WattUpload } from 'wattpc-ui'
import 'wattpc-ui/dist/style.css'

const app = createApp(App)

const WattUI = { WattUpload }
Object.keys(WattUI).forEach(key => {
    app.component(key, WattUI[key])
})

app.mount('#app')
</script>

在vue3 中api components 方式

<template>
    <div>
        <watt-upload 
            v-model="bannerFile" 
            :bus-type="6" 
            :max-length="1" 
            :file-rules="{ width: 1280, height: 400 }" 
            media-type="image" 
            accept="image/*" />
    </div>
</template>
<script>
import { ref } from 'vue'
import { WattUpload } from 'wattpc-ui'
import 'wattpc-ui/dist/style.css'

export default {
    components: { WattUpload }
    setup() {
        const bannerFile = ref([])
        return {
            bannerFile
        }
    }
}
</script>

优化

iconfont 字体用自已的cdn（阿里不让用），减小包的体积

//static.jsvue.cn//common/css/font_3824242_44szmkjzzcn.css