vue--動畫收縮
阿新 • • 發佈:2018-12-27
首先 install vuex
建立store資料夾
在 store 資料夾分別建立
state.js
// 狀態管理
// 定義state 原始資料
const state = {
fullScreen: false
}
export default state
mutation-types.js
// 定義Mutations相關的字串常量 // Mutations的修改動作 export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'
mutations.js
// Mutations 定義對資料修改的邏輯
import * as types from './mutation-types'
const mutations = {
[types.SET_FULL_SCREEN](state, flag) {
state.fullScreen = flag
}
}
export default mutations
actions.js
// 對mutation進行封裝
import * as types from './mutation-types'
export const selectPlay = function ({commit, state}, {list, index}) {
commit(types.SET_FULL_SCREEN, true)
}
getters.js
// 獲取state 對資料進行對映 用getters取state的資料去到元件裡 // getters可以是個函式 類似於計算屬性 可以根據state的不同值計算出新的值 可以在getters裡寫一些複雜的判斷邏輯 export const fullScreen = state => state.fullScreen
index.js
// 入口 import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import * as getters from './getters' import state from './state' import mutations from './mutations' import createLogger from 'vuex/dist/logger' Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production' export default new Vuex.Store({ actions, getters, state, mutations, strict: debug, plugins: debug? [createLogger()] : [] })
在main.js匯入store
import Vue from 'vue' import App from './App' import router from './router' import store from './store' /* eslint-disable no-new */ new Vue({ el: '#app', store, router, render: h => h(App) })
建立meow.vue
<template> <div class="meow"> <transition name="normal"> <div class="normal-vue" v-show="fullScreen"> <div class="background"> </div> <div class="top"> <div class="back" @click="back"> <i class="icon-back"></i> </div> <h1 class="title"></h1> <h2 class="subtitle"></h2> </div> </div> </transition> <transition name="mini"> <div class="mini-vue" v-show="fullScreen"> <div class="icon"> </div> <div class="text"> <h2 class="name"></h2> <p class="desc"></p> </div> </div> </transition> </div> </template>
script
<script type="text/ecmascript-6">
import { mapGetters, mapMutations } from 'vuex'
export default {
computed: {
...mapGetters([
'fullScreen'
])
},
methods: {
back() {
this.setFullScreen(false)
},
open() {
this.setFullScreen(true) }, ...mapMutations({ setFullScreen: 'SET_FULL_SCREEN' }) } } </script>
css
<style lang="stylus" scoped> .meow .normal-vue position: fixed left: 0 right: 0 top: 0 bottom: 0 z-index: 150 background: #aaaaaa .background position: absolute left: 0 top: 0 width: 100% height: 100% z-index: -1 opacity: 0.6 filter: blur(20px) .top position: relative margin-bottom: 25px .back position absolute top: 0 left: 6px z-index: 50 .icon-back display: block padding: 9px font-size: 16px color: #003a39 transform: rotate(-90deg) .title width: 70% margin: 0 auto line-height: 40px text-align: center no-wrap() font-size: 18px color: #fff .subtitle line-height: 20px text-align: center font-size: 14px color: #fff .mini-vue display: flex align-items: center position: fixed left: 0 bottom: 0 z-index: 180 width: 100% height: 60px background: #a1a1a1 .icon flex: 0 0 40px width: 40px padding: 0 10px 0 20px .text display: flex flex-direction: column justify-content: center flex: 1 line-height: 20px overflow: hidden .name margin-bottom: 2px no-wrap() font-size: 14px color: #fff .desc no-wrap() font-size: 12px color: #000 </style>