匠言知识付费教育商城(开源前端模板).rar

  • f0_308021
    了解作者
  • 817.4KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-03-30 19:33
    上传日期
匠言知识付费教育商城(开源前端模板)
匠言知识付费教育商城(开源前端模板).rar
  • node_modules
  • jweixin-module
  • lib
  • index.js
    12.7KB
  • package.json
    1.4KB
  • README.md
    411B
  • static
  • xingqushenghuo.png
    2.6KB
  • kefu.png
    942B
  • play-big.png
    1.3KB
  • jiaoyu.png
    5KB
  • user-vip.png
    3.7KB
  • fenleixuanzhong.png
    1.3KB
  • yuanquan.png
    3.3KB
  • vipcode1.png
    1.2KB
  • qrcode.jpg
    27KB
  • user-photo.png
    3.8KB
  • nopl.png
    22.6KB
  • zhuxiao.png
    3.1KB
  • tjjg.png
    987B
  • zhibojian-tiefen.png
    2.5KB
  • account-icon.png
    1.6KB
  • txinfo.png
    2.8KB
  • next.png
    1.2KB
  • code.png
    7.4KB
  • liwu.png
    1.2KB
  • pintuan.png
    2.2KB
  • password-icon.png
    1.5KB
  • xiaoxi.png
    592B
  • pause-big.png
    892B
  • jhm.png
    2.7KB
  • vip.png
    9.7KB
  • default-image.png
    18.3KB
  • tongzhi.png
    1.9KB
  • top-c1.png
    3.8KB
  • zhibo3.png
    2.1KB
  • tui.png
    816B
  • kaoshi.png
    10.6KB
  • paiming.png
    607B
  • orders1.png
    3.3KB
  • dizhi-icon1.png
    619B
  • laba.png
    2.3KB
  • shoucang1.png
    1.1KB
  • bot-c2.png
    4.9KB
  • kechengjianjie.png
    1.8KB
  • shijian.png
    658B
  • noshouyi.png
    2.4KB
  • my2.png
    1.6KB
  • choiceness1.png
    1.5KB
  • prev.png
    1.2KB
  • rementuijian.png
    1011B
  • user-duihuan.png
    3.6KB
  • gouwuche.png
    1.6KB
  • huanyipi.png
    1.3KB
  • tgm.png
    6.4KB
  • myteam.png
    1.4KB
  • qinggan.png
    5.3KB
  • youeryuan.png
    3.3KB
  • live.png
    9.8KB
  • home2.png
    1.3KB
  • kczc.png
    966B
  • bianji.png
    905B
  • daoshi.png
    9.6KB
  • miaosha.png
    1004B
  • xiangxia11.png
    409B
  • call.png
    3.6KB
  • account.png
    3.3KB
  • duihao.png
    2KB
  • rilibeijing-hengxian.png
    9.8KB
  • weixinzhifu.png
    1.9KB
  • VIP-vip.jpg
    11.6KB
  • fenleixuanzhong1.png
    997B
  • user-beijing.png
    5.5KB
  • h5_share.png
    7.8KB
  • xinli.png
    4.7KB
  • price_bg.png
    2.7KB
  • pause1.png
    810B
  • search.png
    992B
  • dls.png
    1.3KB
  • xueli.png
    2KB
  • dizhi-icon.png
    636B
  • fenxiang-baise.png
    672B
  • zhibojian-gengduo.png
    182B
  • zhibojian-huangzuan.png
    881B
  • dingyue.png
    1.1KB
  • zaojiao.png
    2.2KB
  • miaosha-icon.png
    948B
  • jt.png
    4.8KB
  • msg.png
    811B
  • xiangyou11.png
    426B
  • viplogo1.png
    1.6KB
  • shouhou.png
    503B
  • js-yuanxing.png
    2.8KB
  • back.png
    1.1KB
  • book.png
    900B
  • STEM.png
    1.5KB
  • zixishi.png
    3.5KB
  • zhibozhong.png
    299B
  • telphone.png
    2.1KB
  • zaixiankefu.png
    3KB
