cnhis-design-vue 0.2.64-beta → 0.3.2-beta

package/packages/captcha/src/SlideVerify.vue

@@ -1,285 +0,0 @@
-<template>
-  <div class="slide">
-    <div v-if="title" class="verify-title">
-      <span>{{ title }}</span>
-      <div class="right-icon" @click="cancelVerify">
-        <a-icon type="close" />
-      </div>
-    </div>
-    <div class="verify-div">
-      <div class="verify-container">
-        <div class="slide-verify">
-          <div class="bg-wrap">
-            <img class="bg-img" :src="resource.resourceImg" alt="" :style="resourceStyle" />
-          </div>
-          <a-icon type="redo" class="slide-verify-refresh-icon" @click="refresh" />
-          <img ref="block" class="slide-verify-block" :src="resource.puzzleImg" draggable="false" @mousedown="sliderDown" :style="puzzleStyle" />
-          <div
-            class="slide-verify-slider"
-            :class="{
-              'container-active': containerActive,
-              'container-success': containerSuccess,
-              'container-fail': containerFail
-            }"
-            :style="{'width': resourceStyle.width}"
-          >
-            <div class="slide-verify-slider-mask" :style="{ width: sliderMaskWidth }">
-              <!-- slider -->
-              <div @mousedown="sliderDown" class="slide-verify-slider-mask-item" :style="{ left: sliderLeft }">
-                <a-icon class="slide-verify-slider-mask-item-icon" :type="containerSuccess ? 'check' : containerFail ? 'close' : 'arrow-right'" />
-              </div>
-            </div>
-            <span class="slide-verify-slider-text">{{ sliderText }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Icon } from 'ant-design-vue';
-
-const _uzzleWidth = 40;
-const _puzzleHeight = 40;
-const _puzzleYAxis = 0;
-const _resourceWidth = 420;
-const _resourceHeight = 300;
-export default {
-  name: 'slide-verify',
-  props: {
-    title: {
-      type: String,
-      default: '请完成安全验证'
-    },
-    resource: {
-      type: Object,
-      required: true
-    },
-  },
-  components: {
-    [Icon.name]: Icon
-  },
-  computed: {},
-  watch: {},
-  data() {
-    return {
-      resourceStyle: {},
-      puzzleStyle: {},
-      containerActive: false, // container active class
-      containerSuccess: false, // container success class
-      containerFail: false, // container fail class
-      sliderText: '向右拖动滑块填充拼图',
-      sliderMaskWidth: 0,
-      sliderLeft: 0,
-      isMouseDown: false,
-      originX: undefined,
-      originY: undefined,
-      block: null,
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  methods: {
-    init() {
-      this.block = this.$refs.block;
-      const { resourceWidth, resourceHeight, puzzleWidth, puzzleHeight, puzzleYAxis } = this.resource;
-      this.resourceStyle = {
-        width: resourceWidth ? `${resourceWidth}px` : `${_resourceWidth}px`,
-        height: resourceHeight ? `${resourceHeight}px` : `${_resourceHeight}px`
-      };
-      this.puzzleStyle = {
-        width: puzzleWidth ? `${puzzleWidth}px` : `${_uzzleWidth}px`,
-        height: puzzleHeight ? `${puzzleHeight}px` : `${_puzzleHeight}px`,
-        top: puzzleYAxis ? `${puzzleYAxis}px` : `${_puzzleYAxis}px`
-      };
-      document.addEventListener('mousemove', this.mousemoveEvent);
-      document.addEventListener('mouseup', this.mouseupEvent);
-    },
-    mousemoveEvent(e) {
-      if (!this.isMouseDown) return false;
-      const moveX = e.clientX - this.originX;
-      const puzzleWidth = this.resource.puzzleWidth || _uzzleWidth;
-      const resourceWidth = this.resource.resourceWidth || _resourceWidth;
-      if (moveX < 0 || moveX + 38 >= resourceWidth) return false;
-      this.sliderLeft = moveX + 'px';
-      let blockLeft = ((resourceWidth - puzzleWidth) / (resourceWidth - 38)) * moveX;
-
-      this.block.style.left = blockLeft + 'px';
-      this.containerActive = true; // add active
-      this.sliderMaskWidth = moveX + 'px';
-    },
-    mouseupEvent(e) {
-      if (!this.isMouseDown) return false;
-      this.isMouseDown = false;
-      if (e.clientX === this.originX) return false;
-      const left = parseInt(this.block.style.left);
-      this.$emit('curLeft', { left });
-    },
-    sliderDown(event) {
-      this.originX = event.clientX;
-      this.originY = event.clientY;
-      this.isMouseDown = true;
-    },
-    cancelVerify() {
-      this.$emit('cancelVerify');
-    },
-    refresh() {
-      this.$emit('refresh');
-      this.reset();
-    },
-    reset() {
-      this.containerActive = false;
-      this.containerSuccess = false;
-      this.containerFail = false;
-      this.sliderLeft = 0;
-      this.block && (this.block.style.left = 0);
-      this.sliderMaskWidth = 0;
-    }
-  },
-  beforeDestroy() {
-    document.removeEventListener('mousemove', this.mousemoveEvent);
-    document.removeEventListener('mouseup', this.mouseupEvent);
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.slide {
-  width: fit-content;
-  margin: auto;
-}
-.verify-title {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 52px;
-  padding: 10px 20px;
-  color: #828894;
-  font-size: 16px;
-  text-align: left;
-  border-bottom: 1px solid #ccc;
-  span {
-    color: #212121;
-  }
-  .right-icon {
-    cursor: pointer;
-  }
-}
-.verify-div {
-  padding: 0 20px 20px 20px;
-}
-.verify-container {
-  display: inline-block;
-  padding: 16px;
-  margin: 20px auto;
-  border: 1px solid #e7ecf1;
-  box-shadow: 0 0 10px #dadada;
-}
-.slide-verify {
-  display: inline-block;
-  position: relative;
-  .slide-verify-refresh-icon {
-    position: absolute;
-    right: 4px;
-    top: 4px;
-    font-size: 20px;
-    color: #ccc;
-    cursor: pointer;
-    &:hover {
-      transform: scale(1.05);
-      color: #fff;
-    }
-  }
-  .slide-verify-block {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    cursor: pointer;
-  }
-  .slide-verify-slider {
-    position: relative;
-    text-align: center;
-    width: 420px;
-    height: 40px;
-    line-height: 40px;
-    margin-top: 15px;
-    background: #f7f9fa;
-    color: #45494c;
-    border: 1px solid #e4e7eb;
-  }
-  .slide-verify-slider-mask {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 40px;
-    border: 0px solid #1991fa;
-    background: #d1e9fe;
-    .slide-verify-slider-mask-item {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 38px;
-      height: 38px;
-      background: #fff;
-      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
-      cursor: pointer;
-      transition: background 0.2s linear;
-    }
-    .slide-verify-slider-mask-item:hover {
-      background: #1991fa;
-      .slide-verify-slider-mask-item-icon {
-        color: #fff;
-      }
-    }
-  }
-}
-.container-active {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border-width: 1px;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #1991fa;
-    }
-  }
-}
-.container-success {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border: 1px solid #52ccba;
-    background-color: #d2f4ef;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #52ccba;
-      background-color: #52ccba !important;
-    }
-  }
-}
-.container-fail {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border: 1px solid #f57a7a;
-    background-color: #fce1e1;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #f57a7a;
-      background-color: #f57a7a !important;
-    }
-  }
-}
-.container-active .slide-verify-slider-text,
-.container-success .slide-verify-slider-text,
-.container-fail .slide-verify-slider-text {
-  display: none;
-}
-</style>

