一个VueJS虚拟键盘组件

最新推荐文章于 2024-05-15 15:47:10 发布

奋斗的小鸟鸟

最新推荐文章于 2024-05-15 15:47:10 发布

阅读量5.6k

点赞数 2

分类专栏： vue-cli 文章标签： vue虚拟键盘

本文链接：https://blog.csdn.net/qq_34953053/article/details/102474297

版权

在这里插入图片描述
这个虚拟键盘就是这样的：详细属性在这里

https://javascript.ctolib.com/vue-touch-keyboard.html

我今天要说的就是不用vue-cli脚手架怎么来使用这个虚拟键盘：

HTML：



```javascript
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="vue-touch-keyboard.css">
</head>


<body>
    <div id="app">
     <input type="text" placeholder="请输入产品编号" @focus="show" data-layout="normal" />
      <legend>Compact layout</legend>
      <input type="text"  placeholder="Text input" @focus="show" data-layout="normal" />
     <vue-touch-keyboard :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept"
         :input="input" :next="next"></vue-touch-keyboard>

    

    </div>

</body>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.3.9/index.js"></script>
 <script src="vue-touch-keyboard.js"></script>
 <!-- <script src="carousel.js"></script> -->
 <script src="inde.js"></script>
</html>

其他js依赖库都是在其他地方下载的，所以要自己去找

inde.js

var apps =

最低0.47元/天解锁文章

奋斗的小鸟鸟

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个VueJS虚拟键盘组件

这个虚拟键盘就是这样的：详细属性在这里https://javascript.ctolib.com/vue-touch-keyboard.html我今天要说的就是不用vue-cli脚手架怎么来使用这个虚拟键盘：HTML：```javascript<!DOCTYPE html><html lang="en"><head> <met...
复制链接

扫一扫