micro-vue-components v1.14.1

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>