package/packages/card/index.js

@@ -1,21 +0,0 @@
-// 导入组件
-import Base from '../base';
-import Card from './src/Card';
-import CardMeta from './src/CardMeta';
-import CardGrid from './src/CardGrid';
-
-// 为组件提供 install 安装方法，供按需引入
-Card.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Card.name, Card);
-  Vue.component(CardMeta.name, CardMeta);
-  Vue.component(CardGrid.name, CardGrid);
-};
-
-Object.assign(Card, {
-  CardMeta,
-  CardGrid
-});
-
-// 默认导出组件
-export default Card;

package/packages/card/src/Card.jsx

@@ -1,12 +0,0 @@
-/**
- * @author ruanlin
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-07-05
- */
-import { Card } from 'ant-design-vue';
-import create from '@/core/create';
-
-export default create({
-  name: 'card',
-  extends: Card
-}) ;

package/packages/card/src/CardGrid.js

@@ -1,7 +0,0 @@
-import { Card } from 'ant-design-vue';
-import create from '@/core/create';
-
-export default create({
-  name: 'card-grid',
-  extends: Card.Grid
-});

package/packages/card/src/CardMeta.js

@@ -1,7 +0,0 @@
-import { Card } from 'ant-design-vue';
-import create from '@/core/create';
-
-export default create({
-  name: 'card-meta',
-  extends: Card.Meta
-});

