vue 组件开发 ---- rui-vue-poster 海报制作

  <script src="./js/rui-vue-poster.js"></script>

  <div class="rui-create-poster" @click="showPopup()">点击生成海报去分享</div>
  <div class="rui-layer-mark" v-show="popupshow" @click="popupshow=false">
    <div class="rui-layer-content" @click.stop="stop()">
      <div class="rui-poster-content">
        <rui-vue-poster :posterinfos="posterInfos" :scale="500" @success="success"></rui-vue-poster>
      </div>
      <div class="rui-poster-text">长按图片3秒可直接分享好友，与好友共享此刻心情或保存至手机</div>
    </div>
  </div>

  var app = new Vue({
    el: '#app',
    data:{
      popupshow: false,
      posterInfos: {},
      index: 0,
      posters: [
        {
          imgurl: './images/imgfengjing1.jpg',
          text: '一个背包，几本书，所有喜欢的歌，一张单程车票，一颗潇洒的心。'
        },
        {
          imgurl: './images/imgfengjing2.jpg',
          text: '下一站，家。'
        },
        {
          imgurl: './images/imgfengjing3.jpg',
          text: '在路上，永远年轻，永远热泪盈眶。'
        },
      ]
    },
    methods: {
      showPopup(){
        this.popupshow = true; 
        this.canvasDataInit();
      },
      changeImg(){
        if(this.index < this.posters.length - 1){
          this.index += 1;
        } else {
          this.index = 0;
        }
      },
      stop(){
        this.posterInfos = {};
        return false;
      },
      success(canvas) {
        this.canvas = canvas;
      },
      // 海报数据
      canvasDataInit() {
        let shareInfos = {
          width: 400,
          height: 485,
          backgroundColor: '#fff',
          views: [{
              type: 'image',
              url: this.posters[this.index].imgurl,
              css: {
                top: 0,
                left: 0,
                width: 400,
                height: 400
              },
              list: [
                {
                  type: 'text',
                  text: this.posters[this.index].text,
                  css: {
                    color: '#ffffff',
                    lineHeight: 32,
                    maxLines: 2,
                    textAlign: 'left',
                    width: 360,
                    fontSize: 20,
                    top: 345,
                    left: 20
                  }
                }
              ]
            },
            {
              type: 'image',
              url: './images/qrcode.jpg',
              css: {
                top: 413,
                left: 20,
                width: 60,
                height: 60
              }
            },
            {
              type: 'text',
              text: `长按识别二维码，在[WX-RUI]体验更多效果`,
              css: {
                color: '#222222',
                lineHeight: 32,
                maxLines: 1,
                textAlign: 'left',
                width: 280,
                fontSize: 13,
                top: 435,
                left: 100
              }
            },
            {
              type: 'text',
              text: `再体验，在[WX-RUI]`,
              css: {
                color: '#222222',
                lineHeight: 32,
                maxLines: 1,
                textAlign: 'left',
                width: 280,
                fontSize: 16,
                top: 460,
                left: 100
              }
            }
          ]
        };
        this.posterInfos = shareInfos;
      }
    }
  })