upd: del luckycard

src/config.json

@@ -814,18 +814,6 @@
           "sort": 3,
           "show": true,
           "author": "guoxiaoxiao"
-        },
-        {
-          "version": "3.0.0",
-          "taro": false,
-          "tarodoc": true,
-          "name": "Luckycard",
-          "type": "component",
-          "cName": "刮刮卡",
-          "desc": "适合抽奖等小游戏",
-          "sort": 4,
-          "show": true,
-          "author": "guoxiaoxiao8"
         }
       ]
     }

src/packages/__VUE/barrage/demo.vue

@@ -6,7 +6,7 @@
     </nut-cell>
     <div class="test">
       <nut-input label="文本" v-model="inputVal" />
-      <nut-button type="primary" @click="addDanmu">添加</nut-button>
+      <nut-button type="primary" shape @click="addDanmu">添加</nut-button>
     </div>
   </div>
 </template>

src/packages/__VUE/luckycard/demo.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>基本用法</h2>
-    <nut-luckycard content="1000万"></nut-luckycard>
-    <h2>内容异步</h2>
-    <nut-luckycard :content="val"></nut-luckycard>
-    <h2>刮开层和背景层都支持自定义颜色，奖品信息支持HTML</h2>
-    <nut-luckycard
-      coverColor="#F9CC9D"
-      backgroundColor="#C3D08B"
-      content="<em>1000<em><strong>元</strong>"
-    ></nut-luckycard>
-    <h2>刮开层支持图片</h2>
-    <nut-luckycard content="1000万" :coverImg="coverImage"></nut-luckycard>
-    <h2>事件回调</h2>
-    <nut-luckycard content="1000万" @open="opencard"></nut-luckycard>
-    <h2>设置刮开比列</h2>
-    <nut-luckycard
-      content="1000万"
-      @open="opencard"
-      ratio="0.2"
-    ></nut-luckycard>
-    <p></p>
-  </div>
-</template>
-
-<script lang="ts">
-import { createComponent } from '../../utils/create';
-const { createDemo } = createComponent('luckycard');
-export default createDemo({
-  props: {},
-  setup() {
-    const opencard = () => {
-      alert('刮开事件完成');
-    };
-    return { opencard };
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.demo {
-}
-</style>

src/packages/__VUE/luckycard/doc.md

@@ -1,88 +0,0 @@
-#  luckycard组件
-
-### 介绍
-    
-基于 canvas 的一个刮刮卡组件
-    
-### 安装
- ``` javascript
-import { createApp } from 'vue';
-// vue
-import { Luckcard} from '@nutui/nutui';
-
-const app = createApp();
-app.use(Luckcard);
-
-```   
-    
- ## 基本用法
-
-```html
-<nut-luckycard 
-content="1000万"
-></nut-luckycard>
-```
-## 异步数据
-
-```html
-<nut-luckycard 
-:content="val"
-></nut-luckycard>
-```
-## 支持自定义颜色
-
-```html
-<nut-luckycard 
-coverColor="#F9CC9D" 
-backgroundColor="#C3D08B" 
-content="<em>1000<em><strong>元</strong>"
-></nut-luckycard>
-```
-## 支持背景是图片
-
-```html
-<nut-luckycard 
-content="1000万" 
-:coverImg="coverImage"
-></nut-luckycard>
-```
-
-## 事件回调
-
-```html
-<nut-luckycard 
-content="1000万"
-@open="opencard"
-></nut-luckycard>
-```
-## 设置刮开比例
-
-```html
-<nut-luckycard 
-content="1000万"
-@open="opencard"
-ratio="0.2"
-></nut-luckycard>
-```
-
-## Prop
-
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| content | 奖项信息，支持html | String | ''
-| height | 卡片高度 | String | 50px
-| width | 卡片高度 | String | 300px
-| coverColor | 刮开层颜色 | String | ''
-| coverImg | 刮开层是图片（不支持跨域。设置此项后coverColor失效） | String | ''
-| fontSize | 中奖信息字号 | String | 20px
-| backgroundColor | 内容层背景颜色 | String | '#FFFFFF'
-| ratio | 触发事件的刮开比 | Number |0.8(介于0-1之间)
-
-## 事件
-
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| open | 刮开后回调函数 | function | ''
-
-
-

src/packages/__VUE/luckycard/doc.taro.md

@@ -1,87 +0,0 @@
-# luckycard
-
-### 介绍
-
-由于 taro 对原生 canvas 的转换未完成。暂时不支持该组件转小程序的应用
-
-<!-- ### 安装
-
-```javascript
-import { createApp } from 'vue';
-import { Swiper } from '@nutui/nutui-taro';
-
-const app = createApp();
-app.use(Swiper);
-```
-
-## 代码演示
-
-### 基础用法
-
-`autoplay` 是否自动切换
-`interval` 自动切换时间间隔
-`current` 当前所在滑块的 index
-`indicator-dots` 是否显示面板指示点
-`indicator-color` 指示点颜色
-
-```html
-<nut-swiper current="1" indicator-dots="true" indicator-color="#426543" autoplay="true" interval="3000">
-   <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-  </nut-swiper-item>
-</nut-swiper>
-```
-
-### 自定义大小
-
-`previous-margin` 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
-`next-margin` 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
-
-```html
-<nut-swiper previous-margin="10px" next-margin="10px">
-   <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-  </nut-swiper-item>
-</nut-swiper>
-```
-
-### 垂直方向
-
-`vertical` 滑动方向是否为纵向
-
-
-```html
-<nut-swiper vertical="true">
-    <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-  </nut-swiper-item>
-  <nut-swiper-item>
-    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-  </nut-swiper-item>
-</nut-swiper>
-``` -->
-

src/packages/__VUE/luckycard/index.scss

@@ -1,17 +0,0 @@
-.nut-luckycard {
-  position: relative;
-  .nut-cover {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .lucky-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    line-height: 100%;
-    user-select: none;
-  }
-}

src/packages/__VUE/luckycard/index.vue

@@ -1,94 +0,0 @@
-<template>
-  <div
-    class="nut-luckycard"
-    :style="{ height: height + 'px', width: width + 'px' }"
-    ref="luckycarddom"
-    id="luckycarddom"
-  >
-    <div
-      class="lucky-content"
-      v-html="content"
-      :style="{ backgroundColor: backgroundColor, fontSize: fontSize + 'px' }"
-    ></div>
-  </div>
-</template>
-<script lang="ts">
-import { ref, nextTick, onMounted, reactive } from 'vue';
-import { createComponent } from '../../utils/create';
-const { componentName, create } = createComponent('luckycard');
-import LuckyCard from './luckycard.js';
-export default create({
-  props: {
-    content: {
-      type: String,
-      default: ''
-    },
-    height: {
-      type: [String, Number],
-      default: 50
-    },
-    width: {
-      type: [String, Number],
-      default: 300
-    },
-    coverColor: {
-      type: String,
-      default: '#C5C5C5'
-    },
-    coverImg: {
-      type: String,
-      default: ''
-    },
-    fontSize: {
-      type: [String, Number],
-      default: 20
-    },
-    backgroundColor: {
-      type: String,
-      default: '#FFFFFF'
-    },
-    ratio: {
-      type: [String, Number],
-      default: 0.5
-    }
-  },
-  components: {},
-  emits: ['click', 'open'],
-
-  setup(props, { emit }) {
-    const luckycarddom = ref<HTMLElement | null>(null);
-    const state = reactive({
-      luckcard: null
-    });
-    const clearCover = () => {
-      state.luckcard.clearCover();
-    };
-    onMounted(() => {
-      let dom = document.getElementById('luckycarddom');
-      nextTick(() => {
-        console.log(LuckyCard);
-        state.luckcard = LuckyCard(
-          {
-            scratchDiv: luckycarddom.value,
-            coverColor: props.coverColor,
-            coverImg: props.coverImg,
-            ratio: Number(props.ratio),
-            callback: function () {
-              //console.log(this);
-              clearCover();
-              emit('open', this);
-            }
-          },
-          null
-        ) as any;
-      });
-    });
-
-    return { luckycarddom };
-  }
-});
-</script>
-
-<style lang="scss">
-@import 'index.scss';
-</style>

src/packages/__VUE/luckycard/luckycard.js

@@ -1,219 +0,0 @@
-/*
- * lucky-card.js - Scratch CARDS based on HTML5 Canvas
- *
- * Copyright (c) 2015 Frans Lee dmon@foxmail.com
- *
- * Licensed under the MIT license:
- *   http://www.opensource.org/licenses/mit-license.php
- *
- * Version:  1.0.3
- */
-'use strict';
-
-/**
- * Instantiate parameters
- *
- * @constructor
- */
-function LuckyCard(settings, callback) {
-  this.cover = null;
-  this.ctx = null;
-  this.scratchDiv = settings.scratchDiv;
-  this.cardDiv = null;
-  this.cHeight = 0;
-  this.cWidth = 0;
-  this.supportTouch = false;
-  this.events = [];
-  this.startEventHandler = null;
-  this.moveEventHandler = null;
-  this.endEventHandler = null;
-
-  this.opt = {
-    coverColor: '#C5C5C5',
-    coverImg: '',
-    ratio: 0.8,
-    callback: null
-  };
-
-  this.init(settings, callback);
-}
-
-function _calcArea(ctx, callback, ratio) {
-  var pixels = ctx.getImageData(0, 0, this.cWidth, this.cHeight);
-  var transPixels = [];
-  _forEach(pixels.data, function (item, i) {
-    var pixel = pixels.data[i + 3];
-    if (pixel === 0) {
-      transPixels.push(pixel);
-    }
-  });
-
-  if (transPixels.length / pixels.data.length > ratio) {
-    callback && typeof callback === 'function' && callback();
-  }
-}
-
-function _forEach(items, callback) {
-  return Array.prototype.forEach.call(items, function (item, idx) {
-    callback(item, idx);
-  });
-}
-
-function _isCanvasSupported() {
-  var elem = document.createElement('canvas');
-  return !!(elem.getContext && elem.getContext('2d'));
-}
-
-/**
- * touchstart/mousedown event handler
- */
-function _startEventHandler(event) {
-  event.preventDefault();
-  this.moveEventHandler = _moveEventHandler.bind(this);
-  this.cover.addEventListener(this.events[1], this.moveEventHandler, false);
-  this.endEventHandler = _endEventHandler.bind(this);
-  document.addEventListener(this.events[2], this.endEventHandler, false);
-}
-
-/**
- * touchmove/mousemove event handler
- */
-function _moveEventHandler(event) {
-  event.preventDefault();
-  var evt = this.supportTouch ? event.touches[0] : event;
-  var coverPos = this.cover.getBoundingClientRect();
-  var pageScrollTop =
-    document.documentElement.scrollTop || document.body.scrollTop;
-  var pageScrollLeft =
-    document.documentElement.scrollLeft || document.body.scrollLeft;
-  var mouseX = evt.pageX - coverPos.left - pageScrollLeft;
-  var mouseY = evt.pageY - coverPos.top - pageScrollTop;
-
-  this.ctx.beginPath();
-  this.ctx.fillStyle = '#FFFFFF';
-  this.ctx.globalCompositeOperation = 'destination-out';
-  this.ctx.arc(mouseX, mouseY, 10, 0, 2 * Math.PI);
-  this.ctx.fill();
-}
-
-/**
- * touchend/mouseup event handler
- */
-function _endEventHandler(event) {
-  event.preventDefault();
-  if (this.opt.callback && typeof this.opt.callback === 'function')
-    _calcArea.call(this, this.ctx, this.opt.callback, this.opt.ratio);
-  this.cover.removeEventListener(this.events[1], this.moveEventHandler, false);
-  document.removeEventListener(this.events[2], this.endEventHandler, false);
-}
-
-/**
- * Create Canvas element
- */
-LuckyCard.prototype.createCanvas = function () {
-  this.cover = document.createElement('canvas');
-  this.cover.className = 'nut-cover';
-  this.cover.height = this.cHeight;
-  this.cover.width = this.cWidth;
-  this.ctx = this.cover.getContext('2d');
-  if (this.opt.coverImg) {
-    var _this = this;
-    var coverImg = new Image();
-    coverImg.src = this.opt.coverImg;
-    coverImg.onload = function () {
-      _this.ctx.drawImage(
-        coverImg,
-        0,
-        0,
-        _this.cover.width,
-        _this.cover.height
-      );
-    };
-  } else {
-    this.ctx.fillStyle = this.opt.coverColor;
-    this.ctx.fillRect(0, 0, this.cover.width, this.cover.height);
-  }
-  this.scratchDiv.appendChild(this.cover);
-  this.cardDiv.style.opacity = 1;
-};
-
-/**
- * To detect whether support touch events
- */
-LuckyCard.prototype.eventDetect = function () {
-  if ('ontouchstart' in window) this.supportTouch = true;
-  this.events = this.supportTouch
-    ? ['touchstart', 'touchmove', 'touchend']
-    : ['mousedown', 'mousemove', 'mouseup'];
-  this.addEvent();
-};
-
-/**
- * Add touchstart/mousedown event listener
- */
-LuckyCard.prototype.addEvent = function () {
-  this.startEventHandler = _startEventHandler.bind(this);
-  this.cover.addEventListener(this.events[0], this.startEventHandler, false);
-};
-
-/**
- * Clear pixels of canvas
- */
-LuckyCard.prototype.clearCover = function () {
-  this.ctx.clearRect(0, 0, this.cover.width, this.cover.height);
-  this.cover.removeEventListener(this.events[0], this.startEventHandler);
-  this.cover.removeEventListener(this.events[1], this.moveEventHandler);
-  this.cover.removeEventListener(this.events[2], this.endEventHandler);
-};
-
-/**
- * LuckyCard initializer
- *
- * @param {Object} settings  Settings for LuckyCard
- * @param {function} callback  callback function
- */
-LuckyCard.prototype.init = function (settings, callback) {
-  if (!_isCanvasSupported()) {
-    alert('对不起，当前浏览器不支持Canvas，无法使用本控件！');
-    return;
-  }
-  var _this = this;
-  _forEach(arguments, function (item) {
-    if (typeof item === 'object') {
-      for (var k in item) {
-        if (k === 'callback' && typeof item[k] === 'function') {
-          _this.opt.callback = item[k].bind(_this);
-        } else {
-          k in _this.opt && (_this.opt[k] = item[k]);
-        }
-      }
-    } else if (typeof item === 'function') {
-      _this.opt.callback = item.bind(_this);
-    }
-  });
-  /* this.scratchDiv = document.getElementById('scratch');*/
-  if (!this.scratchDiv) {
-    return;
-  }
-  this.cardDiv = this.scratchDiv.querySelector('.lucky-content');
-  if (!this.cardDiv) {
-    return;
-  }
-  this.cHeight = this.cardDiv.clientHeight;
-  this.cWidth = this.cardDiv.clientWidth;
-  this.cardDiv.style.opacity = 0;
-  this.createCanvas();
-  this.eventDetect();
-};
-
-/**
- * To generate an instance of object
- *
- * @param {Object} settings  Settings for LuckyCard
- * @param {function} callback  callback function
- */
-LuckyCard.case = function (settings, callback) {
-  return new LuckyCard(settings, callback);
-};
-
-export default LuckyCard.case;

src/sites/mobile-taro/vue/src/business/pages/barrage/index.vue

@@ -6,7 +6,7 @@
     </nut-cell>
     <div class="test">
       <nut-input label="文本" v-model="inputVal" />
-      <nut-button type="primary" @click="addDanmu">添加</nut-button>
+      <nut-button shape type="primary" @click="addDanmu">添加</nut-button>
     </div>
   </div>
 </template>