网络编程
位置:首页>> 网络编程>> JavaScript>> 详解Vue.js 可拖放文本框组件的使用

详解Vue.js 可拖放文本框组件的使用

作者:yukiwu  发布时间:2024-04-27 15:47:22 

标签:vue,可拖放,文本框,组件
目录
  • 注册组件

  • 添加组件

  • 源代码

可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形。 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项。 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里。

详解Vue.js 可拖放文本框组件的使用

注册组件

注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V)。


<script type="text/x-template" id="drag-and-drop-text-box-template">

</script>
<script>
Vue.component("drag-and-drop-text-box", {
template: "#drag-and-drop-text-box-template",

</script>

添加组件

直接使用自定义的标签 <drag-and-drop-text-box></drag-and-drop-text-box> 添加可拖放文本框组件。


<drag-and-drop-text-box :columns="columns“ :input="input"></drag-and-drop-text-box>

源代码

Github

来源:https://www.cnblogs.com/yukiwu/p/14462271.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com