@smallwei/avue 3.8.1 → 3.8.3

package/es/packages/element-plus/sign/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div :class="b()">
+    <canvas :class="b('canvas')"
+            :width="width"
+            :height="height"
+            ref="canvas"></canvas>
+  </div>
+</template>
+
+<script>
+//绘制五角星  
+/** 
+ * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 
+ * rotate:绕对称轴旋转rotate弧度 
+ */
+function create5star (context, sx, sy, radius, color, rotato) {
+  context.save();
+  context.fillStyle = color;
+  context.translate(sx, sy);//移动坐标原点  
+  context.rotate(Math.PI + rotato);//旋转  
+  context.beginPath();//创建路径  
+  var x = Math.sin(0);
+  var y = Math.cos(0);
+  var dig = Math.PI / 5 * 4;
+  for (var i = 0; i < 5; i++) {//画五角星的五条边  
+    var x = Math.sin(i * dig);
+    var y = Math.cos(i * dig);
+    context.lineTo(x * radius, y * radius);
+  }
+  context.closePath();
+  context.stroke();
+  context.fill();
+  context.restore();
+}
+import create from "../../../core/create.mjs";
+export default create({
+  name: "sign",
+  props: {
+    width: {
+      type: Number,
+      default: 600,
+    },
+    height: {
+      type: Number,
+      default: 400
+    }
+  },
+  data () {
+    return {
+      disabled: false,
+      linex: [],
+      liney: [],
+      linen: [],
+      canvas: {},
+      context: {},
+    }
+  },
+  computed: {
+    styleName () {
+      return {
+        width: this.setPx(this.width),
+        height: this.setPx(this.height)
+      }
+    }
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    getStar (text, text1, text2) {
+      var canvas = this.canvas;
+      var context = this.context
+      // 绘制印章边框   
+      var width = canvas.width / 2;
+      var height = canvas.height / 2;
+      context.lineWidth = 7;
+      context.strokeStyle = "#f00";
+      context.beginPath();
+      context.arc(width, height, 110, 0, Math.PI * 2);
+      context.stroke();
+
+      //画五角星
+      create5star(context, width, height, 20, "#f00", 0);
+
+      // 绘制印章名称   
+      context.font = '18px SimHei';
+      context.textBaseline = 'middle';//设置文本的垂直对齐方式
+      context.textAlign = 'center'; //设置文本的水平对对齐方式
+      context.lineWidth = 1;
+      context.strokeStyle = '#f00';
+      context.strokeText(text, width, height + 50);
+
+      // 绘制印章副属性名称   
+      context.font = '14px SimHei';
+      context.textBaseline = 'middle';//设置文本的垂直对齐方式
+      context.textAlign = 'center'; //设置文本的水平对对齐方式
+      context.lineWidth = 1;
+      context.strokeStyle = '#f00';
+      context.strokeText(text2, width, height + 80);
+
+      // 绘制印章单位   
+      context.translate(width, height);// 平移到此位置,
+      context.font = '22px SimHei'
+      var count = text1.length;// 字数   
+      var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度   
+      var chars = text1.split("");
+      var c;
+      for (var i = 0; i < count; i++) {
+        c = chars[i];// 需要绘制的字符   
+        if (i == 0) context.rotate(5 * Math.PI / 6);
+        else
+          context.rotate(angle);// 
+        context.save();
+        context.translate(90, 0);// 平移到此位置,此时字和x轴垂直   
+        context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴   
+        context.strokeText(c, 0, 0);// 此点为字的中心点   
+        context.restore();
+        context.save();//锁画布(为了保存之前的画布状态)  
+      }
+      this.disabled = true
+    },
+    submit (width, height) {
+      if (!width) width = this.width;
+      if (!height) height = this.height;
+      return this.canvas.toDataURL("i/png");
+    },
+    clear () {
+      this.linex = new Array();
+      this.liney = new Array();
+      this.linen = new Array();
+      this.disabled = false
+      this.canvas.width = this.canvas.width
+
+    },
+    init () {
+      this.canvas = this.$refs.canvas;
+      var canvas = this.canvas;
+      var _safe = this;
+      //注册相关事件
+      if (typeof document.ontouchstart != "undefined") {      //适配移动设备
+        canvas.addEventListener('touchmove', onMouseMove, false);
+        canvas.addEventListener('touchstart', onMouseDown, false);
+        canvas.addEventListener('touchend', onMouseUp, false);
+      } else {      //适配电脑
+        canvas.addEventListener('mousemove', onMouseMove, false);
+        canvas.addEventListener('mousedown', onMouseDown, false);
+        canvas.addEventListener('mouseup', onMouseUp, false);
+        canvas.addEventListener('mouseleave', onMouseUp, false);
+      }
+      //初始化上下文和参数
+      this.context = canvas.getContext('2d');
+      var context = this.context;
+      this.linex = new Array();
+      this.liney = new Array();
+      this.linen = new Array();
+      var lastX = 1;
+      var lastY = 30;
+      var flag = 0;
+
+
+
+      //根据鼠标坐标获取绘图坐标
+      function getCanvasPos (canvas, evt) {
+        var rect = canvas.getBoundingClientRect();
+        var x, y;
+        if (evt.targetTouches) {
+          x = evt.targetTouches[0].clientX;
+          y = evt.targetTouches[0].clientY;
+        } else {
+          x = evt.clientX;
+          y = evt.clientY;
+        }
+        return {
+          x: (x - rect.left) * (canvas.width / rect.width),
+          y: (y - rect.top) * (canvas.height / rect.height)
+        }
+      }
+
+      //鼠标移动的时候
+      function onMouseMove (evt) {
+        if (_safe.disabled) return
+        var x = getCanvasPos(canvas, evt).x,
+          y = getCanvasPos(canvas, evt).y;
+
+        //判断是否处于按下状态
+        if (flag == 1) {
+          //如果是则画图
+          _safe.linex.push(x);
+          _safe.liney.push(y);
+          _safe.linen.push(1);
+          context.save();
+          context.translate(context.canvas.width / 2, context.canvas.height / 2);
+          context.translate(-context.canvas.width / 2, -context.canvas.height / 2);
+          context.beginPath();
+          context.lineWidth = 2;
+          for (var i = 1; i < _safe.linex.length; i++) {
+            lastX = _safe.linex[i];
+            lastY = _safe.liney[i];
+            if (_safe.linen[i] == 0)
+              context.moveTo(lastX, lastY);
+            else
+              context.lineTo(lastX, lastY);
+          }
+          context.shadowBlur = 10;
+          context.stroke();
+          context.restore();
+        }
+        evt.preventDefault();
+      }
+
+      //当鼠标按下的时候修改按下标志，并开始记录坐标
+      function onMouseDown (evt) {
+        if (_safe.disabled) return
+        var x = getCanvasPos(canvas, evt).x,
+          y = getCanvasPos(canvas, evt).y;
+        flag = 1;
+        _safe.linex.push(x);
+        _safe.liney.push(y);
+        _safe.linen.push(0);
+      }
+
+      //鼠标松开清除标志
+      function onMouseUp () {
+        if (_safe.disabled) return
+        flag = 0;
+      }
+    }
+  }
+});
+</script>

