wepy plugin iview

wepy-ปลั๊กอิน-iview

ปลั๊กอิน wepy สำหรับ iView

ลักษณะเฉพาะ

• การฉีดอัตโนมัติ
• การกำหนดค่าง่าย
• การแปลง px (rpx, rem, em, px)

การใช้งาน

1. ติดตั้ง iview-app

  $ npm i iview-weapp -S

2. ติดตั้ง wepy-plugin-iview

  $ npm i wepy-plugin-iview

3. เพิ่ม iview:{} ไปยังรายการ plugins ใน wepy.config.js

  plugins: {
    // ...
    iview : {
    }
    // ...
  }

4. รันโปรเจ็กต์และคุณสามารถใช้ส่วนประกอบทั้งหมดของ iView~~ ตัวอย่างเช่น: <i-button></i-button>

5. บทนำของ $toast และ $Message

    import { $Toast , $Message } from 'wepy-iview' 

การกำหนดค่าการฉีดทั่วโลก

ตามค่าดีฟอลต์ คอมโพเนนต์ iview ทั้งหมดจะถูกแทรกเข้าไปใน usingComponents ของเพจทั้งหมดในไดเร็กทอรี pages โดยอัตโนมัติ

  iview: {
      pagePath : 'pages' ,
      // 可选，默认为 pages。如果页面目录不为pages，或有多个目录, 通过此值设置。
      // 参考配置：
      // pagePath: 'page2'                         page2为页面有目录
      // pagePath:['page1','page2',...]            多页面目录
         
      config : {
        inject : true ,
        // 可选，默认为 true, 注入iView的全部组件。 如果不想全部, 通过此值设置。
        // 参考配置：
        // inject: false                           不注入任何组件 
        // inject:['button','icon',...]            只注入部分组件
                
        prefix : 'i-' ,
        // 可选，默认为 'i-', 组件名前缀。 如果使用其他组件名前缀, 通过此值设置。
        // 参考配置：
        // prefix: 'a-'                            button的组件名为'a-button'

        px2 : false  
        // 可选，默认为false, 开启px单位转换。 可选值 true, false, config object {...}
       // 参考配置：
       // px2: true
       // px2: {}

      //  px2: {
      //       relative: 400,          // 相对值,rpx是 相对于750宽度 ；  rem，em 是相对的 font-size
      //       decimalPlaces: 2,       //  保留的小数位数
      //       targetUnits: 'rpx'      // 目标转换的单位 支持 rpx rem em px
      //   }
      }
    } 

การกำหนดค่าการแทรกหน้า

ในหลายกรณี คุณคงไม่อยากฉีดส่วนประกอบมากเกินไป ซึ่งสามารถทำได้ผ่านการกำหนดค่าส่วนกลาง inject:false หรือ inject:['button','icon',...] แต่หน้าพิเศษบางหน้าจำเป็นต้องมีส่วนประกอบพิเศษบางอย่าง สามารถตั้งค่าได้ด้วยวิธีต่อไปนี้

1. เพิ่ม iView: ['button', 'card'] ลงในการกำหนดค่าของหน้าเพื่อการแทรกอย่างรวดเร็ว การกำหนดค่านี้อยู่ในหน้าปัจจุบันและมีน้ำหนักสูงกว่าการตั้งค่าการแทรกโดยรวม

  config = {
    iView : [ 'button' , 'card' ]
  }