1

我在我的项目中实现了 vueformulate，并且我正在从 json 数据生成表单。我需要实现截断过滤器 - 例如 80 个字符，标签阅读更多/更少。数据是动态的，因此我无法更改此对象数组中的标签。这是我的代码。任何想法？

Vue.use(VueFormulate)

new Vue({
  el: "#app",
  data () {
    return {
        data: [
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'first',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        },
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'second',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        },
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'third',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        }
      ]
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.formulate-input {
  margin-bottom: 20px;
}

.formulate-input-error {
  color: red;
  margin-top: 5px;
}
<script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <formulate-form>
        <formulate-input
            v-for="item in data"
            :key="item.name"
            v-bind="item"
        />
      </formulate-form>
</div>

默认标签长度被截断为 80 个字符，但您可以单击阅读更多并查看全文

点击阅读更多按钮后全文可见

4

1 回答 1

0

data您可以使用截断标签创建计算属性：

computed: {
  truncated() {
    return this.data.map(({ label, ...rest }) => ({ label: label.slice(0, 80), ...rest }));
  }
}


Vue.use(VueFormulate)

new Vue({
  el: "#app",
  data () {
    return {
        data: [
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'first',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        },
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'second',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        },
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'third',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        }
      ]
    }
  },
  computed: {
    truncated() {
      return this.data.map(({ label, ...rest }) => ({ label: label.slice(0, 
 80), ...rest }));
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.formulate-input {
  margin-bottom: 20px;
}

.formulate-input-error {
  color: red;
  margin-top: 5px;
}
<script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <formulate-form>
        <formulate-input
            v-for="item in truncated"
            :key="item.name"
            v-bind="item"
        />
      </formulate-form>
</div>

于 2021-10-10T07:23:30.510 回答