Skip to content

Latest commit

 

History

History
530 lines (487 loc) · 11.4 KB

使用文档.md

File metadata and controls

530 lines (487 loc) · 11.4 KB

Input输入框

<template>
  <div class="input">
    <textarea
      class="emui-input"
      :cols="cols"
      :rows="rows"
      v-if="type == 'textarea'"
    ></textarea>
    <input
      class="emui-input"
      :type="currentType"
      :class="inputClass"
      :placeholder="placeholder"
      :disabled="disabled"
      @input="handleInput"
      v-model="currentValue"
      v-else
    />
    <span
      class="iconfont eyes"
      :class="{
        'icon-yanjing_yincang': isHide,
        'icon-yanjing_xianshi': isShow,
      }"
      @click="changeyes"
    ></span>
    <span
      class="iconfont icon-chahao eyes"
      v-show="type == 'clearable'"
      @click="clearValue"
    ></span>
  </div>
</template>

<script>
import { check } from "@/utils/checkone";
export default {
  name: "emui-Input",
  data() {
    return {
      currentValue: this.value,
      currentType: this.type,
      isShow: false,
    };
  },
  watch: {
    value(newvalue) {
      this.currentValue = newvalue;
    },
  },
  computed: {
    inputClass() {
      const prefix = "emui-input";
      return {
        [`${prefix}__size-${this.size}`]: true,
        [`${prefix}__type-${this.type}`]: true,
        [`${prefix}__disabled-${this.disabled}`]: true,
      };
    },
    isHide() {
      return this.type == "password";
    },
    isClear() {
      return this.type == "clearable";
    },
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    size: {
      validator(value) {
        return check(value, ["small", "large", "default"]);
      },
      default: "default",
    },
    type: {
      type: String,
      default: "text",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    cols: {
      type: Number,
      default: 24,
    },
    rows: {
      type: Number,
      default: 2,
    },
  },
  methods: {
    handleInput(e) {
      const value = e.target.value;
      this.currentValue = value;
      this.$emit("input", value);
    },
    changeyes() {
      this.isShow = !this.isShow;
      this.isHide = !this.isHide;
      if (this.isShow) {
        this.currentType = "text";
      } else {
        this.currentType = "password";
      }
    },
    clearValue() {
      this.currentValue = "";
      this.$emit("input", this.currentValue);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/input";
</style>

Props

参数 说明 类型 可选值 默认值
type 输入框类型 String - text
value 输入框中的值 String - -
placeholder 提示信息 String - -
size 大小 String small，large，default default
disabled 是否禁用 Boolean - false
cols textarea的列数 Number - 24
rows textarea的行数 Number - 2

Events

事件名称 说明 回调参数
handleInput 将数据传递给父组件 e
clearValue 清空输入框 -

Button按钮

<template>
  <button
    :class="[
      'emui-button',
      `emui-button--${type}`,
      { plain: plain },
      { round: round },
      { circle: circle },
      { disabled: disabled },
      { cut: cut },
    ]"
    :disabled="disabled"
    @click="handleClick"
  >
    <div class="mask" v-if="disabled"></div>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: "emui-Button",
  props: {
    type: {
      type: String,
      default: "default",
      validator: function (value) {
        return (
          [
            "default",
            "success",
            "primary",
            "danger",
            "warning",
            "info",
          ].indexOf(value) !== -1
        );
      },
    },
    plain: {
      type: Boolean,
    },
    round: {
      type: Boolean,
    },
    circle: {
      type: Boolean,
    },
    icon: {
      type: [Array, Boolean],
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    mimicry: {
      type: Boolean,
      default: false,
    },
    cut: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/button.scss";
</style>

Props

参数 说明 类型 可选值 默认
type 按钮类型 String default，success，primary，danger，warning，info default
plain 是否为朴素风格 Boolean - -
round 是否为圆角按钮 Boolean - -
circle 是否为椭圆按钮 Boolean - -
disabled 是否禁用 Boolean - false
mimicry 是否为拟态风格 Boolean - false

Dialog对话框

<template>
  <transition name="dialog-fade">
    <!-- 遮罩 -->
    <!-- v-show保证对话框的显示和隐藏 -->
    <div
      class="emui-dialog--wrapper"
      v-show="visiable"
      @click.self="closeDialog"
    >
      <div
        :class="['emui-dialog', mimicry ? 'mimicry' : '']"
        :style="{ width: width, 'margin-top': top }"
      >
        <div class="emui-dialog--header">
          <slot name="title">
            <span class="emui-dialog--title">{{ title }}</span>
          </slot>
        </div>
        <div class="emui-dialog--body">
          <!-- 默认插槽 -->
          <slot></slot>
        </div>
        <div class="emui-dialog--footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "emui-Dialog",
  data() {
    return {};
  },
  methods: {
    closeDialog() {
      this.$emit("update:visiable", false); 
    },
  },
  components: {},
  props: {
    title: {
      type: String,
      default: "提示",
    },
    width: {
      type: String,
      default: "50%",
    },
    top: {
      type: String,
      default: "15vh",
    },
    visiable: {
      type: Boolean,
      default: false,
    },
    mimicry: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="scss">
@import "@/styles/dialog.scss";
</style>

Props

参数 说明 类型 可选值 默认值
title 标题文字 String 提示
width 宽度 String 50%
top 与顶部的距离 String 15vh
visiable 是否显示dialog Boolean false
mimicry 是否为拟态风格 Boolean false

Radio单选按钮

<template>
  <div class="radio">
    <span class="emui-radio-primary">
      <input
        type="radio"
        class="emui-radio"
        :value="label"
        v-model="currentValue"
        :disabled="isDisabled"
        :class="radioClass"
        :name="name"
        @change="handleChange"
      />
      <label
        class="emui-radio-label"
        :class="[{ 'label-disabled': isDisabled }]"
        >{{ label }}</label
      >
    </span>
  </div>
</template>

<script>
export default {
  name: "emui-radio",
  data() {
    return {};
  },
  props: {
    label: {
      type: [String, Number, Boolean],
      dafault: "",
    },
    value: null,
    disabled: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: "",
    },
  },
  inject: {
    radioGroup: {
      default: "",
    },
  },
  computed: {
    //判断是否被radioGroup包裹
    isGrouped() {
      return !!this.radioGroup;
    },
    currentValue: {
      get() {
        return this.isGrouped ? this.radioGroup.value : this.value;
      },
      set(value) {
        this.isGrouped
          ? this.radioGroup.$emit("input", value)
          : this.$emit("input", value);
      },
    },
    radioClass() {
      const prefix = "emui-radio";
      return {
        [`${prefix}__disabled--${this.isDisabled}`]: true,
      };
    },
    isDisabled() {
      return this.isGrouped
        ? this.radioGroup.disabled || this.disabled
        : this.isDisabled;
    },
  },
  methods: {
    handleChange() {
      this.isGrouped
        ? this.radioGroup.$emit("change", this.value)
        : this.$emit("change", this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/radio";
</style>

RadioGroup

Props

参数 说明 类型 可选值 默认值
value 值 - - -
disabled 是否禁用 Boolean - false
vertical 是否垂直排布 Boolean - false

Events

事件名称 说明 回调参数
provide 返回实例 -

Radio

Props

参数 说明 类型 可选值 默认值
label 显示文字 String，Number，Boolean - -

Events

事件名称 说明 回调参数
isGrouped 判断是否被radioGroup包裹 -
currentValue 向父组件传值 -
handleChange 传递改变的值 -

Icon图标

<template>
  <div :class="['emui-icon', 'emui-icon']">
    <div>
      <svg :style="{ width: '90px', height: '90px' }">
        <image
          :xlink:href="className"
          :style="{ width: '90px', height: '90px' }"
        />
      </svg>
      <h1>{{ name }}</h1>
    </div>
  </div>
</template>

<script>
import icon from "../Icon/icon";
export default {
  name: "emui-Icon",
  data() {
    return {
      icon,
    };
  },
  computed: {
    className() {
      for (let i = 0; i < icon.length; i++) {
        if (icon[i].class.name == this.name) {
          var link = icon[i].class.link;
          console.log();
          break;
        }
      }
      return link;
    },
  },
  props: {
    name: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "75px",
    },
    height: {
      type: String,
      default: "75px",
    },
    disabled: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/icon.scss";
</style>

Props

参数 说明 类型 可选值 默认值
name icon图标名字 String - -
width icon图标宽度 String - 75px
height icon图标高度 String - 75px