sv-app

Appearance

动态录入 sv-dynamic-input ​

动态录入键值对（适用于表单动态添加字典字段）

主要功能 ​

  1. 动态添加字典字段（初始数据可数组可对象，最终生成结果统一为数组）
  2. 支持插槽，自定义单元项数据，详见 使用示例

强烈建议优先前往 插件市场 导入示例项目参考一下。 示例工程中插件可能不是最新版本，运行之前建议先将示例工程中插件更新至最新版本哦。

安装 ​

  1. 插件市场 中点击 下载插件并导入HBuildeX。

前言 ​

插件兼容性 ​

✔️ 实测可行 ❌ 未兼容 ➖ 未实测

Vue2Vue3H5App小程序
✔️✔️✔️✔️➖

prop 参数 ​

参数类型默认值必填说明
sizeStringdefault否尺寸，可选值：small、default、large
dataArray/Object[]否数据项，详见 使用示例
lableKeyStringkey否自定义 key 键名字段
lableTextString键名否自定义 key 键名名称
valueKeyStringvalue否自定义 value 键值字段
valueTextString键值否自定义 value 键值名称
textAlignStringcenter否lable 对齐方式
labelWidthString40px否lable 宽度
minRowNumber1否最小行数
maxRowNumber999否最大行数
keyPlaceholderString请输入键名否键名占位字样
valuePlaceholderString请输入键值否键值占位字样

emit 事件 ​

事件名参数说明
changee：当前 datadata 数据改变时回调

使用示例 ​

vue
<template>
  <view class="index">
    <view class="dynamic-cell">
      <sv-dynamic-input v-model:data="dict_data" lableKey="dkey" valueKey="dvalue" textAlign="right" @change="onChange">
        <template #default="{ data }">
          <view style="display: flex; align-items: center; margin-top: 8rpx">
            <text style="flex-shrink: 0; width: 40px; text-align: right">其他</text>
            <input type="text" class="dynamic-input" v-model="data.other" placeholder="请输入其他" />
          </view>
        </template>
      </sv-dynamic-input>
    </view>
    <view class="dynamic-cell">
      <sv-dynamic-input v-model:data="dict_cus" lableKey="objkey" valueKey="objvalue" textAlign="right" @change="onChange"></sv-dynamic-input>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dict_data: [
        { dkey: "数组键1", dvalue: "数组值1", other: "数组其他1" },
        { dkey: "数组键2", dvalue: "数组值2", other: "数组其他2" },
        { dkey: "数组键3", dvalue: "数组值3", other: "数组其他3" },
      ],
      dict_cus: {
        对象键1: "对象值1",
        对象键2: "对象值2",
        对象键3: "对象值3",
      },
    };
  },
  onLoad() {},
  methods: {
    onChange(e) {
      console.log("==== onChange :", e);
    },
  },
};
</script>

<style lang="scss">
.dynamic-input {
  border: 1px solid #cccccc;
  width: 100%;
  height: calc(var(--dynamic-input-size) * 2);
  padding: 0 calc(var(--dynamic-input-size) / 2);
  margin-left: calc(var(--dynamic-input-size) / 2);
  border-radius: 4px;
  font-size: inherit;
}
</style>
vue
<template>
  <view class="index">
    <view class="dynamic-cell">
      <sv-dynamic-input v-model:data="dict_data" lableKey="dkey" valueKey="dvalue" textAlign="right" @change="onChange">
        <template #default="{ data }">
          <view style="display: flex; align-items: center; margin-top: 8rpx">
            <text style="flex-shrink: 0; width: 40px; text-align: right">其他</text>
            <input type="text" class="dynamic-input" v-model="data.other" placeholder="请输入其他" />
          </view>
        </template>
      </sv-dynamic-input>
    </view>
    <view class="dynamic-cell">
      <sv-dynamic-input v-model:data="dict_cus" lableKey="key" valueKey="value" textAlign="right" @change="onChange"></sv-dynamic-input>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const dict_data = ref([
  { dkey: "数组键1", dvalue: "数组值1", other: "其他1" },
  { dkey: "数组键2", dvalue: "数组值2", other: "其他2" },
  { dkey: "数组键3", dvalue: "数组值3", other: "其他3" },
]);

const dict_cus = ref({
  对象键1: "对象值1",
  对象键2: "对象值2",
  对象键3: "对象值3",
});

function onChange(e) {
  console.log("==== onChange :", e);
}
</script>

<style lang="scss">
.dynamic-input {
  border: 1px solid #cccccc;
  width: 100%;
  height: calc(var(--dynamic-input-size) * 2);
  padding: 0 calc(var(--dynamic-input-size) / 2);
  margin-left: calc(var(--dynamic-input-size) / 2);
  border-radius: 4px;
  font-size: inherit;
}
</style>

效果展示 ​

alt text

注意事项 ​

  1. 若要自定义额外字段时，请仔细参考上述示例中插槽部分写法。（插槽内容完全自定义，因此插入的 input 需要你自己写样式，上述示例中带有样式可以直接抄一下）

疑难解答 ​

可新建 Issue / 悬赏 来 发起提问

写在最后 ​

若对插件有任何疑问或者优化建议，欢迎在 插件评论区 留言，在插件市场中的私信消息本人可能不经常留意，导致没能及时回复， 可以加入本人的插件问答 QQ 交流群: 852637893，欢迎 进群交流。

交流群:852637893