vue3-module v1.1.3

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

Events

Videos

Example

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

Attributes

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

Events

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

Sockets

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

Events

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