Vue的常见组件实例
Vue实例总结
- 1.滚动字幕
- 2.Vue中省市区三级联动实现方法
1.滚动字幕
1.顶部战报公告栏
<template>
<div>
<div class="marquee">
<div class="marquee_title">
<span>最新战报</span>
</div>
<div class="marquee_box">
<ul class="marquee_list" v-bind:style="{ top: -num + 'px'}" :class="{marquee_top:num}">
<!-- 当显示最后一条的时候（num=0转换布尔类型为false）去掉过渡效果-->
<li v-for="(item, index) in items" >
<span>{{item.name}}</span>
<span>在</span>
<span class="red"> {{item.city}}</span>
<span>杀敌</span>
<span class="red"> {{item.amount}}</span>
<span>万</span>
</li>
</ul>
</div>
</div>
</div>
</template>
<script >
export default {
data() {
return {
animate: false,
num:0,
items: [
{name: "小马",city:"广东",amount:26},
{name: "小明",city:"街头",amount:84},
{name: "小红",city:"学校",amount:22}
]
}
},
created() {
setInterval(this.scroll, 1000)
},
methods: {
scroll() {
this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
setTimeout(() => { // 这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
this.items.shift(); //删除数组的第一个元素
this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
}, 500)
}
}
}
</script>
<style scoped>
div,ul,li,span,img{
margin:0;
padding:0;
display: flex;
box-sizing: border-box;
}
.marquee{
width: 100%;
height: 50px;
align-items: center;
color: #3A3A3A;
background-color: #cccccc;
display: flex;
box-sizing: border-box;
}
.marquee_title{
padding: 0 20px;
height: 30px;/*关键样式*/
font-size: 16px;
border-right: 2px solid #d8d8d8;
align-items: center;
}
.marquee_box{
display: block;
position: relative;
width: 60%;
height: 30px;/*关键样式*/
overflow: hidden;
}
.marquee_list{
display: block;
position: absolute;
top:0;
left: 0;
}
.marquee_top{transition: top 0.5s ;}/*关键样式*/
.marquee_list li{
height: 30px;/*关键样式*/
line-height: 30px;/*关键样式*/
font-size: 14px;
padding-left: 20px;
background-color: #fff;
}
.marquee_list li span{
padding:0 2px;
}
.red{
color: #FF0101;
}
</style>
2. 底部滚动半透明字幕
<template>
<div class="textScroll" @mousemove="pauseAn" @mouseout="startAn" >
<div class="scroll" :style="{marginLeft: '-' + marginLeft + 'px' }">
<span @click="itemClick(item,$event)" v-for="(item,index) in datas" :key="index" class="content">
<span class="title">【特推公告：{{item}}】</span>
<!--<span class="text">{{item}}</span>-->
</span>
</div>
</div>
</template>
<script>
export default {
name: "weather",
data(){
return {
datas:['18日星期二,高温 13℃,南风,低温 -2℃',
// '一晴方觉夏深'
],
marginLeft: 0,
prevLeft: 0,
an: '',
place: '',
}
},
props:{
data: {
type: Array,
},
time: {
type: Number,
default: 100,
},
placement: {
type: String,
default: 'bottom'
}
},
created(){
switch( this.placement ){ /** 此功能可自己扩展，展示方式，此代码中未完成扩展 **/
case 'top': this.place = 'top';break;
case 'bottom': this.place = 'bottom';break;
default : this.place = 'bottom';break;
}
},
mounted(){
this.$nextTick (function(){
this.startAn();
})
},
beforeDestroy(){
this.stopAn();
},
watch:{
},
methods:{
startAn: function(){ // 开始
let _this = this;
let width = document.querySelector('.scroll').offsetWidth;
this.an = setInterval( function() {
if (_this.marginLeft > width) {
_this.marginLeft = 0;
}
_this.marginLeft += 2;
} , _this.time);
},
stopAn: function(){ // 停止
this.prevLeft = this.marginLeft;
this.marginLeft = 0;
clearInterval(this.an);
this.$emit('on-stop-An');
},
pauseAn: function(){ // 暂停动画
clearInterval(this.an);
},
itemClick: function( item, e ) {
this.$emit('on-item-click',item );
}
}
}
</script>
<style scoped>
.scroll{
height: 32px;
line-height: 28px;
padding: 4px 0;
white-space: nowrap;
.content{
width: 100%;
word-wrap: normal;
margin-right: 140px;
}
.title{
color: #ad6f0c;
font-weight: bold;
}
.text {
color: #805518;
}
}
.textScroll{
background-color: #f7f7f7;
border-bottom: 4px solid #999;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
</style>
3.底部滚动相似版本
<template>
<div class="textScroll" @mousemove="pauseAn" @mouseout="startAn" >
<div class="scroll" :style="{marginLeft: '-' + marginLeft + 'px' }">
<span @click="itemClick(item,$event)" v-for="(item,index) in datas" :key="index" class="content">
<span class="title">【今日天气：{{item}}】</span>
<!--<span class="text">{{item}}</span>-->
</span>
</div>
</div>
</template>
<script>
export default {
name: "weather",
data(){
return {
datas:['18日星期二,高温 13℃,南风,低温 -2℃', // '一晴方觉夏深'
],
weather:{"data":{"yesterday":{"date":"18日星期二","high":"高温 9℃","fx":"南风","low":"低温 -6℃","fl":"","type":"晴"},"city":"保定","aqi":"99","forecast":[{"date":"19日星期三","high":"高温 8℃","fengli":"","low":"低温 -5℃","fengxiang":"北风","type":"晴"},{"date":"20日星期四","high":"高温 5℃","fengli":"","low":"低温 -5℃","fengxiang":"南风","type":"多云"},{"date":"21日星期五","high":"高温 7℃","fengli":"","low":"低温 -6℃","fengxiang":"西北风","type":"晴"},{"date":"22日星期六","high":"高温 6℃","fengli":"","low":"低温 -7℃","fengxiang":"西北风","type":"多云"},{"date":"23日星期天","high":"高温 4℃","fengli":"","low":"低温 -9℃","fengxiang":"北风","type":"晴"}],"ganmao":"天气寒冷，且昼夜温差很大，极易发生感冒。请特别注意增加衣服保暖防寒。","wendu":"6"},"status":1000,"desc":"OK"},
marginLeft: 0,
prevLeft: 0,
an: '',
place: '',
}
},
props:{
data: {
type: Array,
},
time: {
type: Number,
default: 100,
},
placement: {
type: String,
default: 'bottom'
}
},
created(){
switch( this.placement ){ /** 此功能可自己扩展，展示方式，此代码中未完成扩展 **/
case 'top': this.place = 'top';break;
case 'bottom': this.place = 'bottom';break;
default : this.place = 'bottom';break;
}
},
mounted(){
this.$nextTick (function(){
this.startAn();
})
},
beforeDestroy(){
this.stopAn();
},
watch:{
},
methods:{
startAn: function(){ // 初始化运行动画;失去焦点同样触发
let _this = this;
let width = document.querySelector('.scroll').offsetWidth;
this.an = setInterval( function() {
if (_this.marginLeft > width) {
_this.marginLeft = 0;
}
_this.marginLeft += 2; //控制运行速度
} , _this.time);
},
stopAn: function(){ // 在组件销毁之前停止运行动画
this.prevLeft = this.marginLeft;
this.marginLeft = 0;
clearInterval(this.an);
this.$emit('on-stop-An');
},
pauseAn: function(){ // 鼠标移入可暂停动画
clearInterval(this.an);
},
itemClick: function( item, e ) {//监听点击事件
this.$emit('on-item-click',item );
}
}
}
</script>
<style scoped>
.scroll{
height: 32px;
line-height: 28px;
padding: 4px 0;
white-space: nowrap;
.content{
width: 100%;
word-wrap: normal;
margin-right: 140px;
}
.title{
color: #ad6f0c;
font-weight: bold;
}
.text {
color: #805518;
}
}
.textScroll{
background-color: #f7f7f7;
border-bottom: 4px solid #999;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
</style>
2.Vue中省市区三级联动实现方法
需要用npm包管理器在Vue项目中执行 npm install v-distpicker --save
<template>
<div style="width: 100%; height: 100vh;">
<mu-paper class="demo-paper" :z-depth="1">
<li>
<div class="left">
<span>所在地区</span>
</div>
<div class="right r">
<div class="city" @click="toAddress">{{city}}</div>
<i class="arrow-r"> </i>
</div>
</li>
<v-distpicker type="mobile" @selected='selected' v-show="addInp">
</v-distpicker>
<div class="mask" v-show="mask"></div>
</mu-paper>
</div>
</template>
<script>
import VDistpicker from 'v-distpicker'
export default {
name: "address",
components: { VDistpicker },
data() {
return {
city: '请选择',
addInp: false,
mask: false
}
},
methods: {
// 点击弹出三级联动
toAddress() {
this.mask = true;
this.addInp = true;
},
// 省市区三级联动
selected(data) {
this.mask = false;
this.addInp = false;
this.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
},
}
}
</script>
<style scoped>
</style>