package/es/packages/element-plus/slider/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-slider v-model="text"
+             :disabled="disabled"
+             :vertical="vertical"
+             :height="setPx(height)"
+             :step="step"
+             :min="min"
+             :max="max"
+             :range="range"
+             :show-stops="showStops"
+             :show-input="showInput"
+             :marks="marks"
+             :format-tooltip="formatTooltip"
+             @click="handleClick"></el-slider>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+export default create({
+  name: "slider",
+  mixins: [props(), event()],
+  props: {
+    modelValue: {},
+    step: {
+      type: Number
+    },
+    min: {
+      type: Number
+    },
+    max: {
+      type: Number
+    },
+    marks: {
+      type: Object
+    },
+    range: {
+      type: Boolean,
+      default: false
+    },
+    showInput: {
+      type: Boolean,
+      default: false
+    },
+    showStops: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    formatTooltip: Function,
+    height: String,
+    formatTooltip: Function
+  },
+  data () {
+    return {};
+  },
+  watch: {},
+  created () { },
+  mounted () { },
+  methods: {}
+});
+</script>

package/es/packages/element-plus/switch/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <el-switch v-model="text"
+             @click="handleClick"
+             :loading="loading"
+             :inline-prompt="inlinePrompt"
+             :active-icon="activeIcon"
+             :before-change="handleBeforeChange"
+             :active-action-icon="activeActionIcon"
+             :active-text="active[labelKey]"
+             :active-value="active[valueKey]"
+             :inactive-icon="inactiveIcon"
+             :inactive-action-icon="inactiveActionIcon"
+             :inactive-value="inactive[valueKey]"
+             :inactive-text="inactive[labelKey]"
+             :width="len"
+             :disabled="disabled"></el-switch>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+export default create({
+  name: "switch",
+  mixins: [props(), event()],
+  props: {
+    inlinePrompt: Boolean,
+    inactiveActionIcon: String,
+    activeActionIcon: String,
+    inactiveIcon: String,
+    activeIcon: String,
+    len: Number,
+    beforeChange: Function
+  },
+  data () {
+    return {
+      loading: false,
+    };
+  },
+  watch: {},
+  created () { },
+  mounted () { },
+  computed: {
+    active () {
+      return this.dic[1] || {};
+    },
+    inactive () {
+      return this.dic[0] || {};
+    }
+  },
+  methods: {
+    handleBeforeChange () {
+      return new Promise((resolve) => {
+        this.loading = true
+        const callback = (result) => {
+          this.loading = false
+          return resolve(result)
+        }
+        if (typeof this.beforeChange == 'function') {
+          return this.beforeChange(callback)
+        } else {
+          return callback(true)
+        }
+      })
+
+    }
+  }
+});
+</script>
+