内容介绍
<p align="center"> <a href="https://github.com/liub1934/uni-lb-picker" rel='nofollow' onclick='return false;'> <img src="https://img.shields.io/github/stars/liub1934/uni-lb-picker"> </a> <a href="https://github.com/liub1934/uni-lb-picker/fork" rel='nofollow' onclick='return false;'> <img src="https://img.shields.io/github/forks/liub1934/uni-lb-picker"> </a> <a href="https://github.com/liub1934/uni-lb-picker/issues" rel='nofollow' onclick='return false;'> <img src="https://img.shields.io/github/issues/liub1934/uni-lb-picker"> </a> <a href="https://www.npmjs.com/package/uni-lb-picker" rel='nofollow' onclick='return false;'> <img src="https://img.shields.io/npm/v/uni-lb-picker"> </a> <a href="https://npmcharts.com/compare/uni-lb-picker?minimal=true" rel='nofollow' onclick='return false;'> <img src="https://img.shields.io/npm/dm/uni-lb-picker"> </a> <a href="https://standardjs.com" rel='nofollow' onclick='return false;'> <img src="https://img.shields.io/badge/code%20style-standard-brightgreen"> </a> <a href="https://github.com/liub1934/uni-lb-picker/blob/master/LICENSE" rel='nofollow' onclick='return false;'> <img src="https://img.shields.io/github/license/liub1934/uni-lb-picker"> </a> </p> 插件市场里面的 picker 选择器不满足自己的需求,所以自己写了一个简单的 picker 选择器,可扩展、可自定义,一般满足日常需要。 Github:[uni-lb-picker](https://github.com/liub1934/uni-lb-picker) 插件市场:[uni-lb-picker](https://ext.dcloud.net.cn/plugin?id=1111) H5 Demo:[点击预览](https://github.liubing.me/uni-lb-picker) > 如果问题最好去 github 反馈,插件市场评论区留下五星好评即可,[点我去反馈](https://github.com/liub1934/uni-lb-picker/issues/new) > **由于之前`cancel`拼写失误,写成了`cancle`,`v1.08`现已修正,如果之前版本有使用`cancel`事件的,更新后请及时修正。** ## 兼容性 App + Nvue + H5 + 各平台小程序(快应用及 360 未测试) ## 功能 1、单选 2、多级联动,非多级联动,理论支持任意级数 3、省市区选择,基于多级联动 4、自定义选择器头部确定取消按钮颜色及插槽支持 5、选择器可视区自定义滚动个数 6、自定义数据字段,满足不同人的需求 7、自定义选择器样式 8、formatter 格式化自定义显示 9、单选及非联动选择支持扁平化的简单数据,如下形式: ```javascript // 单选列表 list1: ['选项1', '选项2', '选项2'], // 非联动选择列表 list2: [ ['选项1', '选项2', '选项3'], ['选项11', '选项22', '选项33'], ['选项111', '选项222', '选项333'] ] ``` ## 引入插件 单独引入,在需要使用的页面上 import 引入即可 ```html <template> <view> <lb-picker></lb-picker> </view> </template> <script> import LbPicker from '@/components/lb-picker' export default { components: { LbPicker } } </script> ``` 全局引入,`main.js`中 import 引入并注册即可全局使用 ```jsvascript import LbPicker from '@/components/lb-picker' Vue.component("lb-picker", LbPicker) ``` easycom 引入 `pages.json`加上如下配置: ```json "easycom": { "autoscan": true, "custom": { "lb-picker": "@/components/lb-picker/index.vue" } } ``` npm 安装引入: ```shell npm install uni-lb-picker ``` ```jsvascript import LbPicker from 'uni-lb-picker' ``` ## 选择器数据格式 ### 单选 常规数据 ```javascript list: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' } ] ``` 扁平化简单数据 ```javascript list: ['选项1', '选项2'] ``` ### 多级联动 ```javascript list: [ { label: '选项1', value: '1', children: [ { label: '选项1-1', value: '1-1', children: [ { label: '选项1-1-1', value: '1-1-1' } ] } ] } ] ``` ### 非联动选择 常规数据 ```javascript list: [ [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ], [ { label: '选项11', value: '11' }, { label: '选项22', value: '22' }, { label: '选项33', value: '33' } ], [ { label: '选项111', value: '111' }, { label: '选项222', value: '222' }, { label: '选项333', value: '333' } ] ] ``` 扁平化简单数据 ```javascript list: [ ['选项1', '选项2', '选项3'], ['选项11', '选项22', '选项33'], ['选项111', '选项222', '选项333'] ] ``` ## 调用显示选择器 通过`ref`形式手动调用`show`方法显示,隐藏同理调用`hide` ```html <lb-picker ref="picker"></lb-picker> ``` ```javascript this.$refs.picker.show() // 显示 this.$refs.picker.hide() // 隐藏 ``` `v1.1.3`新增,将需要点击的元素包裹在`lb-picker`中即可。 ```html <lb-picker> <button>点我直接打开选择器</button> </lb-picker> ``` ## 绑定值及设置默认值 支持 vue 中`v-model`写法绑定值,无需自己维护选中值的索引。 ```javascript <lb-picker v-model="value1"></lb-picker> <lb-picker v-model="value2"></lb-picker> data () { return { value1: '' // 单选 value2: [] // 多列联动选择 } } ``` ## 多个选择器 通过设置不同的`ref`,然后调用即可 ```javascript <lb-picker ref="picker1"></lb-picker> <lb-picker ref="picker2"></lb-picker> this.$refs.picker1.show() // picker1显示 this.$refs.picker2.show() // picker2显示 ``` ## 省市区选择 省市区选择是基于多列联动选择,数据来源:[https://github.com/modood/Administrative-divisions-of-China](https://github.com/modood/Administrative-divisions-of-China), 省市区文件位于`/pages/demos/area-data-min.js`,自行引入即可,可参考`demo3省市区选择`, 也可使用自己已有的省市区数据,如果数据字段不一样,也可以自定义,参考下方自定义数据字段。 ## 自定义数据字段 为了满足不同人的需求,插件支持自定义数据字段名称, 插件默认的数据字段如下形式: ```javascript list: [ { label: '选择1', value: 1, children: [] }, { label: '选择1', value: 1, children: [] } ] ``` 如果你的数据字段和上面不一样,如下形式: ```javascript list: [ { text: '选择1', id: 1, child: [] }, { text: '选择1', id: 1, child: [] } ] ``` 通过设置参数中的`props`即可,如下所示: ```javascript <lb-picker :props="myProps"></lb-picker> data () { return { myProps: { label: 'text', value: 'id', children: 'child' } } } ``` ## 插槽使用 选择器支持一些可自定义化的插槽,如选择器的取消和确定文字按钮,如果需要对其自定义处理的话,比如加个 icon 图标之类的,可使用插槽,使用方法如下: ```html <lb-picker> <view slot="cancel-text">我是自定义取消</view> <view slot="confirm-text">我是自定义确定</view> </lb-picker> ``` 也可参考示例中的`demo5`,自定义插槽元素样式交给开发者自由调整,插槽仅提供预留位置。 其他插槽见下。 ## 参数及事件 ### Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | :--------------------- | :------------------------------------------------------------------------------------------
评论