INTRODUCE

Based on vue3+vite built common functional component library, including Tabs,Video, Pagination, Swiper, Vote, Message components, update to be continued.

Installation

npm install vue3-module

Import

Global import

import 'vue3-module/lib/style.css' // style
import UI from 'vue3-module'

createApp(App).use(UI).use(router).mount('#app')

On-demand introduction

• Introduce components as needed in the pages you want to use.

import { Tabs } from "vue3-module"

Basic Usage

• When used, the corresponding attribute value is passed in according to the attribute of the corresponding component.

<template>
  <div class="main">
    <Videos />
  </div>
</template>

<script setup>
import { Videos } from "vue3-module";
</script>

<style scoped></style>

COMPONENT ATTRIBUTE

Tabs

Example

<template>
  <Tabs
    :tabList="tabList"
    @change="handleTabChange"
    :cur-index="tabIndex"
  >
  </Tabs>
</template>

<script setup>
import { ref } from 'vue'

const tabList = ref([
  // The text attribute is required, and other attributes are supported.
  { id: 1, text: "all" },
  { id: 2, text: "snack" },
  { id: 3, text: "book" },
  { id: 4, text: "food" },
])
const tabIndex = ref(0)
const handleTabChange = item => {
  tabIndex.value = item.index
}
</script>

Attributes

| Name | Description | Type | Default | | ------------- | -------------------------------------------------------- | -------- | ----------- | | bgColor | Default background color | String | #f1f5f9 | | activeBgColor | The background color is currently selected | String | #1261ff | | tabList | TAB list items, text attributes are required, and other attributes can be customized | Array | [ ] | | bdRadius | Rounded dimension with unit px | String | 50px | | curIndex | Currently selected item | Number | 0 |

Events

| Name | Description | Parameters | | ------------- | -------------------------------------------------------- | -------- | | change | Triggered when switching tabs, returning the id and the current tab object | ---- |

Videos

Example

<template>
  <videos
    video-src="https://example.mp4"
  >
  </videos>
</template>

Attributes

| Name | Description | Type | Default | | ------------- | -------------------------------------------------------- | -------- | ----------- | | videoSrc | Video address, which supports only online videos | String | '' |

Pagination

Example

<template>
  <Pagination
    :pageTotal="60"
    :pageSize="10"
    :activeBgColor="activeBgColor"
    :bgColor="bgColor"
    size="40px"
    @currentClick="handleCurrentChange"
    @prevClick="handlePrevChange"
    @nextClick="handleNextChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const activeBgColor = ref('#1261ff')
const bgColor = ref('#f0f2f5')

// Page number
const handleCurrentChange = e => {
  console.log(e);
}
// Previous
const handlePrevChange = e => {
  console.log(e);
}
// Next page
const handleNextChange = e => {
  console.log(e);
}
</script>

Attributes

| Name | Description | Type | Default | | ------------- | --------------------------------------------------------- | -------- | ----------- | | pageTotal | Video address, which supports only online videos | Number | 0 | | pageSize | Total number of data items, must be transmitted | Number | 10 | | activeBgColor | Number of items per page | String | #1261ff | | bgColor | Other background colors not selected | String | #f0f2f5 | | size | Pager size, supported px, vw, rem, must carry units | String | 50px |

Events

| Name | Description | Parameters | | -------- | ------------------------------------------------------------ | -------------- | | change | Triggered when switching tabs, returning the id and the current tab object | ---- |

Swiper

Example

<template>
  <div class="box">
    <Swiper
      autoPlay
      :sliders="sliders"
      :isController="true"
      :duration="3000"
      :bgColor="bgColor"
    >
    </Swiper>
  </div>
</template>

<script setup>
const bgColor = '#fff'
const sliders = [
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
]
</script>

<style scoped>
.box {
  width: 100%;
  height: 400px;
}
</style>

Attributes

| Name | Description | Type | Default | | ------------- | --------------------------------------------------------- | -------- | ----------- | | sliders | Image address array, must pass | Array | [ ] | | autoPlay | Auto play or not | Boolean | false | | duration | Interval time | Number | 3000 | | isController | Whether to display a toggle button | Boolean | true | | bgColor | Indicator color | String | #fff |

Sockets

| Name | Description | | --------- | -------------------------------- | | indicator | Indicator slot, you can customize the indicator style |

Vote

Example

<template>
  <Vote
    question="您坠坠坠期待的游戏角色是哪一个？"
    :voteList="voteList"
    @change="handleChange"
  >
  </Vote>
</template>

<script setup>
import { ref } from 'vue'

const voteList = ref([
  {
    id: 1,
    option: '卡莎',
    voteNum: 1555
  },
  {
    id: 2,
    option: '金克丝',
    voteNum: 2501
  },
  {
    id: 3,
    option: '拉克丝',
    voteNum: 800
  },
  {
    id: 4,
    option: '女警',
    voteNum: 1500
  }
])

const handleChange = item => {
  console.log(item);
}
</script>

Attributes

| Name | Description | Type | Default | | ------------- | --------------------------------------------------------- | -------- | ----------- | | voteList | Voting options, mandatory, each item must contain option, voteNum attributes | Array | [ ] | | question | problem | String | '' | | bgColor | Default background color | String | #f0f0f0 | | activeBgColor | Select background color | String | #fff0f3 |

Events

| Name | Description | Returned value | | --------- | -------------------------------- |--------| | change | After successful voting, the selected item is returned to the user | ----- | item |

Message

Example

<template>
  <div @click="handleClick('success')">成功</div>
  <div @click="handleClick('warning')">警告</div>
  <div @click="handleClick('error')">错误</div>
  <div @click="handleClick('default')">默认</div>
</template>

<script setup>
import { Message } from 'vue3-module'

const handleClick = text => {
    if (text === 'success') return Message({message: '成功！', type: 'success', zIndex: 10})
    else if (text === 'warning') return Message({message: '警告！', type: 'warning'})
    else if (text === 'error') return Message({message: '错误！', type: 'error'})
    else return Message({message: '默认'})
}
</script>

Attributes

| Name | Description | Type | Default | | ------------- | --------------------------------------------------------- | -------- | ----------- | | type | default/success/warning/error | String | default | | message | Prompt text | String | —— | | zIndex | hierarchy | Number | 0 |