package/es/packages/element-plus/tabs/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="b()">
+    <el-tabs v-model="active"
+             :tab-position="parentOption.position"
+             :type="parentOption.type">
+      <el-tab-pane :name="index+''"
+                   :disabled="column.disabled"
+                   v-for="(column,index) in columnOption"
+                   :key="index">
+        <template #label>
+          <i :class="column.icon"></i>&nbsp;
+          {{column.label}}
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "tabs",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data () {
+    return {
+      active: "0",
+    };
+  },
+  watch: {
+    active () {
+      this.$emit("change", this.tabsObj);
+    }
+  },
+  computed: {
+    tabsObj () {
+      return this.columnOption[this.active];
+    },
+    parentOption () {
+      return this.option;;
+    },
+    columnOption () {
+      return this.parentOption.column || [];
+    }
+  },
+  methods: {
+    changeTabs (active) {
+      this.active = active + "";
+    }
+  }
+});
+</script>
+
+

package/es/packages/element-plus/text-ellipsis/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div :class="b()"
+       :style="{width:setPx(width,'100%')}">
+
+    <slot name="before"
+          :class="b('before')"></slot>
+    <el-tooltip :content="text"
+                :disabled="!(useTooltip&&isHide)"
+                :placement="placement">
+      <span>
+        <span :class="b('text')"
+              ref="text"
+              :key="keyIndex">{{text}}</span>
+      </span>
+    </el-tooltip>
+    <span :class="b('more')"
+          ref="more">
+      <slot name="more"></slot>
+    </span>
+    <slot name="after"
+          :class="b('after')"></slot>
+
+  </div>
+</template>
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "text-ellipsis",
+  props: {
+    text: String,
+    height: Number,
+    width: Number,
+    isLimitHeight: {
+      type: Boolean,
+      default: true
+    },
+    useTooltip: {
+      type: Boolean,
+      default: false
+    },
+    placement: String
+  },
+  data () {
+    return {
+      keyIndex: 0,
+      isHide: false
+    };
+  },
+  watch: {
+    isLimitHeight () {
+      this.init();
+    },
+    text () {
+      this.init();
+    },
+    height () {
+      this.init();
+    }
+  },
+  mounted () {
+    this.init();
+  },
+  methods: {
+    init () {
+      this.keyIndex += 1;
+      let more = this.$refs.more;
+      more.style.display = "none";
+      if (this.isLimitHeight) {
+        this.limitShow();
+      }
+    },
+    limitShow () {
+      this.$nextTick(() => {
+        let textDom = this.$refs.text;
+        let title = this.$el;
+        let more = this.$refs.more;
+        let n = 1000;
+        if (textDom) {
+          if (title.offsetHeight > this.height) {
+            more.style.display = "inline-block";
+            let text = this.text;
+            while (title.offsetHeight > this.height && n > 0) {
+              if (title.offsetHeight > this.height * 3) {
+                textDom.innerText = text = text.substring(
+                  0,
+                  Math.floor(text.length / 2)
+                );
+              } else {
+                textDom.innerText = text = text.substring(0, text.length - 1);
+              }
+              n--;
+            }
+            this.$emit("hide");
+            this.isHide = true;
+          } else {
+            this.$emit("show");
+            this.isHide = false;
+          }
+        }
+      });
+    }
+  }
+});
+</script>