package/packages/carousel/index.js

@@ -1,12 +0,0 @@
-// 导入组件
-import Base from '../base';
-import Carousel from './src/Carousel';
-
-// 为组件提供 install 安装方法，供按需引入
-Carousel.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Carousel.name, Carousel);
-};
-
-// 默认导出组件
-export default Carousel;

package/packages/carousel/src/Carousel.jsx

@@ -1,12 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Carousel } from 'ant-design-vue';
-import create from '@/core/create';
-
-export default create({
-  name: 'carousel',
-  extends: Carousel
-});

package/packages/cascader/index.js

@@ -1,12 +0,0 @@
-// 导入组件
-import Base from '../base';
-import Cascader from './src/Cascader';
-
-// 为组件提供 install 安装方法，供按需引入
-Cascader.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Cascader.name, Cascader);
-};
-
-// 默认导出组件
-export default Cascader;

package/packages/cascader/src/Cascader.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Cascader } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'cascader',
-  extends: Cascader
-});

package/packages/checkbox/index.js

@@ -1,30 +0,0 @@
-/*
- * @Author: zhouzhiliang
- * @LastEditors: zhouzhiliang
- * @Date: 2021-06-17 08:37:45
- * @LastEditTime: 2021-07-12 11:10:45
- * @Email: 
- * @FilePath: \cnhis-design-vue\packages\checkbox\index.js
- * @Description: 
- */
-// 导入组件
-import Base from '../base';
-import Checkbox from './src/Checkbox';
-import Group from './src/Group';
-import CheckboxImg from './src/CheckboxImg';
-
-// 为组件提供 install 安装方法，供按需引入
-Checkbox.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Checkbox.name, Checkbox);
-  Vue.component(Group.name, Group);
-  Vue.component(CheckboxImg.name, CheckboxImg);
-};
-
-Object.assign(Checkbox, {
-  Group,
-  CheckboxImg
-});
-
-// 默认导出组件
-export default Checkbox;

package/packages/checkbox/src/Checkbox.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Checkbox } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'checkbox',
-  extends: Checkbox
-});

package/packages/checkbox/src/CheckboxImg/index.vue

