mpVue 微信小程序基于vant-weapp 组件的二次封装TForm 表单组件（修改源码插槽使用）

news2025/3/10 15:07:07

一、前言

1、mpVue微信小程序不支持动态组件（<component> ）

2、mpVue微信小程序不支持动态属性及事件穿透（$attrs和$listeners）

3、mpVue微信小程序不支持render函数

二、最终效果

在这里插入图片描述

三、配置参数（Attributes）

1. 简介：基于 vant-weapp 组件的二次封装，着重于数据层面，HTML 一行代码

TForm 表单组件
代码示例：

<t-form
  ref="t-form"
  :formOpts="formOpts"
  :listDefaultInfo="formOpts.listDefaultInfo"
  :listTypeInfo="formOpts.listTypeInfo"
  />

2. 配置参数

参数说明类型默认值
className自定义类名String-
listTypeInfo下拉选择数据源（type:'date/datetime/radio/checkbox’有效）Object{}
listDefaultInfo下拉选择默认值及弹窗字段（type:'date/datetime/radio/checkbox’有效）Object{}
formOpts表单配置项Object{}
—fieldListform 表单每项 list (输入框继承van-field)Array[]
------slotName自定义表单某一项输入框String/slot-
------eventtype非date/datetime/radio/checkbox有效String-
------typedate/datetime/radio/checkbox/text/password/textareaString-
------labelform 表单每一项 titleString-
------labelCustom自定义某一项 titleString-
------slotRightIconvan-field右侧iconObject-
----------nameicon 名称String-
----------fun点击icon事件funciton-
----------coloricon颜色String-
------slotButtonvan-field右侧按钮Object-
----------name按钮显示文字String-
----------fun点击按钮事件funciton-
----------type继承van-button typeString-
----------size继承van-button sizeString-
------valueform 表单每一项传给后台的参数（对应formData每一项）String-
------required是否显示红点Booleanfalse
------list下拉选择数据源（仅仅对 type:'date/datetime/radio/checkbox’有效）String-
------defaultValue表单下拉选择回显界面值（type:'date/datetime/radio/checkbox’有效）String-
------defaultPopup表单下拉选择弹窗字段值（type:'date/datetime/radio/checkbox’有效）String-
—formData表单提交数据(对应 fieldList 每一项的 value 值)Object-
—rules三种规则校验（required(是否必填)/min：max(最小最大)/pattern(正则校验)Object-

3. events

事件名说明返回值
handleEvent输入框触发事件fieldList event 值及/输入框–输入的值

4. Methods

事件名说明参数
validateField单个字段校验传入rules值
validate整个表单校验成功返回true-

四、源码