package/es/packages/element-plus/time/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="b()">
+    <component :is="componentName"
+               v-model="text"
+               :popper-class="popperClass"
+               :is-range="isRange"
+               :size="size"
+               :editable="editable"
+               :disabled-hours="disabledHours"
+               :disabled-minutes="disabledMinutes"
+               :disabled-seconds="disabledSeconds"
+               :default-value="defaultValue"
+               :range-separator="rangeSeparator"
+               @visible-change="visibleChange"
+               :arrow-control="arrowControl"
+               :start-placeholder="startPlaceholder || t('time.start')"
+               :end-placeholder="endPlaceholder || t('time.end')"
+               :format="format"
+               :readonly="readonly"
+               :clearable="clearableVal"
+               :start="start"
+               :end="end"
+               :step="step"
+               :max-time="maxTime"
+               :min-time="minTime"
+               :value-format="valueFormat"
+               :placeholder="placeholder"
+               @click="handleClick"
+               :disabled="disabled">
+    </component>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+import locale from "../../../core/locale.mjs";
+export default create({
+  name: "time",
+  mixins: [props(), event(), locale],
+  data () {
+    return {};
+  },
+  props: {
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    maxTime: String,
+    minTime: String,
+    start: String,
+    end: String,
+    step: String,
+    startPlaceholder: String,
+    endPlaceholder: String,
+    rangeSeparator: String,
+    defaultValue: [String, Array],
+    valueFormat: String,
+    arrowControl: Boolean,
+    type: String,
+    format: String,
+    visibleChange: Function,
+    disabledHours: Function,
+    disabledMinutes: Function,
+    disabledSeconds: Function
+  },
+  computed: {
+    componentName () {
+      if (this.start || this.end || this.step || this.maxTime || this.minTime) {
+        return "elTimeSelect"
+      } else {
+        return "elTimePicker"
+      }
+    },
+    isRange () {
+      return this.type === "timerange";
+    }
+  }
+});
+</script>

package/es/packages/element-plus/title/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div :class="b()">
+    <p :style="styles">{{text}}</p>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+export default create({
+  name: 'title',
+  mixins: [props(), event()],
+  props: {
+    styles: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
+})
+</script>
+