更新记录

1.0.1（2023-04-20） 下载此版本

发布

平台兼容性

md文档解析有问题，建议去gitee看

使用方法

安装

npm i peter-plug-in-vue

使用API

• 在main.js中引入

  import PeterPlug from 'peter-plug-in-vue'
  Vue.use(PeterPlug)

使用样式

• 在App.vue中引入
• 注： 部分组件使用了这些样式，如使用组件请务必引入

  <style lang="scss">
  @import "peter-plug-in-vue/css/index.css";/**可不引，入不引入的话缺少提示 */
  @import "peter-plug-in-vue/index.scss";
  </style>

引入组件

• 在pages.json中引入

  // pages.json
  {
  "easycom": {
  "^p-(.*)": "peter-plug-in-vue/src/components/p-$1/p-$1.vue"
  },
  // 多个easycom
  // "easycom": {
  //  "autoscan": true,
  //  "custom": {
  //         // 其他
  //      "^p-(.*)": "peter-plug-in-vue/src/components/p-$1/p-$1.vue"
  //  }
  // },
  // 此为本身已有的内容
  "pages": [
  // ......
  ]
  }

设置组件默认参数

import {setPeterConfig} from 'peter-plug-in-vue'
const config = {//设置组件的默认全局参数
    props:{ //可以设置单个参数
            'share':{
                title: '', // 分享标题 默认为小程序名称
                path: '', // 默认为当前页面路径
                imageUrl: '' // 默认为当前页面的截图
            },
            'img':{
                img_loading,//加载中的图片
                img_error,//加载失败的图片
                lazyLoads:false,//是否开启懒加载
                animo:true,//是否开启动画
                threshold:100,// 负数为图片超出屏幕底/顶/左/右部多少距离后触发懒加载，正数为图片顶部距离屏幕底/顶/左/右部部多少距离时触发(图片还没出现在屏幕上)
                mode:'aspectFill',//图片裁剪模式
            },
            pop:{
                cover:'0.6',//弹窗遮罩层背景透明度
            },
            'paging':{
                value:'暂无数据',
                loadMore:{
                    loading: '努力加载中~',
                    loadmore: '上拉加载更多',
                    nomore: '没有更多了~',
                },
                countKey:'count',//页数key
                sizeKey:'size',//每页数量key
                icon:listIcon,
                loading,
            },
            'model':{
                title:'温馨提示',
                color:'rgb(13, 130, 233)',//文字按钮颜色
                cancelColor:'',//取消文字按钮颜色
                confirmText:'确认',
                cancelText:'取消',
                content:'',
                cover:'.1',
                showCancel:true,
                backdrop:true,//是否显示毛玻璃效果
                fast:false,//app端是否开启快速弹出（subnvue）
            },
            'skeleton':{} //骨架屏默认配置，会合并到组件上
        }
}
const root = false //是否强制替换
setPeterConfig(config,root)

组件

p-empty 间隔

一个空的占位组件：

基本使用

<p-empty value="50" />

Props

p-img 图片

基本使用

<p-img src="http://library-1255996391.cos.ap-shanghai.myqcloud.com/users/18/images/202346/1680788436-18-QNpJHQ-102546470_p0.jpg" />

Props

p-pop 弹窗

基本使用

<p-pop :is-show="show" @close="show = false" cover=".1">
    弹出来了
</p-pop>

Props

Event

p-paging 分页加载

基本使用

<template>
    <p-paging ref="paging" list-key="list" />
</template>
<script>
  export default {
    data() {
      return {
        list: []
      }
    },
    onLoad(){
        this.fristGetList()
    },
    //下拉刷新
    async onPullDownRefresh() {
        await this.fristGetList()
        uni.stopPullDownRefresh()
    },
     //加载下一页
    onReachBottom() {
        this.getList()
    },
    methods: {
        async fristGetList(){
            await this.$nextTick()
            this.$refs.paging.init();
            return this.getList()
        },
        getList(){
            const page = this.$refs.paging.get();
            if(!page) return
            return xxxxxx({xxxx:xxxx,...page}).then(r => {
                this.$refs.paging.handleList(r.list,this)
            })
        },

    }
  }
</script>

Props

Method

此方法需要通过ref调用

p-price 显示价格

（两位小数） 可直接使用过滤器 handlePirce

基本使用

<p-price value="1.2" mode="up" double/>

