init
This commit is contained in:
@@ -0,0 +1,444 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-tab` 与 `lay-tab-item` 标签, 创建选项卡。
|
||||
|
||||
<template>
|
||||
<lay-tab v-model="current1">
|
||||
<lay-tab-item title="选项一" v-if="true" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current1 = ref("1")
|
||||
|
||||
return {
|
||||
current1,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 图标
|
||||
:::
|
||||
|
||||
::: demo 通过 `icon` 属性, 快速设置前置图标, 也可通过 title 插槽实现。
|
||||
|
||||
<template>
|
||||
<lay-tab v-model="current11" :allow-close="true">
|
||||
<lay-tab-item id="1" title="选项一">
|
||||
<div style="padding:20px">选项一</div>
|
||||
</lay-tab-item>
|
||||
<lay-tab-item id="2" title="选项二" icon="layui-icon-console">
|
||||
<div style="padding:20px">选项二</div>
|
||||
</lay-tab-item>
|
||||
<lay-tab-item id="3" title="选项三" :icon="renderIconFunc">
|
||||
<div style="padding:20px">选项三</div>
|
||||
</lay-tab-item>
|
||||
<lay-tab-item id="4">
|
||||
<template #title>
|
||||
选项四
|
||||
<lay-icon type="layui-icon-set" style="margin-left:8px"></lay-icon>
|
||||
</template>
|
||||
<div style="padding:20px">选项四</div>
|
||||
</lay-tab-item>
|
||||
<lay-tab-item id="5" :title="renderTitleFunc">
|
||||
<div style="padding:20px">选项五</div>
|
||||
</lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref,h , Fragment,resolveComponent} from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const LayIcon = resolveComponent("LayIcon");
|
||||
|
||||
const current11 = ref("1")
|
||||
|
||||
const renderIconFunc = () => h("span", {
|
||||
style: "margin-right: 8px;"
|
||||
},"🚧");
|
||||
|
||||
const renderTitleFunc = () => [
|
||||
h(LayIcon,
|
||||
{
|
||||
type: "layui-icon-component",
|
||||
style: "margin-right: 8px;",
|
||||
}),
|
||||
h("span",
|
||||
{
|
||||
style: "color: red",
|
||||
},
|
||||
"选项五"),
|
||||
]
|
||||
|
||||
return {
|
||||
current11,
|
||||
renderTitleFunc,
|
||||
renderIconFunc,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 简约模式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="brief" v-model="current2">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current2 = ref("1")
|
||||
|
||||
return {
|
||||
current2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 卡片模式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" v-model="current3">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current3 = ref("1")
|
||||
|
||||
return {
|
||||
current3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 允许关闭
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" v-model="current4" :allow-close="allowClose" @change="change" @close="close">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current4 = ref("1")
|
||||
const allowClose = ref(true)
|
||||
|
||||
const change = function(id){
|
||||
console.log("当前值:" +id)
|
||||
}
|
||||
|
||||
const close = function(id){
|
||||
console.log("当前关闭:" + id)
|
||||
}
|
||||
|
||||
return {
|
||||
current4,
|
||||
allowClose,
|
||||
change,
|
||||
close
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 关闭前置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" v-model="current5" allow-close @change="change5" @close="close5" :beforeClose="beforeClose">
|
||||
<lay-tab-item title="选项一" id="1" closable="true"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2" closable="false"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
|
||||
<lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
|
||||
<lay-tab-item title="选项五" id="5"><div style="padding:20px">选项五</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
<div style="color:#ff5722;">id为单数的可以关闭</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current5 = ref("1")
|
||||
|
||||
const change5 = function(id){
|
||||
console.log("当前值:" +id)
|
||||
}
|
||||
|
||||
const beforeClose = function(id){
|
||||
return parseInt(id) % 2 === 1;
|
||||
}
|
||||
|
||||
const close5 = function(id){
|
||||
console.log("当前关闭:" + id)
|
||||
}
|
||||
|
||||
return {
|
||||
current5,
|
||||
change5,
|
||||
beforeClose,
|
||||
close5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 嵌套循环
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" allow-close v-model="current6" @change="change6">
|
||||
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
|
||||
内容{{a.id}}
|
||||
</lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current6 = ref('1')
|
||||
const change6 = function(id){
|
||||
alert(id)
|
||||
}
|
||||
|
||||
const arr = ref([
|
||||
{id:'1', title:'选项一', closable: false},
|
||||
{id:'2', title:'选项二'},
|
||||
{id:'3', title:'选项三'}
|
||||
])
|
||||
|
||||
return {
|
||||
current6,
|
||||
arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 动态添加
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="addTab">添加</lay-button>
|
||||
<lay-tab type="card" allow-close v-model="current8">
|
||||
<lay-tab-item v-for="a in arr2" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
|
||||
内容{{a.id}}
|
||||
</lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
let index = 4;
|
||||
const current8 = ref('1')
|
||||
const arr2 = ref([
|
||||
{id:'1', title:'选项一', closable: false},
|
||||
{id:'2', title:'选项二'},
|
||||
{id:'3', title:'选项三'}
|
||||
])
|
||||
const addTab = function(){
|
||||
index++;
|
||||
arr2.value.push({
|
||||
id: String(index),
|
||||
title:'新选项卡' + index
|
||||
})
|
||||
current8.value = String(index);
|
||||
}
|
||||
|
||||
return {
|
||||
arr2,
|
||||
addTab,
|
||||
current8
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 位置设置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button-group>
|
||||
<lay-button type="default" size="sm" @click = "tabPosition = 'left'">left</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabPosition = 'right'">right</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabPosition = 'top'">top</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabPosition = 'bottom'">bottom</lay-button>
|
||||
</lay-button-group>
|
||||
<lay-button-group>
|
||||
<lay-button type="default" size="sm" @click = "tabType = ''">默认</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabType = 'brief'">简约</lay-button>
|
||||
<lay-button type="default" size="sm" @click = "tabType = 'card'">卡片</lay-button>
|
||||
</lay-button-group>
|
||||
<lay-tab :type="tabType" v-model="current7" :tabPosition = "tabPosition">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
|
||||
<lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current7 = ref("1");
|
||||
const tabPosition = ref("left");
|
||||
const tabType = ref("brief");
|
||||
|
||||
return {
|
||||
current2,
|
||||
tabPosition,
|
||||
tabType
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ------------------- | -------------------------------------------------- | ----------------------------------------- | -------- | ----------------------------- |
|
||||
| v-model | 当前激活 | `string` | - | - |
|
||||
| type | 主题样式 | `string` | - | `brief` `card` |
|
||||
| tabPosition | 位置 | `string` | `bottom` | `top` `bottom` `left` `right` |
|
||||
| allow-close | 允许关闭 | `boolean` | `false` | `true` `false` |
|
||||
| before-close | 关闭之前的回调钩子函数,参数(`id`), `return false` 表示不进行关闭 | `Function` | - | - |
|
||||
| before-leave | 切换标签之前的回调钩子函数, 参数(`id`), `return false` 表示不进行关闭 | `Function` | - | - |
|
||||
| activeBarTransition | 是否开启 activeBar 动画,仅 brief 有效,默认 `false` | `boolean` | `false` | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ------ | -------- | ---- |
|
||||
| change | 选中切换 | id |
|
||||
| close | 关闭事件 | id |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -------- | --------------------- | ---------------- | ------- | -------------- |
|
||||
| id | 唯一标识 | `string` | - | - |
|
||||
| title | 头部标题 | `string` `VNode` | - | - |
|
||||
| icon | 前置图标| `string` `VNode`
|
||||
| closable | 允许关闭 | `boolean` | `false` | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 参数 |
|
||||
| -------- | -------- | ------ |
|
||||
| title | 标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor tab
|
||||
:::
|
||||
|
||||
::: previousNext tab
|
||||
:::
|
||||
@@ -0,0 +1,14 @@
|
||||
#!/bin/sh
|
||||
#
|
||||
# An example hook script to verify what is about to be committed
|
||||
# by applypatch from an e-mail message.
|
||||
#
|
||||
# The hook should exit with non-zero status after issuing an
|
||||
# appropriate message if it wants to stop the commit.
|
||||
#
|
||||
# To enable this hook, rename this file to "pre-applypatch".
|
||||
|
||||
. git-sh-setup
|
||||
precommit="$(git rev-parse --git-path hooks/pre-commit)"
|
||||
test -x "$precommit" && exec "$precommit" ${1+"$@"}
|
||||
:
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
export { default as LayLayer } from "./index.vue"; // layer component
|
||||
@@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayStep",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, provide, withDefaults } from "vue";
|
||||
import "./index.less";
|
||||
|
||||
export interface StepProps {
|
||||
active?: number;
|
||||
center?: boolean;
|
||||
direction?: string;
|
||||
space?: string;
|
||||
currentStatus?: string;
|
||||
composition?: string;
|
||||
simple?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<StepProps>(), {
|
||||
active: 0,
|
||||
center: false,
|
||||
direction: "horizontal",
|
||||
space: "auto",
|
||||
currentStatus: "success",
|
||||
composition: "default",
|
||||
simple: false,
|
||||
});
|
||||
|
||||
const steps = ref([]);
|
||||
|
||||
const emits = defineEmits(["onChange"]);
|
||||
|
||||
const change = (index: any) => {
|
||||
emits("onChange", index - 1);
|
||||
};
|
||||
|
||||
watch(steps, () => {
|
||||
steps.value.forEach(
|
||||
(instance: { setIndex: (arg0: any) => void }, index: any) => {
|
||||
instance.setIndex(index);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
provide("LayStep", {
|
||||
props,
|
||||
steps,
|
||||
change,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,172 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 可应用于许多业务场景，如完成进度、页面加载，是一种较为直观的表达元素。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 通过 `lay-progress` 标签创建进度条, 使用 `percent` 属性设置进度。
|
||||
|
||||
<template>
|
||||
<lay-progress percent="70"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 尺寸大小
|
||||
:::
|
||||
|
||||
::: demo 使用 `size` 属性设置进度条尺寸。
|
||||
|
||||
<template>
|
||||
<lay-progress percent="40" size="big"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" size="big" theme="green"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="80" size="big" theme="cyan"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 指定主题
|
||||
:::
|
||||
|
||||
::: demo 使用 `theme` 属性, 设置进度条主题颜色。
|
||||
|
||||
<template>
|
||||
<lay-progress percent="60" theme="red"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" theme="orange"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" theme="green"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" theme="blue"></lay-progress>
|
||||
<br>
|
||||
<lay-progress percent="60" theme="cyan"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 显示文字
|
||||
:::
|
||||
|
||||
::: demo 使用 `show-text` 属性开启内容展示, `text` 属性设置展示得内容。
|
||||
|
||||
<template>
|
||||
<lay-progress percent="80" :show-text="showText"></lay-progress>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-progress percent="80" :show-text="showText" text="销售量"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const showText = ref(true)
|
||||
|
||||
return {
|
||||
showText
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 环形进度
|
||||
:::
|
||||
|
||||
::: demo 使用 `circle` 属性创建环形进度条。
|
||||
|
||||
<template>
|
||||
<lay-progress percent="10" circle :show-text="showText" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="20" circle :show-text="showText" text="销售量" theme="red" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="30" circle :show-text="showText" theme="blue" text="不同尺寸" :circleSize="200" :circleWidth="20" style="margin-right:10px"></lay-progress>
|
||||
<lay-progress percent="70" circle :show-text="showText" text="宽度控制" theme="orange" :circleSize="200" :circleWidth="40"></lay-progress>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const showText = ref(true)
|
||||
|
||||
return {
|
||||
showText
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title Progress 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| -------- | -------- | --------------------------------------------- |
|
||||
| percent | 进度 | -- |
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
| size | 尺寸 | `big` |
|
||||
| text | 提示 | -- |
|
||||
| color | 颜色 | -- |
|
||||
| showText | 展示描述 | -- |
|
||||
| circle | 环形进度条| 默认为 `false` |
|
||||
| circleSize| 环形进度条尺寸| 默认为 `150` 单位是px |
|
||||
| circleWidth| 环形进度条线条宽度| 默认为 `6` 单位是px |
|
||||
:::
|
||||
|
||||
::: contributor progress
|
||||
:::
|
||||
|
||||
::: previousNext progress
|
||||
:::
|
||||
@@ -0,0 +1,147 @@
|
||||
::: title 快速上手
|
||||
:::
|
||||
|
||||
::: describe 最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 Bug Report。
|
||||
:::
|
||||
|
||||
<a href="https://codesandbox.io/s/11mvy" style="margin-left: 30px; margin-bottom: 30px; margin-top: 10px; display:block;"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" /></a>
|
||||
|
||||
::: title 安装组件
|
||||
:::
|
||||
|
||||
::: describe 使用 npm 工具安装 layui vue，若安装缓慢，可尝试用 pnpm 或其他镜像源。
|
||||
:::
|
||||
|
||||
```
|
||||
npm install @layui/layui-vue --save
|
||||
```
|
||||
|
||||
::: title 全局注册
|
||||
:::
|
||||
|
||||
```js
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import Layui from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/lib/index.css'
|
||||
|
||||
createApp(App).use(Layui).mount('#app')
|
||||
```
|
||||
::: describe 以上代码便完成了 layui-vue 的注册。需要注意的是，样式文件需要单独引入。
|
||||
:::
|
||||
|
||||
::: title 自动按需
|
||||
:::
|
||||
|
||||
::: describe 首先你需要安装 <a href="https://github.com/antfu/unplugin-vue-components" target="_blank" style="color:#5FB878"><code>unplugin-vue-components</code></a> 和 <a href="https://github.com/antfu/unplugin-auto-import" target="_blank" style="color:#5FB878"><code>unplugin-auto-import</code></a> 两款插件。
|
||||
:::
|
||||
|
||||
```
|
||||
npm install -D unplugin-vue-components unplugin-auto-import
|
||||
```
|
||||
|
||||
::: describe 然后修改 vite.config.js 或 vue.config.js 的配置。
|
||||
:::
|
||||
|
||||
```js
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
AutoImport({
|
||||
resolvers: [LayuiVueResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [LayuiVueResolver()],
|
||||
}),
|
||||
],
|
||||
}
|
||||
```
|
||||
::: describe Resolver 解析器选项配置。
|
||||
:::
|
||||
|
||||
```ts
|
||||
export interface LayuiVueResolverOptions {
|
||||
/**
|
||||
* 将样式与组件一起导入
|
||||
*
|
||||
* @default 'css'
|
||||
*/
|
||||
importStyle?: boolean | 'css'
|
||||
|
||||
/**
|
||||
* 是否解析图标
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
resolveIcons?: boolean
|
||||
|
||||
/**
|
||||
* 排除不需要自动导入的组件
|
||||
*
|
||||
* eg: exclude: ['LayDocTable', /^LayDoc[A-Z]/,]
|
||||
*/
|
||||
exclude?: Array<string | RegExp>;
|
||||
}
|
||||
```
|
||||
|
||||
::: title 手动引入
|
||||
:::
|
||||
|
||||
::: describe 原生支持 es-module 的 tree shaking 用法。
|
||||
:::
|
||||
|
||||
::: describe 如果你完全使用 layui-vue 构建项目, 我们更推荐全局注册与自动按需的方式。
|
||||
:::
|
||||
|
||||
```js
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import { LayButton, LayTable } from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/es/button/index.css';
|
||||
import '@layui/layui-vue/es/table/index.css';
|
||||
|
||||
var app = createApp(App).
|
||||
|
||||
app.component("LayButton", LayButton);
|
||||
app.component("LayTable", LayTable);
|
||||
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
::: title 在线安装
|
||||
:::
|
||||
|
||||
::: describe 根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 举例。
|
||||
:::
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="//unpkg.com/@layui/layui-vue/lib/index.css" />
|
||||
<script src="//unpkg.com/vue@3"></script>
|
||||
<script src="//unpkg.com/@layui/layui-vue"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<lay-button type="primary">{{ message }}</lay-button>
|
||||
</div>
|
||||
<script>
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
message: "Hello World"
|
||||
};
|
||||
},
|
||||
};
|
||||
const app = Vue.createApp(App);
|
||||
app.use(LayuiVue);
|
||||
app.mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
Reference in New Issue
Block a user