@tplc/wot 0.0.1

package/components/wd-textarea/wd-textarea.vue

@@ -0,0 +1,303 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <view v-if="label || useLabelSlot" :class="labelClass" :style="labelStyle">
+      <view v-if="prefixIcon || usePrefixSlot" class="wd-textarea__prefix">
+        <wd-icon
+          v-if="prefixIcon && !usePrefixSlot"
+          custom-class="wd-textarea__icon"
+          :name="prefixIcon"
+          @click="onClickPrefixIcon"
+        />
+        <slot v-else name="prefix"></slot>
+      </view>
+      <view class="wd-textarea__label-inner">
+        <text v-if="label">{{ label }}</text>
+        <slot v-else name="label"></slot>
+      </view>
+    </view>
+
+    <!-- 文本域 -->
+    <view
+      :class="`wd-textarea__value ${showClear ? 'is-suffix' : ''} ${customTextareaContainerClass} ${showWordCount ? 'is-show-limit' : ''}`"
+    >
+      <textarea
+        :class="`wd-textarea__inner ${customTextareaClass}`"
+        v-model="inputValue"
+        :show-count="false"
+        :placeholder="placeholderValue"
+        :disabled="disabled"
+        :maxlength="maxlength"
+        :focus="focused"
+        :auto-focus="autoFocus"
+        :placeholder-style="placeholderStyle"
+        :placeholder-class="inputPlaceholderClass"
+        :auto-height="autoHeight"
+        :cursor-spacing="cursorSpacing"
+        :fixed="fixed"
+        :cursor="cursor"
+        :show-confirm-bar="showConfirmBar"
+        :selection-start="selectionStart"
+        :selection-end="selectionEnd"
+        :adjust-position="adjustPosition"
+        :hold-keyboard="holdKeyboard"
+        :confirm-type="confirmType"
+        :confirm-hold="confirmHold"
+        :disable-default-padding="disableDefaultPadding"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @confirm="handleConfirm"
+        @linechange="handleLineChange"
+        @keyboardheightchange="handleKeyboardheightchange"
+      />
+      <view v-if="errorMessage" class="wd-textarea__error-message">{{ errorMessage }}</view>
+
+      <view v-if="readonly" class="wd-textarea__readonly-mask" />
+      <view class="wd-textarea__suffix">
+        <wd-icon
+          v-if="showClear"
+          custom-class="wd-textarea__clear"
+          name="error-fill"
+          @click="handleClear"
+        />
+        <view v-if="showWordCount" class="wd-textarea__count">
+          <text :class="countClass">
+            {{ currentLength }}
+          </text>
+          /{{ maxlength }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-textarea',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import { objToStyle, requestAnimationFrame, isDef, pause } from '../common/util'
+import { useCell } from '../composables/useCell'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { textareaProps } from './types'
+
+const { translate } = useTranslate('textarea')
+
+const props = defineProps(textareaProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'clear',
+  'change',
+  'blur',
+  'focus',
+  'input',
+  'keyboardheightchange',
+  'confirm',
+  'linechange',
+  'clickprefixicon',
+  'click',
+])
+
+const placeholderValue = computed(() => {
+  return isDef(props.placeholder) ? props.placeholder : translate('placeholder')
+})
+
+const clearing = ref<boolean>(false)
+const focused = ref<boolean>(false) // 控制聚焦
+const focusing = ref<boolean>(false) // 当前是否激活状态
+const inputValue = ref<string | number>('') // 输入框的值
+const cell = useCell()
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    focused.value = newValue
+  },
+  { immediate: true, deep: true },
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = isDef(newValue) ? String(newValue) : ''
+  },
+  { immediate: true, deep: true },
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+/**
+ * 展示清空按钮
+ */
+const showClear = computed(() => {
+  const { disabled, readonly, clearable, clearTrigger } = props
+  if (
+    clearable &&
+    !readonly &&
+    !disabled &&
+    inputValue.value &&
+    (clearTrigger === 'always' || (props.clearTrigger === 'focus' && focusing.value))
+  ) {
+    return true
+  } else {
+    return false
+  }
+})
+
+/**
+ * 展示字数统计
+ */
+const showWordCount = computed(() => {
+  const { disabled, readonly, maxlength, showWordLimit } = props
+  return Boolean(!disabled && !readonly && isDef(maxlength) && maxlength > -1 && showWordLimit)
+})
+
+// 表单校验错误信息
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (
+        Object.prototype.hasOwnProperty.call(rules, key) &&
+        key === props.prop &&
+        Array.isArray(rules[key])
+      ) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+// 当前文本域文字长度
+const currentLength = computed(() => {
+  return String(props.modelValue || '').length
+})
+
+const rootClass = computed(() => {
+  return `wd-textarea   ${props.label || props.useLabelSlot ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${
+    cell.border.value ? 'is-border' : ''
+  } ${props.size ? 'is-' + props.size : ''} ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''} ${
+    props.autoHeight ? 'is-auto-height' : ''
+  } ${currentLength.value > 0 ? 'is-not-empty' : ''}  ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
+})
+
+const labelClass = computed(() => {
+  return `wd-textarea__label ${props.customLabelClass} ${isRequired.value ? 'is-required' : ''}`
+})
+
+const inputPlaceholderClass = computed(() => {
+  return `wd-textarea__placeholder  ${props.placeholderClass}`
+})
+
+const countClass = computed(() => {
+  return `${currentLength.value > 0 ? 'wd-textarea__count-current' : ''} ${currentLength.value > props.maxlength ? 'is-error' : ''}`
+})
+
+const labelStyle = computed(() => {
+  return props.labelWidth
+    ? objToStyle({
+        'min-width': props.labelWidth,
+        'max-width': props.labelWidth,
+      })
+    : ''
+})
+
+onBeforeMount(() => {
+  initState()
+})
+
+// 状态初始化
+function initState() {
+  inputValue.value = formatValue(inputValue.value)
+  emit('update:modelValue', inputValue.value)
+}
+
+function formatValue(value: string | number) {
+  const { maxlength, showWordLimit } = props
+  if (showWordLimit && maxlength !== -1 && String(value).length > maxlength) {
+    return value.toString().substring(0, maxlength)
+  }
+  return value
+}
+
+function handleClear() {
+  clearing.value = true
+  focusing.value = false
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    focused.value = false
+  }
+  requestAnimationFrame(() => {
+    if (props.focusWhenClear) {
+      focused.value = true
+      focusing.value = true
+    }
+    emit('change', {
+      value: '',
+    })
+    emit('update:modelValue', inputValue.value)
+    emit('clear')
+  })
+}
+async function handleBlur({ detail }: any) {
+  // 等待150毫秒，clear执行完毕
+  await pause(150)
+
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+
+  focusing.value = false
+  emit('blur', {
+    value: inputValue.value,
+    cursor: detail.cursor ? detail.cursor : null,
+  })
+}
+function handleFocus({ detail }: any) {
+  focusing.value = true
+  emit('focus', detail)
+}
+function handleInput({ detail }: any) {
+  inputValue.value = formatValue(inputValue.value as string)
+  emit('update:modelValue', inputValue.value)
+  emit('input', detail)
+}
+function handleKeyboardheightchange({ detail }: any) {
+  emit('keyboardheightchange', detail)
+}
+function handleConfirm({ detail }: any) {
+  emit('confirm', detail)
+}
+function handleLineChange({ detail }: any) {
+  emit('linechange', detail)
+}
+function onClickPrefixIcon() {
+  emit('clickprefixicon')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-toast/index.scss

@@ -0,0 +1,66 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+@include b(toast) {
+  box-sizing: border-box;
+  display: inline-block;
+  max-width: $-toast-max-width;
+  padding: $-toast-padding;
+  font-size: $-toast-fs;
+  color: #fff;
+  background-color: $-toast-bg;
+  border-radius: $-toast-radius;
+  box-shadow: $-toast-box-shadow;
+  transition: all 0.2s;
+
+  @include e(msg) {
+    font-family: 'San Francisco', Rotobo, arial, 'PingFang SC', 'Noto SansCJK', 'Microsoft Yahei',
+      sans-serif;
+    font-size: $-toast-fs;
+    line-height: 20px;
+    text-align: left;
+  }
+  @include edeep(icon) {
+    display: inline-block;
+    margin-right: $-toast-icon-margin-right;
+    font-size: $-toast-icon-size;
+  }
+  @include e(iconWrap) {
+    font-size: 0;
+    line-height: 0;
+    vertical-align: middle;
+  }
+  @include e(iconBox) {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  @include e(iconSvg) {
+    width: $-toast-icon-size;
+    height: $-toast-icon-size;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  @include e(loading) {
+    display: inline-block;
+    margin-bottom: 16px;
+  }
+  @include m(top) {
+    transform: translate3d(0, -40vh, 0);
+  }
+  @include m(middle) {
+    transform: translate3d(0%, -18.8vh, 0);
+  }
+  @include m(bottom) {
+    transform: translate3d(0, 40vh, 0);
+  }
+  @include m(with-icon) {
+    display: inline-flex;
+    align-items: center;
+    min-width: $-toast-with-icon-min-width;
+  }
+  @include m(loading) {
+    min-width: auto;
+    padding: $-toast-loading-padding;
+  }
+}

package/components/wd-toast/index.ts

@@ -0,0 +1,109 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-29 13:29:57
+ * @LastEditTime: 2024-07-18 23:16:16
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
+ * 记得注释
+ */
+import { provide, ref } from 'vue'
+import type { Toast, ToastOptions } from './types'
+import { deepMerge } from '../common/util'
+
+/**
+ * useToast 用到的key
+ *
+ * @internal
+ */
+export const toastDefaultOptionKey = '__TOAST_OPTION__'
+
+// 默认模板
+export const defaultOptions: ToastOptions = {
+  msg: '',
+  duration: 2000,
+  loadingType: 'outline',
+  loadingColor: '#4D80F0',
+  iconColor: '#4D80F0',
+  position: 'middle',
+  show: false,
+  zIndex: 100,
+}
+
+export function useToast(selector: string = ''): Toast {
+  let timer: ReturnType<typeof setTimeout> | null = null
+  const toastOption = ref<ToastOptions>(defaultOptions) // Toast选项
+  const toastOptionKey = selector ? toastDefaultOptionKey + selector : toastDefaultOptionKey
+  provide(toastOptionKey, toastOption)
+
+  const createMethod = (toastOptions: ToastOptions) => {
+    // 优先级：options->toastOptions->defaultOptions
+    return (options: ToastOptions | string) => {
+      return show(
+        deepMerge(
+          toastOptions,
+          typeof options === 'string' ? { msg: options } : options,
+        ) as ToastOptions,
+      )
+    }
+  }
+
+  const show = (option: ToastOptions | string) => {
+    const options = deepMerge(
+      defaultOptions,
+      typeof option === 'string' ? { msg: option } : option,
+    ) as ToastOptions
+    toastOption.value = deepMerge(options, {
+      show: true,
+    }) as ToastOptions
+    // 开始渲染，并在 duration ms之后执行清除
+    timer && clearTimeout(timer)
+    if (toastOption.value.duration && toastOption.value.duration > 0) {
+      timer = setTimeout(() => {
+        timer && clearTimeout(timer)
+        close()
+      }, options.duration)
+    }
+  }
+
+  const loading = createMethod({
+    iconName: 'loading',
+    duration: 0,
+    cover: true,
+  })
+  const success = createMethod({
+    iconName: 'success',
+    duration: 1500,
+  })
+  const error = createMethod({ iconName: 'error' })
+  const warning = createMethod({ iconName: 'warning' })
+  const info = createMethod({ iconName: 'info' })
+
+  const close = () => {
+    toastOption.value = { show: false }
+  }
+  return {
+    show,
+    loading,
+    success,
+    error,
+    warning,
+    info,
+    close,
+  }
+}
+
+export const toastIcon = {
+  success() {
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>成功</title><desc>Created with Sketch.</desc><defs><filter x="-63.2%" y="-80.0%" width="226.3%" height="260.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.122733141   0 0 0 0 0.710852582   0 0 0 0 0.514812768  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><rect id="path-2" x="3.4176226" y="5.81442199" width="3" height="8.5" rx="1.5"></rect><linearGradient x1="50%" y1="0.126649064%" x2="50%" y2="100%" id="linearGradient-4"><stop stop-color="#ACFFBD" stop-opacity="0.208123907" offset="0%"></stop><stop stop-color="#10B87C" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-388.000000, -538.000000)"><g id="成功" transform="translate(388.000000, 538.000000)"><circle id="Oval" fill="#34D19D" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#34D19D" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(11.500000, 14.000000)"><mask id="mask-3" fill="white"><use xlink:href="#path-2"></use></mask><use id="Rectangle-Copy-24" fill="#C4FFEB" transform="translate(4.917623, 10.064422) rotate(-45.000000) translate(-4.917623, -10.064422) " xlink:href="#path-2"></use><rect id="Rectangle" fill="url(#linearGradient-4)" mask="url(#mask-3)" transform="translate(6.215869, 11.372277) rotate(-45.000000) translate(-6.215869, -11.372277) " x="4.71586891" y="9.52269089" width="3" height="3.69917136"></rect><rect id="Rectangle" fill="#FFFFFF" transform="translate(11.636236, 7.232744) scale(1, -1) rotate(-45.000000) translate(-11.636236, -7.232744) " x="10.1362361" y="-1.02185365" width="3" height="16.5091951" rx="1.5"></rect></g></g></g></g></svg>'
+  },
+  warning() {
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>警告</title><desc>Created with Sketch.</desc> <defs> <filter x="-240.0%" y="-60.0%" width="580.0%" height="220.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.824756567   0 0 0 0 0.450356612   0 0 0 0 0.168550194  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-580.000000, -538.000000)"> <g id="警告" transform="translate(580.000000, 538.000000)"><circle id="Oval" fill="#F0883A" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#F0883A" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 10.800000)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(2.492935, 7.171583) scale(1, -1) rotate(-360.000000) translate(-2.492935, -7.171583) " x="0.992934699" y="0.955464537" width="3" height="12.4322365" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#FFDEC5" transform="translate(2.508751, 17.202636) scale(1, -1) rotate(-360.000000) translate(-2.508751, -17.202636) " x="1.00875134" y="15.200563" width="3" height="4.00414639" rx="1.5"></rect></g></g></g></g></svg>'
+  },
+  info() {
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>常规</title><desc>Created with Sketch.</desc><defs><filter x="-300.0%" y="-57.1%" width="700.0%" height="214.3%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.362700096   0 0 0 0 0.409035039   0 0 0 0 0.520238904  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-772.000000, -538.000000)"><g id="常规" transform="translate(772.000000, 538.000000)"><circle id="Oval" fill="#909CB7" opacity="0.4" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#909CB7" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 9.800000)"><g id="编组-2" transform="translate(2.492935, 10.204709) rotate(-180.000000) translate(-2.492935, -10.204709) translate(0.992935, 0.204709)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(1.500000, 7.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -7.000000) " x="0" y="0" width="3" height="14" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#EEEEEE" transform="translate(1.500000, 18.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -18.000000) " x="0" y="16" width="3" height="4" rx="1.5"></rect></g></g></g></g></g></svg>'
+  },
+  error() {
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>toast</title><desc>Created with Sketch.</desc><defs><linearGradient x1="99.6229896%" y1="50.3770104%" x2="0.377010363%" y2="50.3770104%" id="linearGradient-1"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient><linearGradient x1="0.377010363%" y1="50.3770104%" x2="99.6229896%" y2="50.3770104%" id="linearGradient-2"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-196.000000, -538.000000)"> <g id="toast" transform="translate(196.000000, 538.000000)"><circle id="Oval" fill="#FA4350" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#FA4350" opacity="0.900000036" cx="21" cy="21" r="16"></circle><rect id="矩形" fill="#FFDFDF" transform="translate(21.071068, 21.071068) rotate(-225.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect><rect id="矩形" fill="url(#linearGradient-1)" transform="translate(19.303301, 22.838835) rotate(-225.000000) translate(-19.303301, -22.838835) " x="17.3033009" y="21.3388348" width="4" height="3"></rect><rect id="矩形" fill="url(#linearGradient-2)" transform="translate(22.838835, 19.303301) rotate(-225.000000) translate(-22.838835, -19.303301) " x="20.8388348" y="17.8033009" width="4" height="3"></rect><rect id="矩形" fill="#FFFFFF" transform="translate(21.071068, 21.071068) rotate(-315.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect></g></g></g></svg>'
+  },
+}

package/components/wd-toast/types.ts

@@ -0,0 +1,76 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-06-19 12:47:57
+ * @LastEditTime: 2024-07-18 22:18:07
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+import type { LoadingType } from '../wd-loading/types'
+
+export type ToastIconType = 'success' | 'error' | 'warning' | 'loading' | 'info' // 图标类型
+
+export type ToastPositionType = 'top' | 'middle' | 'bottom' // 提示信息框的位置类型
+
+export type ToastLoadingType = LoadingType // 提示信息加载状态类型
+
+export type ToastOptions = {
+  msg?: string
+  duration?: number
+  iconName?: ToastIconType
+  iconSize?: number
+  loadingType?: ToastLoadingType
+  loadingColor?: string
+  loadingSize?: number
+  iconColor?: string
+  position?: ToastPositionType
+  show?: boolean
+  zIndex?: number
+  /**
+   * 是否存在遮罩层
+   */
+  cover?: boolean
+  /**
+   * 图标类名
+   */
+  iconClass?: string
+  /**
+   * 类名前缀，用于使用自定义图标
+   */
+  classPrefix?: string
+  /**
+   * 完全展示后的回调函数
+   */
+  opened?: () => void
+  /**
+   * 完全关闭时的回调函数
+   */
+  closed?: () => void
+}
+
+export interface Toast {
+  // 打开Toast
+  show(toastOptions: ToastOptions | string): void
+  // 成功提示
+  success(toastOptions: ToastOptions | string): void
+  // 关闭提示
+  error(toastOptions: ToastOptions | string): void
+  // 常规提示
+  info(toastOptions: ToastOptions | string): void
+  // 警告提示
+  warning(toastOptions: ToastOptions | string): void
+  // 加载提示
+  loading(toastOptions: ToastOptions | string): void
+  // 关闭Toast
+  close(): void
+}
+
+export const toastProps = {
+  ...baseProps,
+  selector: makeStringProp(''),
+}
+
+export type ToastProps = ExtractPropTypes<typeof toastProps>