@@ -1,142 +0,0 @@
-<template>
-  <div>
-    <a-checkbox-group v-bind="$attrs" v-on="checkListeners" :value="checked">
-      <span v-for="(v, k) in option" :key="k" class="crosswise-checkbox-wrap">
-        <span v-if="is_contain_images == 1 && v.imageBase64" class="checkbox-img">
-          <img class="show-picture" :src="v.imageBase64" @click.stop.prevent="previewPic(v.imageBase64)" />
-        </span>
-        <a-checkbox :value="v.value">
-          <span @click.stop.prevent class="radio-text-warp">
-            {{v.text}}
-          </span>
-        </a-checkbox>
-      </span>
-    </a-checkbox-group>
-
-    <!-- 图片预览 -->
-    <viewer class="viewer-picture" ref="viewer" :images="previewImages" @inited="inited" style="display: none">
-      <template slot-scope="scope">
-        <img v-for="src in scope.images" :src="src" :key="src" />
-      </template>
-    </viewer>
-  </div>
-</template>
-
-<script>
-  import { component as Viewer } from "v-viewer";
-  import 'viewerjs/dist/viewer.css'
-  import create from '@/core/create';
-  import {
-    Checkbox
-  } from 'ant-design-vue';
-  import Vue from "vue";
-  export default create({
-    name: "checkbox-img",
-    data() {
-      let checked = this.value
-      return {
-        checkboxValList: [],
-        previewImages: [],
-        checked
-      };
-    },
-    props: {
-      value: {
-        type: Array,
-        default: () => []
-      },
-      option: {
-        type: Array,
-        default: () => []
-      },
-      is_contain_images: {
-        type: Number,
-        default: 0
-      },
-    },
-    computed: {
-      checkListeners: function () {
-        var vm = this
-        return Object.assign({}, this.$listeners, {
-          change: function (event) {
-            vm.checkChange(event)
-          }
-        })
-      },
-    },
-    watch: {
-      value: {
-        immediate: true,
-        handler(val) {
-          if (val) {
-            this.checked = val
-          }
-        }
-      }
-    },
-    beforeCreate() {
-      Vue.use(Checkbox)
-    },
-    created() {},
-    beforeMount() {},
-    mounted() {},
-    beforeUpdate() {},
-    updated() {},
-    beforeDestroy() {},
-    destroyed() {},
-    activated() {},
-    methods: {
-      inited(viewer) {
-        this.$viewer = viewer;
-      },
-
-      previewPic(item) {
-        this.previewImages = [item];
-        this.$viewer.show();
-      },
-      checkChange(e) {
-        this.$emit('change', e);
-      }
-    },
-    components: {
-      Viewer
-    }
-  });
-</script>
-
-<style lang="less" scoped>
-  .crosswise-checkbox-wrap {
-    display: inline-flex;
-    flex-direction: column;
-    padding: 0 10px;
-    align-items: center;
-  }
-
-  .show-picture {
-    height: 62px;
-    width: 62px;
-    background: #ffffff;
-    border-radius: 4px;
-    border: 1px solid #d5d5d5;
-    object-fit: cover;
-    cursor: pointer;
-  }
-
-  .crosswise-radio-container {
-    width: 100%;
-    padding: 16px 16px 16px 32px;
-    border-radius: 4px;
-    border: 1px solid #d5d5d5;
-    display: inline-flex;
-
-    /deep/ .ant-checkbox-group {
-      display: inline-flex;
-      align-items: flex-end;
-    }
-
-    /deep/ .ant-radio-group {
-      display: inline-flex;
-      align-items: flex-end;
-    }
-  }
-</style>

package/packages/checkbox/src/Group.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Checkbox } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'checkbox-group',
-  extends: Checkbox.Group
-});

package/packages/col/index.js

@@ -1,13 +0,0 @@
-// 导入组件
-// 导入组件
-import Base from '../base';
-import Col from './src/Col';
-
-// 为组件提供 install 安装方法，供按需引入
-Col.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Col.name, Col);
-};
-
-// 默认导出组件
-export default Col;

package/packages/col/src/Col.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Col } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'col',
-  extends: Col
-});

package/packages/collapse/index.js

@@ -1,18 +0,0 @@
-// 导入组件
-import Base from '../base';
-import Collapse from './src/Collapse';
-import Panel from './src/Panel';
-
-// 为组件提供 install 安装方法，供按需引入
-Collapse.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Collapse.name, Collapse);
-  Vue.component(Panel.name, Panel);
-};
-
-Object.assign(Collapse, {
-  Panel
-});
-
-// 默认导出组件
-export default Collapse;

package/packages/collapse/src/Collapse.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Collapse } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'collapse',
-  extends: Collapse
-});

package/packages/collapse/src/Panel.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Collapse } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'collapse-panel',
-  extends: Collapse.Panel
-});

package/packages/color-picker/index.js

@@ -1,10 +0,0 @@
-// 导入组件
-import colorPicker from './src/color-picker.vue';
-
-// 为组件提供 install 安装方法，供按需引入
-colorPicker.install = function(Vue) {
-  Vue.component(colorPicker.name, colorPicker);
-};
-
-// 默认导出组件
-export default colorPicker;