Props

p-store 显示store

显示vuex中store的值

基本使用

<p-store value="userInfo.name"/>

Props

p-popover 气泡弹窗

基本使用

        <p-popover>
            <button >上</button>
            <template #bubble>
                <view style="width: 680rpx;height: 200rpx;">气泡弹窗</view>
            </template>
        </p-popover>

Props

Event

Method

此方法需要通过ref调用

Slots

p-skeleton 骨架屏

思想：

基本使用

<template>
        <p-skeleton :optiopns="optiopns" :def-option="defOption" />
</template>
<script>
  export default {
    data() {
      return {
        //默认配置，会匹配到所有view上
        defOption: {
            bg: "#f0f0f0",//['#2dcca7','#2dcca799'] 可以写成数组形式，
            padding:'20 0',
            radius:10,
            animated:false,
        },
        // 骨架屏配置项 最多可以有3层children
        optiopns: {
            direction: 'column', //row  布局方式 同flex
            // justify: 'center',// children 的对齐方式 同flex
            align: 'center',// children 的对齐方式 同flex
            // width: '500',//盒子宽度 默认 100%
            height: '700', //盒子高度 默认-
            // bg: " #bfa",//盒子背景颜色
            radius:16,// 圆角
            padding:'20',
            // margin:'20',
            style: '',//可添加其他style
            className:'',//class样式
            noDef:true, //是否匹配到 默认配置defOption
            animated:false,//是否开启动画可为每项单独设置
            children:[
                {
                    height: '50rpx', //
                },
                {
                    direction:'row',
                    width: '100%',
                    // bg:'#f8f8f8',
                    noDef:true,
                    padding:'20rpx 0',
                    children: [
                        {
                            width: '100',
                            height: '100',
                            margin:'0 20rpx 0 0',
                            style:'flex:none',
                        },
                        {
                            width: '100%',
                            height: '100%',
                            noDef:true,
                            defOption:{//自己children的默认配置，会匹配自己children上
                                    margin:'0 0 20rpx 0',
                            },
                            children:5, //可以只填写children个数
                        },
                    ]
                },
                {
                    height: '50rpx',
                },
            ]
        }
      }
    }
  }
</script>

Props

API

navTo

使用Vue.use后 可直接在vue中使用this.$navTo()

• 官方: navigateTo

  // /**
  //  * 页面跳转
  //  * @param {string|number} path 页面跳转地址
  //  * @param {object} query 传递的参数 对象形式
  //  * @param {object} config navigateTo Api其他配置
  //  */
  navTo(path,qurey,config) //普通跳转
  navTo(num) //返回 num为返回的页数 ，不传为1
  navTo.tab(path,qurey,config) //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
  navTo.rd(path,qurey,config) //关闭当前页面，跳转到应用内的某个页面。
  navTo.rl(path,qurey,config) //关闭所有页面，打开到应用内的某个页面。

showToast

使用Vue.use后 可直接在vue中使用this.$showToast()

• 官方: showToast

  /**
   * 显示消息提示框。默认显示时间 2000ms
   * @param {string} title 要提示的内容，默认无图标
   * @param {Function} callBack 弹出结束后的回调
   * @param {object} config 显示消息提示框其他配置项
   */
  // config.time 弹出时间默认 2000
  showToast('今天是个好日子') 

navEventsTo页面跳转接收和传递参数

仅普通跳转

    /**
     * 跳转传递参数或接收参数（仅普通跳转）
     * @param {string} url 跳转地址
     * @param {Function} callback 跳转的页面触发了回调
     * @param {object} events navigateTo其他参数
     * @return {Promise} 成功返回的 success 里的 res
     */
    // config.time 弹出时间默认 2000
    navEventsTo(url,(data)=>{
        // const eventChannel = this.getOpenerEventChannel();
        // eventChannel.emit('someEvent', {title:'今天是个好日子'});
        // 接收跳转页面触发的 someEvent事件
        console.log(data) //  {title:'今天是个好日子'}
    },{
        everyEvent(data){}// 监听的其他事件
    }).then((r)=>{
        // 跳转成功，且页面已打开，可向该页面传参
        // 传参方式
        r.emit('someEvent',{title:'今天是个好日子'})
        //跳转页面接收
        // const eventChannel = this.getOpenerEventChannel();
        // eventChannel.once('someEvent', (data)=>{
        //      console.log(data) //  {title:'今天是个好日子'}
        // });
    }).catch(()=>{
        //跳转失败
    })

