公司最近项目使用vuetify第三方UI库,看了文档一个很好用的UI库pc端和移动端都很好用,可以兼顾两个端口。
图片如下:
解决bug:
初始创建项目cmd运行创建,首先vue/cli脚手架必须是全局的,或者项目中先创建一个脚手架,在vue create 项目名字。
入门步骤:
1.node-V
2.npm -V
3.vue -V
初始运行检查
cmd/运行下载项目
全局下载vue
建立vue项目
vue create vuetify-s
步骤2:
cd vuetify-s
npm run serve
步骤3:
vue add vuetify
步骤4:
npm run serve
可以成功运行项目了.
总结:以上是初始构建过程,添加功能就自己书写逻辑即可。
初始的构建一个组件/在app.vue(引入组件,注册组件,使用组件)
views.vue
<template>
<div class="views-div">
<!-- 我是表单页面 -->
我是views页面
</div>
</template>
<script>
export default {
name:'views'
}
</script>
<style>
</style>
app.vue
<template>
<v-app>
<v-app-bar
app
color="primary"
dark
>
<div class="d-flex align-center">
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
transition="scale-transition"
width="40"
/>
<v-img
alt="Vuetify Name"
class="shrink mt-1 hidden-sm-and-down"
contain
min-width="100"
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
width="100"
/>
</div>
<v-spacer></v-spacer>
<v-btn
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
text
>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<!-- 使用单闭合标签和双闭合标签自定义 -->
<HelloWorld/>
//使用组件
<views></views>
</v-main>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
//引入组件
import Views from './view/views.vue'
export default {
name: 'App',
components: {//注册组件
HelloWorld,
Views
},
data: () => ({
//
}),
};
</script>
模板日历:
代码如下:适用pc端,移动端需要修改断点
views.vue
<template>
<v-container class="grey lighten-5">
<v-row no-gutters class="mb-6">
<v-col
v-for="n in 3"
:key="n"
cols="12"
sm="4"
>
<v-card
class="pa-2"
outlined
tile
>
One of three columns
</v-card>
</v-col>
</v-row>
<!-- 试验calendar -->
<v-sheet
tile
height="54"
class="d-flex"
>
<v-btn
icon
class="ma-2"
@click="$refs.calendar.prev()"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-select
v-model="type"
:items="types"
dense
outlined
hide-details
class="ma-2"
label="type"
></v-select>
<v-select
v-model="mode"
:items="modes"
dense
outlined
hide-details
label="event-overlap-mode"
class="ma-2"
></v-select>
<v-select
v-model="weekday"
:items="weekdays"
dense
outlined
hide-details
label="weekdays"
class="ma-2"
></v-select>
<v-spacer></v-spacer>
<v-btn
icon
class="ma-2"
@click="$refs.calendar.next()"
>
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-sheet>
<v-sheet height="600">
<v-calendar
ref="calendar"
v-model="value"
:weekdays="weekday"
:type="type"
:events="events"
:event-overlap-mode="mode"
:event-overlap-threshold="30"
:event-color="getEventColor"
@change="getEvents"
></v-calendar>
</v-sheet>
</v-container>
</template>
<script>
export default {
name:'views',
data: () => ({
type: 'month',
types: ['month', 'week', 'day', '4day'],
mode: 'stack',
modes: ['stack', 'column'],
weekday: [0, 1, 2, 3, 4, 5, 6],
weekdays: [
{ text: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
{ text: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
{ text: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
{ text: 'Mon, Wed, Fri', value: [1, 3, 5] },
],
value: '',
events: [],
colors: ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey darken-1'],
names: ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party'],
}),
methods: {
getEvents ({ start, end }) {
const events = []
const min = new Date(`${start.date}T00:00:00`)
const max = new Date(`${end.date}T23:59:59`)
const days = (max.getTime() - min.getTime()) / 86400000
const eventCount = this.rnd(days, days + 20)
for (let i = 0; i < eventCount; i++) {
const allDay = this.rnd(0, 3) === 0
const firstTimestamp = this.rnd(min.getTime(), max.getTime())
const first = new Date(firstTimestamp - (firstTimestamp % 900000))
const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000
const second = new Date(first.getTime() + secondTimestamp)
events.push({
name: this.names[this.rnd(0, this.names.length - 1)],
start: first,
end: second,
color: this.colors[this.rnd(0, this.colors.length - 1)],
timed: !allDay,
})
}
this.events = events
},
getEventColor (event) {
return event.color
},
rnd (a, b) {
return Math.floor((b - a + 1) * Math.random()) + a
},
},
}
</script>
<style scoped="scoped">
</style>
官网地址:https://vuetifyjs.com/en/components/calendars/#usage