footer/footer.vue

  1. <template>
  2.     <footer class="ion-footer" :class="[modeClass,{'hide-bar':isHide}]" :style="style">
  3.         <slot></slot>
  4.     </footer>
  5. </template>
  6. <script type="text/javascript">
  7.   /**
  8.    * @component Footer
  9.    * @description
  10.    *
  11.    * ## 基础组件 / Footer组件
  12.    *
  13.    * Header和Footer组件结构类似, 都是提供一个包裹容器, 不同的是一个固定在上面, 一个固定在下面.
  14.    *
  15.    * Header组件是Vimo页面的的三个主要构成之一, 主要是为Toolbar/Navbar/自定义结构提供一个容器,
  16.    * 该组件将始终固定在页面顶部, Content组件会根据Header的高度自动设定`margin`值, 或者`padding`值.
  17.    *
  18.    * ### 可用的样式属性
  19.    * - [no-border] - 无边框
  20.    *
  21.    * @demo #/content
  22.    *
  23.    * */
  24.   export default {
  25.     name: 'Footer',
  26.     inject: {
  27.       pageComponent: {
  28.         from: 'pageComponent',
  29.         default: null
  30.       }
  31.     },
  32.     provide () {
  33.       let _this = this
  34.       return {
  35.         footerComponent: _this
  36.       }
  37.     },
  38.     props: {
  39.       mode: {
  40.         type: String,
  41.         default () {
  42.           return (this.$config && this.$config.get('mode', 'ios')) || 'ios'
  43.         }
  44.       }
  45.     },
  46.     data () {
  47.       return {
  48.         // -------- public --------
  49.         isHide: false,
  50.         style: {}
  51.       }
  52.     },
  53.     computed: {
  54.       modeClass () {
  55.         return `footer-${this.mode}`
  56.       }
  57.     },
  58.     methods: {
  59.       // -------- public --------
  60.       /**
  61.        * @function hide
  62.        * @description
  63.        * 隐藏Footer
  64.        * */
  65.       hide () {
  66.         this.isHide = true
  67.       },
  69.       /**
  70.        * @function show
  71.        * @description
  72.        * 显示Footer
  73.        * */
  74.       show () {
  75.         this.isHide = false
  76.       },
  78.       /**
  79.        * @function toggle
  80.        * @description
  81.        * Toggle显示Footer
  82.        * */
  83.       toggle () {
  84.         this.isHide = !this.isHide
  85.       },
  87.       /**
  88.        * @function setStyle
  89.        * @param {object} style - 传入的样式对象
  90.        * @see https://cn.vuejs.org/v2/guide/class-and-style.html#对象语法-1
  91.        * @description
  92.        * 设置Footer的样式
  93.        * */
  94.       setStyle (style) {
  95.         this.style = style
  96.       }
  97.     },
  98.     created () {
  99.       if (this.pageComponent) {
  100.         this.pageComponent.footerComponent = this
  101.       }
  103.       this.$root.$on('onMenuOpen', () => {
  104.         this.hide()
  105.       })
  106.       this.$root.$on('onMenuClosing', () => {
  107.         this.show()
  108.       })
  109.       this.$root.$emit('footer:created', this)
  110.     },
  111.     mounted () {
  112.       this.$root.$emit('footer:mounted', this)
  113.     }
  114.   }
  115. </script>