showModal 编程式弹窗

使用Vue.use后 可直接在vue中使用this.$showModal()

• 仅支持H5和App
• 官方: showModal

  /**
   * 显示模态弹窗
   * @param {string} content 提示内容
   * @param {object} config 其他配置 {title:'标题',confirmText:'确认',cancelText:'取消'}
   * @returns {Promise}  成功返回的 点击confirmText
   */
  // config.time 弹出时间默认 2000
  showModal('今天是个好日子',{title:'温馨提示'}).then(()=>{
      // 点击了确定
  }).catch(()=>{
      //点击了失败
  })

App端使用需要在pages.json配置

1. 新开页面模式
   • App打开可能会有卡顿，但ui同H5，默认为这个

     // #ifdef APP-PLUS
     , {
         "path": "peter-plug-in-vue/src/components/p-model/p-model",
         "style": {
             "navigationStyle": "custom",
             "backgroundColor": "transparent",
             "app-plus": {
                 "animationType": "fade-in",
                 "background": "transparent",
                 "animationDuration": "100",
                 "popGesture": "none",
                 "bounce": "none"
             }
         }
     }
     // #endif

2. subNvue 模式
   • 仅针对App
   • 使用此模式将会注册setPop和downPop全局事件

        // #ifdef APP-PLUS
        {
            "path": "pages/index/index", //tabbar页面（保证页面不会被关闭）
            "style": {
                "navigationBarTitleText": "",
                "navigationStyle": "custom",
                "app-plus": {
                    "subNVues": [{
                        "id": "modal", // 唯一标识  （不能修改，且不能重复）
                        "path": "pages/index/modalSubNVue", // 页面路径  
                        "type": "popup",
                        "style": {
                            "position": "dock",
                            "margin":"auto",
                            "background":"transparent"
                        }
                    }]
                }
            }
        }
        // #endif

• 页面可自定义，data中的值为：

modalSubNVue.nvue

<script>
    import { subNvueModal } from 'peter-plug-in-vue'
    export default {
        mixins:[subNvueModal],
    }
</script>
<template>
    <view class="pop" @click.stop="">
        <view class="model-box cc-column puff-in-center">
            <view class="_cont">
                <view class="_title">
                    <text class="_title_text">{{title}}</text>
                </view>
                <view class="_content">
                    <text class="_content_text">{{content}}</text>
                </view>
            </view>
            <view class="_mo_btn">
                <view class="_btn" @click="onClose(false)" v-if="showCancel"  ><text class="_text" :style="{color:cancelColor||color}">{{cancelText}}</text></view>
                <view class="_line" v-if="showCancel"></view>
                <view class="_btn" @click="onClose(true)" ><text class="_text" :style="{color:color}">{{confirmText}}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<style scoped lang="scss">
    $border-color: rgba(0, 0, 0, .1);
    $btn-active: rgba(0, 0, 0, .1);
    .pop {
        // width: 750rpx;
        // flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .test {
        width: 500rpx;
        // height: 500rpx;
        background: #bfa;
        border-radius: 30rpx;
    }
    .model-box {
        // margin: auto;
        width: 540rpx;
        background: #ffffff;
        border-radius: 30rpx;
        overflow: hidden;
        ._cont {
            // height: 0;
            padding: 30rpx;

            ._title {
                ._title_text {
                    font-weight: bold;
                    font-size: 36rpx;
                    line-height: 50rpx;
                    text-align: center;
                }
            }
            ._content {
                padding: 20rpx 0;
                // max-height: 60vh;
                // overflow: auto;
                margin: 20rpx 0;

                ._content_text {
                    font-size: 32rpx;
                    line-height: 40rpx;
                    text-align: center;
                }
            }
        }
        ._mo_btn {
            width: 540rpx;
            border-top: 1px $border-color solid;
            font-size: 36rpx;
            display: flex;
            flex-flow: row;
            ._btn {
                flex: 1;
                height: 80rpx;
                ._text {
                    line-height: 80rpx;
                    font-weight: bold;
                    text-align: center;
                }
                &:active {
                    background-color: $btn-active;
                }
            }
            ._line {
                width: 1px;
                background-color: $border-color;
            }
        }

    }
</style>