@xbl113lbw/my_components v1.0.1

vue3测试组件库

通过 npm 安装

npm i @xbl113lbw/my_components

引入组件

import {Toast} from "@xbl113lbw/my_components";
import "@xbl113lbw/my_components/lib/bw_ui_meta.css"

const app = createApp(App);

app.use(Toast);

基础组件

Toast, Loading, Swiper, Stepper, Switch, Uploader, NavBar

Toast

let toast = inject("$toast");

const show = () => {
    toast.show("请稍后...");
}

return {
    show,
}

或者

this.$toast.show("请稍后...");

show 的第二个参数是 delay，可以设置显示时间
hide 为隐藏，用法一样

Loading

let toast = inject("$loading");

const showLoading = () => {
    loading.show();
}

return {
    showLoading,
}

hide 为隐藏，用法一样（loading.hide()）

Swiper

<my-swiper>
    <swiperItem>1</swiperItem>
    <swiperItem>2</swiperItem>
    <swiperItem>3</swiperItem>
    <swiperItem>4</swiperItem>
    <swiperItem>5</swiperItem>
</my-swiper>

Stepper

<my-stepper @change="stepperChange"></my-stepper>

Switch

<my-switch @change="switchChange" v-model="switch_model"></my-switch>

Uploader

<my-uploader :after-read="afterRead"></my-uploader>

NavBar

<my-navBar title="标题" leftText="返回" rightText="按钮"
                   @left-click="leftClick"
                   @right-click="rightClick">
</my-navBar>

可通过插槽自定义内容
<my-navBar title="标题">
    <template #left>
        ...    
    <template>
    <template #right>
        ...    
    <template>     
</my-navBar>