deprecated micro-vue-components

迁移为：

• micro-element-plus-extra

• micro-vue-config

• micro-vue-directives

• micro-vue-echarts

• micro-vue-hooks

See

Button

Button

| 属性名 | 说明 | 类型 | | ----------- | ------------------------- | ------------------------------------------------------------ | | label | 按钮内容 | string | | type | 按钮类型 | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | | size | 按钮大小 | 'large' | 'small' | 'default' | | loading | 是否为加载中状态 | boolean | | disabled | 是否为禁止中状态 | boolean | | isThrottle | 是否节流 | boolean | | icon | 按钮前面的 icon | VNode | object | | tooltip | 按钮上方的提示 | string | | disabledTip | 按钮禁止时上方的提示 | string | | confirm | 弹出框 和 文字提示 的配置 | IDialogProps | string | | onClick | 点击事件 | Function |

ButtonOps

| 属性名 | 说明 | 类型 | | ---------- | ------------------------------------------------- |---------------------------------------------------------------| | items | 按钮集合 | Button | | type | 按钮类型 - LP | 'primary' |'success' |'warning' |'danger' |'info' |'text' | | disabled | 是否为禁止中状态 - LP | boolean | | maxVisible | 最多可见个数，其余的收起 | number | | extra | 额外的组件，放在按钮列表末尾 | VNode |object |

Directives

draggable

1、引入

import { createApp } from 'vue';
import App from './App.vue';
import { directiveDraggable } from 'micro-vue-components';

const app = createApp(App);
app.use(directiveDraggable); // 引入到全剧终
app.mount('#app');

2、使用

<div v-directiveDraggable>directives2</div>
或
<div v-directiveDraggable="true">directives2</div>

ECharts

useECharts

使用 See

<script lang="ts" setup>
import type {
    Ref,
    ComputedRef
} from 'vue';
import {
    computed,
    ref
} from 'vue';

import type {
    EChartsOption
} from 'micro-vue-components'
import { 
    useECharts
} from 'micro-vue-components';

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

// 推荐使用 computed
const ops:ComputedRef<EChartsOption> = computed(() => {
    // tooltip、grid、xAxis、yAxis 都应该根据项目提取出来
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    width: 1,
                    color: '#019680'
                }
            }
        },
        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
        xAxis: {
            type: 'category',
            data: [...new Array(12)].map((_item, index) => `${index + 1}月`)
        },
        yAxis: {
            type: 'value',
            max: 8000,
            splitNumber: 4
        },
        series: [
            {
                data: [
                    3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200
                ],
                type: 'bar',
                barMaxWidth: 80
            }
        ]
    }
});

setOptions(ops.value);
</script>

<template>
    <div ref="chartRef"
         style="height: 500px; width: 100%" />
</template>

Hooks

1、useEventListener

使用

<template>
    <button @click="toggleEventListener">事件监听</button>
</template>

<script setup>
import { ref } from 'vue';
import { useEventListener } from 'micro-vue-components';

const isEventListenerActive = ref(false);

// 创建事件处理函数
const eventHandler = event => {
    console.log('监听点击事件:', event.target);
};

// 创建事件监听器
const { removeEvent } = useEventListener({
    name: 'click', // 事件名称
    listener: eventHandler // 事件处理函数
});

// 切换事件监听器状态
const toggleEventListener = () => {
    if (isEventListenerActive.value) {
        removeEvent(); // 移除事件监听器
    } else {
        // 重新添加事件监听器
        useEventListener({
            name: 'click',
            listener: eventHandler
        });
    }
    // 切换状态
    isEventListenerActive.value = !isEventListenerActive.value;
};
</script>

2、useLocationQuery

使用

<script setup lang="ts">
import { watchEffect } from 'vue';

import { useLocationQuery } from 'micro-vue-components';

const [query, updateQuery] = useLocationQuery({
    keys: ["id", "name"],
    defaults: {
        id: 11,
        name: '哈哈哈'
    }
});

function handleChangeId(event: any) {
    updateQuery({
        id: event.target.value
    })
}

watchEffect(() => {
    console.log(query.value);
})

</script>
<template>
    id <input :defaultValue="query.id" @input="handleChangeId" />
</template>

3、useService

使用

<template>
    <div>数据请求</div>
    <button @click="handleEdit">修改数据</button>
    {{ loading }}
    {{ data }}
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import { useService } from 'micro-vue-components';

 function fun(params) {
    // 构建 URL，将查询参数附加到 URL 上
    const url = new URL('https://mock.mengxuegu.com/mock/61922927f126df7bfd5b79ef/promise/promise3');
    url.search = new URLSearchParams({ ...params, method: 'get' }).toString();

    return new Promise((resolve, reject) =>{
       fetch(url).then(req => {
           return req.json();
       }).then(res => {
           resolve(res);
       }).catch(err => {
           reject(err);
       });
    })
}

let obj = reactive({
    value: 'test'
});

const {
    run,
    data,
    loading
} = useService(fun, obj);

function handleEdit() {
    run({
        value: 'test'
    });
}
</script>

注：其余的 hooks 查看 index 中的导出。

4、useWatermark

<template>
    <div>
        <Button type="primary"
                label="创建 Watermark1"
                @click="setWatermark('WaterMark 1')">
        </Button>
        <Button type="primary"
                label="Create custom style Watermark"
                @click="setWatermark2('创建 样式 WaterMark')">
        </Button>

        <Button label="Clear Watermark1"
                @click="clear"></Button>
        
        <Button label="ClearAll"
                @click="clearAll"></Button>

        <Button label="Update Watermark1"
                @click="setWatermark('WaterMark Info New')">
        </Button>
    </div>
</template>
<script lang="ts" setup>
import { onUnmounted, ref } from 'vue';

import { 
    useWatermark,
    Button
} from 'micro-vue-components';

const app = ref(document.body);

const { setWatermark, clear, clearAll } = useWatermark();
const { setWatermark: setWatermark2 } = useWatermark(app, {
    fontColor: 'red',
    fontSize: 12,
    rotate: 30
});

// setWatermark3('水印');

onUnmounted(() => {
    clearAll();
});
</script>

Icon

| 属性名 | 说明 | 类型 | |-------|------|-------------------------------------------------------------------------------------------------------------| | type | icon 形状，根据 icon 仓库 里面的加入 | EIconType | | size | icon 大小 | Number | | color | icon 颜色 | String | | rotate | icon 旋转角度 | Number | | continuousRotate | icon 一直转圈（类似 Loading 效果） | Boolean | | isHover | 划过放大 | Boolean | | cursor | 鼠标形状 | See（暂不支持 URL） |

Input

| 属性名 | 说明 | 类型 | |------------------------|-------|-----------| | isDebounce | 是否防抖 | boolean | | onChange | 改变时触发 | Function | | ... | 其余属性同 ElInput 查看 |

Table

| 属性名 | 说明 | 类型 | |----------|-----------|-----------| | draggableChange | 拖动改变监听 - 有值 行可拖动 | Function | | ... | 其余属性同 ElTable/ElTableColumn 查看 |

引入：

import { Table, Column } from 'micro-vue-components';

使用方式

<script setup lang="ts">

import { Table, Column } from 'micro-vue-components';

const tableData = [{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
}, {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
}];

const change = (value: typeof tableData) => {
    console.log(value);
};
</script>

<template>
    <Table :data="tableData"
           stripe
           :draggable-change="change"
           style="width: 100%">
        <Column prop="date"
                label="Date"
                width="180" />
        <Column prop="name"
                label="Name"
                width="180" />
        <Column prop="address"
                label="Address" />
    </Table>
</template>