<template>
  <div :class="['t_form',className]">
    <div v-for="(item, index) in formOpts.fieldList" :key="index">
      <!-- 日期年月日 -->
      <van-cell-group v-if="item.type === 'date'">
        <van-cell
          :title="item.label"
          :required="item.required"
          input-align="right"
          is-link
          :value-class="listDefaultInfo[item.defaultValue]?'van-cell_date_select':'van-cell_date'"
          :arrow-direction="listDefaultInfo[item.defaultPopup]?'down':''"
          :value="listDefaultInfo[item.defaultValue] || item.placeholder"
          @click="listDefaultInfo[item.defaultPopup] = true"
        />
        <van-popup :show="listDefaultInfo[item.defaultPopup]" position="bottom" round>
          <div class="popup_wrap">
            <van-datetime-picker
              :type="item.type||'date'"
              :value="formOpts.formData[item.value]"
              @cancel="listDefaultInfo[item.defaultPopup] = false"
              @confirm="(e) => {listDefaultInfo[item.defaultValue] = dayjs(e.mp.detail).format('YYYY-MM-DD'),formOpts.formData[item.value] = dayjs(e.mp.detail).format('YYYY-MM-DD'),listDefaultInfo[item.defaultPopup] = false}"
            />
          </div>
        </van-popup>
      </van-cell-group>
      <!-- 日期年月日时分秒 -->
      <van-cell-group v-else-if="item.type === 'datetime'">
        <van-cell
          :title="item.label"
          input-align="right"
          :required="item.required"
          is-link
          :value="listDefaultInfo[item.defaultValue] || item.placeholder"
          :arrow-direction="listDefaultInfo[item.defaultPopup]?'down':''"
          :value-class="listDefaultInfo[item.defaultValue]?'van-cell_date_select':'van-cell_date'"
          @click="listDefaultInfo[item.defaultPopup] = true"
        />
        <van-popup :show="listDefaultInfo[item.defaultPopup]" position="bottom" round>
          <div class="popup_wrap">
            <van-datetime-picker
              :type="item.type||'datetime'"
              :value="formOpts.formData[item.value]"
              @cancel="listDefaultInfo[item.defaultPopup] = false"
              @confirm="(e) => {listDefaultInfo[item.defaultValue] = dayjs(e.mp.detail).format('YYYY-MM-DD HH:mm:ss'),formOpts.formData[item.value] = dayjs(e.mp.detail).format('YYYY-MM-DD HH:mm:ss'),listDefaultInfo[item.defaultPopup] = false}"
            />
          </div>
        </van-popup>
      </van-cell-group>
      <!-- 下拉单选框 -->
      <van-cell-group v-else-if="item.type === 'radio'">
        <van-cell
          :title="item.label"
          input-align="right"
          :required="item.required"
          is-link
          :value="listDefaultInfo[item.defaultValue] || item.placeholder"
          :arrow-direction="listDefaultInfo[item.defaultPopup]?'down':''"
          :value-class="listDefaultInfo[item.defaultValue]?'van-cell_date_select':'van-cell_date'"
          @click="listDefaultInfo[item.defaultPopup] = true"
        />
        <van-popup :show="listDefaultInfo[item.defaultPopup]" position="bottom" round>
          <van-picker
            show-toolbar
            :title="item.label"
            :columns="listTypeInfo[item.list]"
            @cancel="listDefaultInfo[item.defaultPopup] = false"
            @confirm="(e) => {listDefaultInfo[item.defaultValue] = e.mp.detail.value,formOpts.formData[item.value] = e.mp.detail.value,listDefaultInfo[item.defaultPopup] = false}"
          />
        </van-popup>
      </van-cell-group>
      <!-- 下拉复选框 -->
      <van-cell-group v-else-if="item.type === 'checkbox'">
        <van-cell
          :title="item.label"
          input-align="right"
          :required="item.required"
          is-link
          :value="listDefaultInfo[item.defaultValue].length>0?listDefaultInfo[item.defaultValue]:listDefaultInfo[item.defaultValue].length || item.placeholder"
          :arrow-direction="listDefaultInfo[item.defaultPopup]?'down':''"
          :value-class="listDefaultInfo[item.defaultValue].length?'van-cell_date_select':'van-cell_date'"
          @click="listDefaultInfo[item.defaultPopup] = true"
        />
        <van-popup
          :show="listDefaultInfo[item.defaultPopup]"
          custom-class="t_checkbox_picker"
          position="bottom"
          round
        >
          <div class="t_checkbox_picker__toolbar">
            <div
              class="t_checkbox_picker__cancel"
              @click="listDefaultInfo[item.defaultPopup] = false"
            >取消</div>
            <div class="t_checkbox_picker__title t-oneline-overflow-hidden">{{item.label}}</div>
            <div
              class="t_checkbox_picker__confirm"
              @click="() => {formOpts.formData[item.value] = listDefaultInfo[item.defaultValue],listDefaultInfo[item.defaultPopup] = false}"
            >确认</div>
          </div>
          <van-checkbox-group
            :value="listDefaultInfo[item.defaultValue]"
            @change="(event)=>listDefaultInfo[item.defaultValue] = event.mp.detail"
          >
            <div
              v-for="(value,key) in listTypeInfo[item.list]"
              :key="key"
              class="t_checkbox_content"
            >
              <van-checkbox
                custom-class="t_checkbox"
                :name="value[arrLabel || 'label']"
                :disabled="value.disabled||false"
                shape="square"
              >{{value[arrLabel || 'label']}}</van-checkbox>
            </div>
          </van-checkbox-group>
        </van-popup>
      </van-cell-group>
      <!-- 自定义插槽 -->
      <template v-else-if="item.slotName">
        <slot :name="item.slotName"></slot>
      </template>
      <!-- 输入框 -->
      <van-cell-group v-else>
        <van-field
          :name="item.value"
          v-model="formOpts.formData[item.value]"
          :placeholder="item.placeholder||''"
          :label="item.label"
          :type="item.type"
          :disabled="item.disabled"
          :readonly="item.readonly"
          :required="item.required"
          :title-width="item.titleWidth||'6.2em'"
          :maxlength="item.maxlength||-1"
          :cursor="item.cursor||0"
          :show-word-limit="item.showWordLimit"
          :is-link="item.isLink"
          :input-align="item.inputAlign||'right'"
          :autosize="item.autosize||item.type==='textarea'"
          :left-icon="item.leftIcon||''"
          :right-icon="item.rightIcon||''"
          clearable
          @change="e => formOpts.formData[item.value] = e.mp.detail"
          @click="() =>$emit('handleEvent',item.event,formOpts.formData[item.value])"
        >
          <div
            v-if="!item.label"
            :class="item.labelNameClass"
            :style="item.labelNameStyle"
            slot="label"
          >{{item.labelCustom}}</div>
          <van-icon
            v-if="item.slotLeftIcon"
            :class="item.slotLeftIcon.class"
            :color="item.slotLeftIcon.color||'inherit'"
            @click="item.slotLeftIcon.fun"
            :name="item.slotLeftIcon.name"
            slot="left-icon"
          />
          <van-icon
            v-if="item.slotRightIcon"
            :class="item.slotRightIcon.class"
            :color="item.slotRightIcon.color||'inherit'"
            :name="item.slotRightIcon.name"
            @click="item.slotRightIcon.fun"
            slot="right-icon"
          />
          <van-button
            v-if="item.slotButton&&item.slotButton.name"
            :class="item.slotButton.class"
            :style="item.slotButton.style"
            :size="item.slotButton.size"
            :type="item.slotButton.type"
            @click="item.slotButton.fun"
            slot="button"
          >{{item.slotButton.name}}</van-button>
        </van-field>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  name: 'TMobileForm',
  components: {},
  props: {
    /** 表单配置项说明
     * formData object 表单提交数据
     * rules object 验证规则
     * fieldList Array 表单渲染数据
     */
    formOpts: {
      type: Object,
      default: () => ({})
    },
    // 下拉选项数据
    listTypeInfo: {
      type: Object,
      default: () => ({})
    },
    // 下拉选择默认值
    listDefaultInfo: {
      type: Object,
      default: () => ({})
    },
    className: String
  },
  computed: {
    dayjs() {
      return dayjs
    }
  },
  data() {
    return {
      ...this.listDefaultInfo
    }
  },
  methods: {
    // 单个字段校验
    validateField(key) {
      let value = this.formOpts.formData[key]
      if (this.formOpts.rules[key] && this.formOpts.rules[key].length) {
        for (let i = 0; i < this.formOpts.rules[key].length; i++) {
          let rule = this.formOpts.rules[key][i]
          if (rule.required) {
            // 必填校验
            if (!value) {
              return {
                valid: false,
                msg: rule.message
              }
            }
          } else if (rule.max || rule.min) {
            // 最大最小长度校验
            if (value && (value.length > rule.max || value.length < rule.min)) {
              return {
                valid: false,
                msg: rule.message
              }
            }
          } else if (rule.pattern && value) {
            // 正则校验
            let reg = new RegExp(rule.pattern)
            if (!reg.test(value)) {
              return {
                valid: false,
                msg: rule.message
              }
            }
          }
        }
      }
      return {
        valid: true
      }
    },
    // 全部校验
    validate() {
      let res = []
      Object.keys(this.formOpts.rules).forEach(key => {
        res.push(this.validateField(key))
      })
      for (let i = 0; i < res.length; i++) {
        if (!res[i].valid) {
          wx.showToast({
            title: res[i].msg,
            icon: 'none'
          })
          return false
        }
      }
      return true
    }
  }
}
</script>
<style lang="css">
.t_form .van-cell_date {
  color: var(--cell-value-color, #c8c9cc);
}
.t_form .van-cell_date_select {
  color: var(--cell-value-color, #000);
}
.t_form .t_checkbox_picker {
  min-height: 260px;
  padding: 10px 15px;
}
.t_form .t_checkbox_picker .t_checkbox_picker__toolbar {
  display: flex;
  height: var(--picker-toolbar-height, 44px);
  justify-content: space-between;
  line-height: var(--picker-toolbar-height, 44px);
}
.t_form
  .t_checkbox_picker
  .t_checkbox_picker__toolbar
  .t_checkbox_picker__cancel {
  color: var(--picker-cancel-action-color, #969799);
  font-size: var(--picker-action-font-size, 14px);
  padding: var(--picker-action-padding, 0 16px);
}

.t_form
  .t_checkbox_picker
  .t_checkbox_picker__toolbar
  .t_checkbox_picker__confirm {
  font-size: var(--picker-action-font-size, 14px);
  padding: var(--picker-action-padding, 0 16px);
  color: var(--picker-confirm-action-color, #576b95);
}
.t_form
  .t_checkbox_picker
  .t_checkbox_picker__toolbar
  .t_checkbox_picker__title {
  font-size: var(--picker-option-font-size, 16px);
  font-weight: var(--font-weight-bold, 500);
  max-width: 50%;
  text-align: center;
}
.t_form .t_checkbox_picker ._van-checkbox-group .t_checkbox_content {
  margin: 10px;
}
</style>

五、页面使用

<template>
  <div class="demo_form">
    <t-header title="表单组件示例" />
    <t-mobile-form
      ref="t-form"
      :formOpts="formOpts"
      :listDefaultInfo="formOpts.listDefaultInfo"
      :listTypeInfo="formOpts.listTypeInfo"
    ></t-mobile-form>
    <van-button block type="primary" @click="formCom">表单组件</van-button>
  </div>
</template>
<script>
export default {
  name: 'DemoForm',
  data() {
    return {
      formOpts: {
        formData: {
          account: '', // *用户账号
          password: '', // *用户密码
          name: '', // *用户昵称
          email: '', // 邮箱
          desc: '', // 描述
          sex: '', // *性别: 0:男 1:女
          status: '', // *状态: 停用，启用',
          hobby: '', // *爱好:多选
          creatDate: '', // 出生日期
          date: '', // 出生日期---时分秒
          phone: '' // 手机号码
        },
        // 下拉选择默认值
        listDefaultInfo: {
          statusDefault: '',
          statusPopup: false,
          sexDefault: '',
          sexPopup: false,
          showDatePopup: false, // 日期弹窗
          showDatetimePopup: false, // 日期弹窗(含时分秒)
          dateDefault: '', // 默认日期-- 年月日
          datetimeDefault: '', // 默认日期--含时分秒
          hobbyPopup: false, // 爱好弹窗
          hobbyDefault: [] // 爱好
        },
        fieldList: [
          { label: '账号', value: 'account', type: 'text', placeholder: '请输入账号', required: true },
          { label: '', value: 'password', type: 'password', placeholder: '请输入密码', required: true, labelCustom: '自定义label', labelNameStyle: 'color:red', slotRightIcon: { name: 'location-o', fun: this.clickIcon } },
          { label: '昵称', value: 'name', type: 'text', placeholder: '请输入昵称', required: true, slotButton: { name: '发送验证码', size: 'small', type: 'primary', fun: this.test } },
          { label: '邮箱', value: 'email', type: 'text', placeholder: '请输入邮箱', required: true },
          { label: '出生日期', value: 'creatDate', type: 'date', placeholder: '请选择出生日期', defaultValue: 'dateDefault', defaultPopup: 'showDatePopup' },
          { label: '日期时分秒', value: 'date', type: 'datetime', placeholder: '请选择日期时分秒', defaultValue: 'datetimeDefault', defaultPopup: 'showDatetimePopup' },
          { label: '性别', value: 'sex', type: 'radio', list: 'sexList', placeholder: '请选择性别', defaultValue: 'sexDefault', defaultPopup: 'sexPopup' },
          { label: '爱好', value: 'hobby', type: 'checkbox', list: 'hobbyList', placeholder: '请选择爱好(多选)', required: true, defaultValue: 'hobbyDefault', defaultPopup: 'hobbyPopup' },
          { label: '状态', value: 'status', type: 'radio', list: 'statusList', placeholder: '请选择状态', defaultValue: 'statusDefault', defaultPopup: 'statusPopup' },
          { label: '手机号码', value: 'phone', type: 'text', maxlength: 11, placeholder: '请输入手机号码', required: true },
          { label: '描述', value: 'desc', type: 'textarea', placeholder: '请输入描述', autosize: { maxHeight: 80, minHeight: 50 } }
        ],
        rules: {
          account: [
            { required: true, message: '请输入账号' },
            { min: 2, max: 4, message: '账号只能大于2个字符小于4个字符' }
          ],
          password: [{ required: true, message: '请输入密码' }],
          name: [{ required: true, message: '请输入昵称' }],
          email: [
            { required: true, message: '请输入邮箱' },
            { pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/, message: '请输入正确的邮箱' }
          ],
          hobby: [{ required: true, message: '请至少选择一个爱好' }],
          phone: [
            { required: true, message: '请输入手机号码' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' }
          ]
        },
        // 相关列表
        listTypeInfo: {
          hobbyList: [
            { label: '吉他', value: '0' },
            { label: '看书', value: '1' },
            { label: '美剧', value: '2' },
            { label: '旅游', value: '3' },
            { label: '音乐', value: '4' }
          ],
          sexList: ['女', '男'],
          statusList: ['启用', '停用']
        }
      }
    }
  },
  methods: {
    // TForm表单提交
    formCom() {
      console.log('form组件点击提交--数据', this.formOpts.formData)
      let res = this.$refs['t-form'].validate()
      console.log('规则校验是否全部通过', res)
      if (!res) return
      console.log('全部校验通过--最终数据', this.formOpts.formData)
    },
    test(val) {
      console.log('测试点击右侧按钮---', val)
    },
    clickIcon(val) {
      console.log('点击图标', val)
    }
  }
}
</script>
<style lang="scss">
.demo_form {
  width: 100%;
}
</style>

六、仓库地址

gitHub地址

码云地址

七、相关文章

Vue3 + Vite + Ts开源后台管理系统模板

基于ElementUi或AntdUI再次封装基础组件文档

基于Element-plus再次封装基础组件文档(vue3+ts)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/762173.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Qt6 Qt Quick UI原型学习QML第三篇

Qt6 Qt Quick UI原型学习QML第三篇

文章目录 效果QML代码ClickableImage.qml文件Image&#xff08;图片&#xff09;元素 解释 MyQML.qml文件 解释&#xff1a;Window元素、Item元素、Image元素、MouseArea元素、Column元素、Row元素、Grid元素、Flow元、Repeater元素 效果 QML代码 ClickableImage.qml文件 图像…
阅读更多...
[JavaScript] 第三章 Chrome 浏览器中执行 JavaScript

[JavaScript] 第三章 Chrome 浏览器中执行 JavaScript

系列文章目录 [JavaScript] 第一章 暂无 [JavaScript] 第一章 暂无 [JavaScript] 第三章 Chrome 浏览器中执行 JavaScript 文章目录 系列文章目录前言1、准备工作1.1、创建html工程1.2、创建html文件夹&#xff0c;存放html文件1.3、创建JavaScript演示html1.4、通过idea打开页…
阅读更多...
Unity打包窗口化放大、缩小、拖拽功能、无边框设置 C#

Unity打包窗口化放大、缩小、拖拽功能、无边框设置 C#

Unity打包Windows窗口实现放大、缩小、拖拽、无边框 文章目录 Unity打包Windows窗口实现放大、缩小、拖拽、无边框前言一、引入 user32.dll二、使用步骤1.引入库2.功能封装3.效果图如下&#xff0c;绑定自定义按钮 总结 前言 Unity无边框设置、窗口化放大、缩小、拖拽 提示&am…
阅读更多...
蓝牙耳机选购攻略：开放式耳机篇！如何选购开放式耳机？开放式蓝牙耳机哪些品牌比较好？过来人告诉你如何选购开放式耳机！

蓝牙耳机选购攻略：开放式耳机篇！如何选购开放式耳机？开放式蓝牙耳机哪些品牌比较好？过来人告诉你如何选购开放式耳机！

作为一个耳机爱好者&#xff0c;最近更是喜欢上了开放式蓝牙耳机&#xff0c;实际用过的起码有十几款&#xff0c;但其实最终能留下来的也只有四五款。由于前期并不知道应该如何选择开放式耳机&#xff0c;经常都会高价买到些质量差、音质也不好、漏音大的开放式耳机&#xff0…
阅读更多...
DKN和KGC阅读

DKN和KGC阅读

1. DKN 作者将外部知识图包含的知识融入新闻嵌入。 &#xff08;1&#xff09;将新闻标题单词词嵌入&#xff0c;单词链接的实体嵌入&#xff0c;以及实体的上下文嵌入(邻居实体嵌入的平均)建模为CNN输入的三个通道。 &#xff08;2&#xff09;然后使用KCNN模型&#xff0c…
阅读更多...
排序【数据结构】

排序【数据结构】

1、排序的概念 排序&#xff1a; 所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。稳定性&#xff1a; 假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排序…
阅读更多...
一个月学通Python(十九)：Cookie和Session是什么（Web开发）

一个月学通Python(十九)：Cookie和Session是什么（Web开发）

专栏介绍 结合自身经验和内部资料总结的Python教程&#xff0c;每天3章&#xff0c;1个月就能全方位的完成Python的学习并进行实战开发&#xff0c;学完了定能成为大佬&#xff01;加油吧&#xff01;卷起来&#xff01; 全部文章请访问专栏&#xff1a;《Python全栈教程&…
阅读更多...
C++：这门语言优势在哪？命名空间以及缺省参数？

C++：这门语言优势在哪？命名空间以及缺省参数？

文章目录 C的优势解决命名空间的问题 缺省参数 C的优势 C和C语言比起来有许多优势&#xff0c;这里我们先举一个例子&#xff0c;后续进行补充 解决命名空间的问题 首先看这样的代码&#xff1a; #include <stdlib.h> #include <stdio.h>int rand 0;int main(…
阅读更多...
k8s服务发现之第二弹Service详解

k8s服务发现之第二弹Service详解

创建 Service Kubernetes Servies 是一个 RESTFul 接口对象&#xff0c;可通过 yaml 文件创建。 例如&#xff0c;假设您有一组 Pod&#xff1a; 每个 Pod 都监听 9376 TCP 端口每个 Pod 都有标签 appMyApp apiVersion: v1 kind: Service metadata:name: my-service spec:s…
阅读更多...
创建users子应用

创建users子应用

1.创建&#xff1a;(venv) xxxx>python manage.py startapp users 2.移动到apps里面&#xff1b; 3.在settings里面注册子应用&#xff1b; # 注册子应用 apps/users apps/users/apps name apps.users 这个路径是什么就写什么 INSTALLED_APPS [ # 用[../namage.py st…
阅读更多...
架构训练营学习笔记：4-3存储架构模式之分片架构和分区架构

架构训练营学习笔记：4-3存储架构模式之分片架构和分区架构

分片架构的本质&#xff1a; 分片架构能提升写性能和存储性能&#xff0c;对应的主备架构的本质是备份&#xff0c;主从架构本质提升读性能。 分片架构的两个关键点&#xff1a;分片规则跟路由规则 分片规则&#xff1a; 选择基数比较大的某个数据键值&#xff0c;让数据均匀…
阅读更多...
第七章 集成学习

第七章 集成学习

文章目录 第七章 集成学习7.1个体和集成7.2Boosting和AdaBoost7.3Bagging和随机森林7.3.1Bagging7.3.2随机森林 7.4结合策略7.4.1平均法7.4.2投票法7.4.3学习法 7.6实验&#xff1a;Adaboost 第七章 集成学习 7.1个体和集成 集成学习通过构建并结合多个学习器来完成学习任务&…
阅读更多...
TS报错Cannot find module ‘xxx‘ or its corresponding type declarations

TS报错Cannot find module ‘xxx‘ or its corresponding type declarations

最近使用 vite vue3 ts 开发一个文本标注的 web 平台&#xff0c;在项目中使用了一个 js-mark 的 npm 包&#xff0c;但是在 import 导入后出现了 TS 报错&#xff1a;TS2307: Cannot find module js-mark or its corresponding type declarations.、无法解析模块 js-mark 的…
阅读更多...
Safe Policy Optimization 复现

Safe Policy Optimization 复现

复现结果 在 PointGoal1、CarGoal1、Velocity-Walker2d 三个任务上测试了 RCPO&#xff0c;CRPO 以及 Safe-Policy-Optimization 中实现的 CPO&#xff0c;PPO-Lag 算法。 CarGoal PointGoal PointGoal1 和 CarGoal1 任务相对比较困难&#xff0c;在探索初期就很容易违反约束…
阅读更多...
Dart语言（01）环境安装基础语法总结

Dart语言（01）环境安装基础语法总结

0 说明&#xff1a; 说明&#xff1a;该系列教程主要是为有一定语言基础 C/C的程序员&#xff0c;快速学习一门新语言所采用的方法&#xff0c;属于在C/C基础上扩展新语言只是体系的方式。 1 Dart语言简介 Dart亮相于2011年10月10日至12日在丹麦奥尔胡斯举行的GOTO大会&…
阅读更多...
【动手学深度学习】--09.PyTorch神经网络基础

【动手学深度学习】--09.PyTorch神经网络基础

文章目录 PyTorch神经网络基础1.层和块1.1自定义块1.2顺序块1.3在前向传播函数中执行代码 2.参数管理2.1参数访问2.1.1目标参数2.1.2一次性访问所有参数2.1.3从嵌套块收集参数 2.2参数初始化2.2.1内置初始化2.2.2自定义初始化 2.3参数绑定 3.自定义层3.1不带参数的层3.2带参数的…
阅读更多...
Python爬虫学习笔记：1688商品详情API 开发API接口文档

Python爬虫学习笔记：1688商品详情API 开发API接口文档

1688API接口是阿里巴巴集团推出的一种开放平台&#xff0c;提供了丰富的数据接口、转换工具以及开发资源&#xff0c;为开发者提供了通用的应用接口及大量数据资源&#xff0c;支持开发者在1688上进行商品搜索、订单管理、交易报表及物流等方面的操作。 1688API接口主要包含以…
阅读更多...
解密成功之道！加湿制冷设备企业如何借助CRM系统降低经营成本？

解密成功之道！加湿制冷设备企业如何借助CRM系统降低经营成本？

如何降低企业经营成本的同时提高效率是加湿制冷设备企业关注的重要问题。在这篇软文中&#xff0c;我们将探讨如何通过CRM系统来实现这一目标。企业可以借助CRM系统提高客户关系管理水平&#xff0c;优化销售流程&#xff0c;提升售后服务&#xff0c;从而降低成本&#xff0c;…
阅读更多...
价格监测的作用有哪些

价格监测的作用有哪些

随着品牌的发展&#xff0c;销售渠道也会逐步增多&#xff0c;渠道中的问题也会逐渐显现&#xff0c;比如低价、乱价、窜货、假货&#xff0c;所以品牌一般都会进行控价治理&#xff0c;控价最重要的一步便是价格监测&#xff0c;监测出来的价格高低&#xff0c;能直接反应渠道…
阅读更多...
抑郁症缓解方法：从心理到行为，全方位提升生活质量

抑郁症缓解方法：从心理到行为，全方位提升生活质量

抑郁症是一种常见的心理疾病&#xff0c;不仅仅是心情低落&#xff0c;它还伴随着一系列的身体和心理症状。在应对抑郁症时&#xff0c;除了积极寻求医学专业人士的帮助之外&#xff0c;以下这些招数也可以帮助你缓解抑郁症。 1.保持规律的生活习惯&#xff1a;抑郁症患者往往会…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023