一个漂亮的Vue活动面板组件 ActionSheet

最新推荐文章于 2024-10-10 19:23:18 发布

weixin_33691700

最新推荐文章于 2024-10-10 19:23:18 发布

阅读量2k

点赞数

文章标签： javascript git json ViewUI

原文链接：https://juejin.im/post/5cbf0dc7e51d456e747c5359

版权

Vue ActionPannel

❤❤❤❤ a beautiful Action Pannel ❤❤❤❤

live demo git地址

What's this

基于 vue-create-api 的活动面板用于展示不同的操作接口

Installation and use

$ yarn add vue-action-pannel
or
$ npm install vue-action-pannel --save
复制代码

import App from './App.vue'
import ActionPannel from 'vue-action-pannel'
import Vue from 'vue'

Vue.use(ActionPannel)

new Vue({
  render: h => h(App)
}).$mount('#app')

复制代码

data () {
  return {
    // 初始化以下格式的list
    actions: [{
      icon: 'icon-article', // 引入iconfont的类名作为展示的icon
      text: '分享' // 引入文字作为标题
    }, {
      icon: 'icon-xiazai46',
      text: '客服'
    }, {
      icon: 'icon-yidong',
      text: '移动'
    }]
  }
}

methods: {
  // 得益于vue-create-api
  // 我们可以以函数的形式创建一个action-pannel
  openPannel: function () {
    let actionPannel = this.$createActionPannel({ // 函数式调用 将返回一个Vue实例
      $props: {
        actions: this.actions // 传入列表项
      }
    }).$on('select', (e) => { // 暴露select事件
      window.alert(`click: ${e.idx}, params: ${JSON.stringify(e.item)}`) // 参数包含下标以及传入的菜单项
      actionPannel.closePannel() // 完成操作后一定要使用closePannel函数来关闭这个面板哦
    })
  },
}
复制代码