WattH5-UI

watt-framework 移动端组件

介绍

watth5 UI 是瓦特(WATT)的移动UI组件库，只为移动端适配，尽少控制包体大小，能快速适用于watt内部产品的使用。

使用说明

在vue3中使用，本组件必须先在项目安装 vant 4.1.2 版本以上

import { createApp } from 'vue'
import WattH5UI from 'watth5-ui'
import 'watth5-ui/style.css'
createApp(App).use(WattH5UI)

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import { MAuthcode } from 'watth5-ui'
import 'watth5-ui/dist/style.css'

const app = createApp(App)

const H5UI = { MAuthcode }
// 加载组件
Object.keys(H5UI).forEach(key => {
    app.component(key, H5UI[key])
})

app.mount('#app')

单文件使用

<template>
    <div>
        <m-authcode v-model:value="code" :length="6" gutter="16px" focused />
    </div>
</template>
<script>
import { ref } from 'vue'
import { MAuthcode } from 'watth5-ui'
import 'watth5-ui/dist/style.css'
export default {
    components: { MAuthcode },
    setup() {
        const code = ref([])
        return { code }
    }
}

</script>

版本说明

0.0.1 20230422 页面组件与短信验证码

组件内容

• m-page (layout)

• m-authcode

• m-navbar

• m-tabbar

• m-album 图片相册

• m-image 图片-图片预览

• m-video 视频-视频预览

• m-circle css画的圆环

• m-steps 步骤条

• m-login 登录

• m-upload 图片上传

• m-message 状态框