uni-lb-action-sheet v1.0.2

工做项目需要，开发了一个可自定义的 Action 操作列表，支持左右滑动，可配置性强，可自定义性高。
Github：uni-lb-action-sheet

兼容性

App + H5 + 各平台小程序（快应用、360、nvue 未测试）

引入插件

单独引入，在需要使用的页面上 import 引入即可

<template>
  <view>
    <lb-action-sheet></lb-action-sheet>
  </view>
</template>

<script>
  import LbActionSheet from '@/components/lb-action-sheet'
  export default {
    components: {
      LbActionSheet
    }
  }
</script>

全局引入，main.js中 import 引入并注册即可全局使用

import LbActionSheet from '@/components/lb-action-sheet'
Vue.component("lb-action-sheet", LbActionSheet)

easycom 引入

pages.json加上如下配置：

"easycom": {
  "autoscan": true,
  "custom": {
    "lb-action-sheet": "@/components/lb-action-sheet/index.vue"
  }
}

npm 安装引入：

npm install uni-lb-action-sheet

import LbActionSheet from 'uni-lb-action-sheet'

操作列表数据基本格式，更多字段详情见下Actions字段详解

[
  {
    "name": "wx",
    "label": "微信",
    "image": "/static/wx.png"
  },
  {
    "name": "qq",
    "label": "QQ",
    "image": "/static/qq.png"
  },
  {
    "name": "zfb",
    "label": "支付宝",
    "image": "/static/zfb.png"
  },
  {
    "name": "tt",
    "label": "头条",
    "image": "/static/tt.png"
  }
]

调用显示

通过ref形式手动调用show方法显示，隐藏同理调用hide

<lb-action-sheet ref="actionSheet"></lb-action-sheet>

this.$refs.actionSheet.show() // 显示
this.$refs.actionSheet.hide() // 隐藏

小程序开放能力支持，同 Button

actions: [
  {
    "name": "wx",
    "label": "微信",
    "image": "/static/wx.png",
    "openType": "getUserInfo" // 开放能力的获取用户信息
  }
]

<lb-action-sheet ref="actionSheet" @getuserinfo="getuserinfo"></lb-action-sheet>

getuserinfo (e) {
  console.log(res) // 获取的用户信息
}

插槽使用

选择器支持一些可自定义化的插槽，如自定义底部取消按钮，可使用插槽，使用方法如下：

<lb-action-sheet>
  <view slot="footer">我是自定义取消</view>
</lb-action-sheet>

其他插槽见下。

参数及事件

Props

Actions

方法

Events

插槽

iconfont 彩色图片使用方法

在iconfont中，将需要的彩色图标加入到项目中，点击Symbol，生成下面的一个 js 地址，如图所示：

然后参考该教程使用即可：https://github.com/HuaRongSAO/iconfont-tools。
下面简单说下步骤：
1.全局安装iconfont-tools：执行该npm i -g iconfont-tools进行安装
2.在项目根目录，执行下面的命令，将命令中的//at.alicdn.com/t/font_1967328_3h3wk7gbbjg.js换成上图自己的图标的文件 js 地址，一路回车至结束
（备注：如果你是用 HX 编辑器，直接点击启动项目的右侧的新建终端标签卡，输入下面的命令即可）

iconfont-tools --from //at.alicdn.com/t/font_1967328_3h3wk7gbbjg.js --to ./

期间也可以按提示修改输出的文件夹名称、css 文件名称等等。

3.删除其他文件，我们只需要保留一个iconfont-weapp-icon.csscss 文件即可，这个文件的位置可以随意放到哪儿，最后只需要在main.js中引入即可

import './iconfont-weapp/iconfont-weapp-icon.css'

4.剩下的参考demo6即可，注意需要设置icon-prefix，值为执行iconfont-tools中的设置css文件的prefix

其他

其他功能参考示例 Demo 代码。