Vue.js + Typescript实现的轻量级Dialog组件

Posted 2023-04-24

参考技术A 除了基本的alert、comfirm、prompt以外 我们还横向扩展了选项组的actions，以及自定义填充图片或者内容的dialog。

满足了基本需求外，我们还纵向扩展了点击弹窗时的异步载入能力，使其满足需要点击后加载数据，加载完成才能关闭弹窗的场景。

对于prompt，我们还提供了轻量可扩展的文本域校验以及错误提示。

由于该组件面向小型项目以及非工程化的项目，我们提供了umd打包的版本以及window打包的版本，以满足所有零碎项目的需求。

面向开发者，我们提供了完善的类型推导文件(d.ts)。使其在开发过程中拥有能够更好的体验。由于是基于Typescript开发的，我们的组件对Typescript项目拥有完全的亲和力。

除了支持基础的alert、confirm、prompt外 还扩展了

此外 支持html模板渲染，自定义prompt文本域检查等功能 满足绝大部分弹窗场景

对于非工程化项目
VueDialogX支持script标签引入

对于工程化项目，VueDialogX提供umd方式引入

VueDialogX 提供两种挂载方式
一种使用Vue.use的方式挂载

也可以引入VueDialogX来自行初始化实例

Vue js，使用 TypeScript 从 Vue 中的表单获取数据

【中文标题】Vue js，使用 TypeScript 从 Vue 中的表单获取数据

【英文标题】：Vue js, Getting data from a form in Vue using TypeScript

【发布时间】：2021-07-15 09:06:42

【问题描述】：

我目前正在尝试使用 typescript 从 Vue 的表单中获取数据，但是当我声明要使用的数据时，我会在 message geting posted 字段上发布这个数据，我不知道如何纠正这个问题，因为没有人将 vue 与 typescript 一起使用，所以我还没有找到解决方案，这里是组件的代码，我希望在弄清楚如何停止这种情况或声明数据的不同方式方面提供任何帮助

  <form class="container" id="help-form" @submit.prevent="postForm">
    <h1>Portal de Ayuda</h1>
    <h3>
      Aqui podras ponerte en contacto con asesores de GAAP I.A.P para recibir
      ayuda de manera digital.
    </h3>
    <div class="section">
      <h2>Paso 1: Selecciona el tema de ayuda</h2>
      <select id="seccion"  v-model="seccion" name="seccion">
        <option value=1>Ayuda con Nutricion</option>
        <option value=2>Ayuda con Medicina</option>
        <option value=3>Ayuda con Dental</option>
        <option value=4>Ayuda con Rehabilitacion</option>
        <option value=5>Ayuda con Tanatologia</option>
      </select>
    </div>

    <div class="section">
      <h2>Paso 2: Ingresa tu informacion de contacto</h2>

      <label for="name" class="form-label">Nombre</label>
      <input
        v-model="nombre"
        type="text"
        id="name"
        name="name"
        placeholder="Escribe tu nombre completo aqui"
      />

      <label for="mail" class="form-label">Correo Electronico</label>
      <input
        v-model="correo"
        type="mail"
        id="mail"
        name="name"
        placeholder="[e-mail]"
      />

      <label for="phone" class="form-label">Telefono</label>
      <input
        v-model="telefono"
        type="tel"
        id="phone"
        name="phone"
        placeholder="10 digitos"
      />
    </div>
    <div class="section">
      <h2>Paso 3: Escribe en que necesitas ayuda</h2>
      <textarea
        v-model="mensaje"
        name="message"
        id="message"
        placeholder="Redacta aqui tu duda en 250 caracteres o menos"
      ></textarea>
    </div>
    <div class="section">
      <h2>Paso 4: Envia tu solicitud de ayuda</h2>
      <input type="submit" name="submit" value="Enviar" />
    </div>
    <p>
      *Una vez enviada tu solicitud un asesor designado de GAAP se pondra en
      contacto contigo a la brevedad para dar seguimiento.
    </p>
  </form>
</template>

<script lang="ts">
import  defineComponent  from "vue";
export default defineComponent(
  name: "HelpForm",
  data() 
    return
      seccion: String,
      nombre: String,
      correo: String,
      telefono: Number,
      mensaje: String,
      
  ,
  methods: 
    postForm: function () 
      console.log(seccion: this.seccion, nombre: this.nombre, correo: this.correo, telefono: this.telefono);
    ,

  ,
);
</script>

【参考方案1】：

你在这里做什么：

data() 
  return
    seccion: String,
    nombre: String,
    correo: String,
    telefono: Number,
    mensaje: String, 
   
  ,

将String javascript 对象分配为变量的值，从而在视图中输出。

我通常只为变量分配空字符串值，但使用"" as string 也应该可以。但如前所述，我通常只是将它们添加为空字符串：

data() 
  return
    seccion: "",
    nombre: "",
    correo: "",
    telefono: "",
    mensaje: "", 
   
  ,

对象是另一回事，我确实使用强类型：)