easyclick界面使用vue

已于 2023-04-23 11:10:31 修改
阅读量1k 收藏 3
点赞数
分类专栏： vue 快速入门 文章标签： vscode vue.js 前端
于 2022-04-01 11:12:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aitanxiaofeng/article/details/123893009
版权

百度云下载demo,提取码：9u4q

vue下载地址: https://cdn.staticfile.org/vue/2.2.2/vue.min.js

vue基础教程: https://www.runoob.com/vue2/vue-tutorial.html


<script>

    new Vue({
        el: "#app",
        data() {
            return {
                form:{
                    start_h: "",
                    start_m: "",
                    start_s: "",
                    end_h: "",
                    end_m: "",
                    end_s: "",
                    wait_m: "",
                    wait_m_restart: "",
                    step: "",
                    wxSaveIndex: "",
                    mark: "",
                    selectNum: "",
                    wechatText: "",
                    model: "1",//默认选中1
                    checkSendText: "",
                    checkNum: "",
                    lastUsername1: "",
                    lastUsername2: "",
                    checkAgain_m: "",
                    checkEndTime: "",
                }
            }
        },
        methods: {
            save(){
              for (let key in this.form){
                  //console.log(key)
                  window.ec.saveConfig(key, this.form[key]);
              }
                window.ec.toast("保存成功");
            },
            init(){
                for (let key in this.form){
                    //console.log(key+":"+window.ec.getConfig(key))
                    this.form[key] = window.ec.getConfig(key);
                }
                window.ec.hideStartBtn();
            }
        },
        created(){
          this.init()
        },
    })

</script>

优化后完整代码

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- head 中 -->
    <link rel="stylesheet" href="css/materialize.min.css">

    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>H5 网页示例</title>
</head>
<body style="margin-left: 10px;margin-right: 10px">
<div id="app">
    <br>
    <div>
        <div>运行模式选择</div>
        <p>
            <label>
                <input name="radio" class="with-gap" v-model="form.model" value="1" type="radio"/>
                <span>好友被删除检测+微商相册转发</span>
            </label>
        </p>
        <p>
            <label>
                <input name="radio" class="with-gap" v-model="form.model" value="2" type="radio"/>
                <span>微商相册转发</span>
            </label>
        </p>
    </div>
    <div v-show="form.model==='1'">
        <div class="card horizontal">
            <div class="card-stacked">
                <div class="card-content">
                    <span class="card-title">好友检测设置</span>
                    <div class="col s12">
                        检测发送文本:
                        <div class="input-field inline">
                            <input type="text" class="validate" v-model="form.checkSendText" style="width: 100px">
                        </div>
                    </div>
                    <div class="col s12">
                        每次检测人数:
                        <div class="input-field inline">
                            <input type="text" class="validate" v-model="form.checkNum" style="width: 50px">
                        </div>
                    </div>
                    <div class="col s12">
                        多少分钟再次检测一次:
                        <div class="input-field inline">
                            <input type="text" class="validate" v-model="form.checkAgain_m" style="width: 50px">
                        </div>
                    </div>
                    <div class="col s12">
                        上次检测到用户名-微信1:
                        <div class="input-field inline">
                            <input type="text" class="validate" v-model="form.lastUsername1" style="width: 100px">
                        </div>
                    </div>
                    <div class="col s12">
                        上次检测到用户名-微信2:
                        <div class="input-field inline">
                            <input type="text" class="validate" v-model="form.lastUsername2" style="width: 100px">
                        </div>
                    </div>
                    <div class="input-field col s12" hidden>
                        <textarea id="checkEndTime" disabled="disabled" name="checkEndTime" v-model="form.checkEndTime"
                                  class="materialize-textarea" data-length="120"></textarea>
                        <label for="checkEndTime">检测起始时间戳</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card horizontal">
        <div class="card-stacked">
            <div class="card-content">
                <span class="card-title">微商相册转发设置</span>
                <div class="col s12">
                    发布的开始时间:
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.start_h" id="start_h" style="width: 50px">
                    </div>
                    <span>时</span>
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.start_m" id="start_m" style="width: 30px">
                    </div>
                    <span>分</span>
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.start_s" id="start_s" style="width: 30px">
                    </div>
                    <span>秒</span>
                </div>
                <div class="col s12">
                    发布的结束时间:
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.end_h" id="end_h" style="width: 50px">
                    </div>
                    <span>时</span>
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.end_m" id="end_m" style="width: 30px">
                    </div>
                    <span>分</span>
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.end_s" id="end_s" style="width: 30px">
                    </div>
                    <span>秒</span>
                </div>
                <div class="col s12">
                    发布的间隔分钟:
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.wait_m" id="wait_m" style="width: 50px">
                    </div>
                    <span>分钟发布一次</span>
                </div>
                <div class="col s12">
                    重启脚本的间隔分钟:
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.wait_m_restart" id="wait_m_restart" style="width: 50px">
                    </div>
                    <span>重启一次</span>
                </div>
                <div class="col s12">
                    转发多选人数:
                    <div class="input-field inline">
                        <input type="text" class="validate" v-model="form.selectNum" id="selectNum" style="width: 50px">
                    </div>
                </div>
                <div class="input-field col s12" hidden>
        <textarea id="wxSaveIndex" name="wxSaveIndex" v-model="form.wxSaveIndex" class="materialize-textarea"
                  data-length="120"></textarea>
                    <label for="wxSaveIndex">wxSaveIndex</label>
                </div>
                <div class="input-field col s12" hidden>
                    <textarea id="step" name="step" v-model="form.step" class="materialize-textarea" data-length="120"></textarea>
                    <label for="step">步骤</label>
                </div>
                <div class="input-field col s12">
        <textarea id="wechatText" v-model="form.wechatText" name="wechatText" class="materialize-textarea"
                  data-length="120"></textarea>
                    <label for="mark">私信留言文本</label>
                </div>
                <div class="input-field col s12">
                    <textarea id="mark" name="mark" v-model="form.mark" class="materialize-textarea" data-length="120"></textarea>
                    <label for="mark">备注</label>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col s6">
            <button class="btn waves-effect waves-light " type="button" name="action" @click="save()">保存参数
            </button>
        </div>
        <div class="col s6">
            <button class="btn waves-effect waves-light" type="button" name="action"
                    onclick="javascript:window.ec.start()">
                启动脚本
            </button>
        </div>
    </div>
</div>

<script src="htmljs/materialize.min.js"></script>
<script src="htmljs/vue@2.2.min.js"></script>
</body>
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                form:{
                    start_h: "",
                    start_m: "",
                    start_s: "",
                    end_h: "",
                    end_m: "",
                    end_s: "",
                    wait_m: "",
                    wait_m_restart: "",
                    step: "",
                    wxSaveIndex: "",
                    mark: "",
                    selectNum: "",
                    wechatText: "",
                    model: "1",//默认选中1
                    checkSendText: "",
                    checkNum: "",
                    lastUsername1: "",
                    lastUsername2: "",
                    checkAgain_m: "",
                    checkEndTime: "",
                }
            }
        },
        methods: {
            save(){
              for (let key in this.form){
                  //console.log(key)
                  window.ec.saveConfig(key, this.form[key]);
              }
                window.ec.toast("保存成功");
            },
            init(){
                for (let key in this.form){
                    //console.log(key+":"+window.ec.getConfig(key))
                    this.form[key] = window.ec.getConfig(key);
                }
                window.ec.hideStartBtn();
            }
        },
        created(){
          this.init()
        },
    })

</script>
</html>
绅士1993
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyClick 原生UI教程
Mr、老鬼的博客/https://laoguicom.top/doc/2/
04-10 1万+
EasyClick 原生UI教程总纲 这篇主要列出本人创作的EasyClick 原生UI连载系列所有文章。
vue界面发送表情的实现代码
10-14
在Vue.js中实现界面发送表情的功能，通常涉及到前端UI展示、用户交互以及数据处理等多个方面。下面我们将详细探讨如何在Vue项目中实现这一功能。 首先，我们从给出的代码片段中可以看到，Vue模板中有一个`<section>...
EasyClick 全分辨率免ROOT触动精灵插件
08-14
EasyClick 全分辨率免ROOT按键精灵插件，https://easyclick.gitee.io,免ROOT不限手机环境，支持Android 5.0到10，全节点分析不限分辨率
easyclick基础了解
weixin_64699904的博客
04-12 8937
easyclick初步了解认识
EasyClick常见拓展函数及应用
最新发布
chajinglong的专栏
05-15 378
十天学会从入门到实战游戏脚本开发教程--EassyClick入门教程：2024 十天学会EasyClick从入门到实战，自动化脚本，游戏脚本开发系列教程_哔哩哔哩_bilibili2024 十天学会EasyClick从入门到实战，自动化脚本，游戏脚本开发系列教程共计32条视频，包括：学习EasyClick的目的和官网简介、EC开发工具安装与破解、创建第一个项目等，UP主更多精彩视频，请关注UP账号。easyclick与十八罗汉的故事故事纯属虚构，仅此娱乐。
EasyClick 入门科普
Mr、老鬼的博客/https://laoguicom.top/doc/2/
04-03 9333
EasyClick 入门科普 节点 选择器
移动端（APP）自动化脚本工具详细列举（autojs、easyclick、hamibot、ctrljs ...）
热门推荐
卡尔特斯
10-07 2万+
App自动化脚本工具分为需连接PC与无需连接PC方式需连接 PC：也就是写好的自动化脚本，需要将手机连接到电脑，运行脚本才能生效，这种通常用来做自动化测试，例如appiumairtestYyds.Auto。无需连接PC：这种一般都是App，什么意思？就是写好的脚本，需要跑在一个能解析这个脚本的App上，通常这样的自动化App都有支持一种到多种的脚本语言。这样就不需要连接PC，能实现一些自动化的脚本工具，到哪都能随时执行。如果是一些不需要抓取分析页面数据的自动化任务，可以使用按键精灵触动精灵。
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
vue移动端登录界面.zip
01-09
多套app登录页面
layui使用vue的例子
06-13
layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
Vue 实现登录界面验证码功能
01-19
登录界面 SIdentify 创建验证码组件，实现绘画出图片验证码 <canvas id=s-canvas width=contentWidth height=contentHeight></canvas> [removed] export default { name: 'SIdentify', props: { ...
EasyClick 简单的滑到底判断
EC_AK47的博客
06-26 912
/** *@param x1 x1坐标 *@param y1 y1坐标 *@param x2 w2坐标 *@param y2 y2坐标 *@param t 滑动时间（毫秒） * @return {Boolean} true 卡住 false 没卡住 */ dailihuadong = function (x1, y1, x2, y2, t) { var cap = agentEvent.fastScreenshot("/sdcard/a.jpg"); if (cap != nu
【工具】【安卓】EasyClick安卓代理模式批量激活器【Beta】,基于官方1.13激活器
Mr_老冷的博客
01-30 939
【工具】【安卓】EasyClick安卓代理模式批量激活器【Beta】,基于官方1.13激活器
按键精灵_节点精灵_懒人助手_easyclick_手机模拟脚本思路总结
紫微斗数学习交流
07-19 2912
【代码】按键精灵_节点精灵_懒人助手_easyclick_手机模拟脚本思路总结。
EasyClick 蓝奏云+石墨文档实现热更新
EC_AK47的博客
04-20 2717
前言 不用服务器，不花一分钱来实现热更新 以下是本篇文章正文内容，下面案例可供参考 代码如下（示例）： let version = "1.0.1";//当前版本号 logw("Hello World -> " + version); var url = "http://www.iyuji.cn/iyuji/s/djZvbkxuWG5xRzJFd01mMEZUMElWdz09/1586859305326490";//讯飞语记分享链接 var x = http.httpGetDefault(url, 1
EasyClick 执行 shell命令
Mr、老鬼的博客/https://laoguicom.top/doc/2/
04-11 946
EasyClick 执行 shell命令
EasyClick跳转应用详情页
Mr、老鬼的博客/https://laoguicom.top/doc/2/
08-18 825
EasyClick跳转应用详情页 强行停止APP
EasyClick JSON数据常用示例
Mr、老鬼的博客/https://laoguicom.top/doc/2/
05-30 482
EasyClick JSON常用示例
使用easyclick几天后的经验
weixin_54540647的博客
01-12 5220
代理模式是短暂的root模式。 当手机重启之后，这个类似root的东西会消失。 total投屏会占用adb端口。也就是说,不要开投屏,和ec有冲突 Adb激活工具。(ec提供)给客户用的。用的时候就是激活，一次重启之后再连接电脑激活一次，拔下来就可以了。(类似激活冰箱设备管理器) 代理模式支持安卓10没有root的手机吗？ 测试了一下支持。 random 随机 logd 蓝色日志 红色日志 开机启动服务：开机启动你选择的无障碍，或者代理模式(不是开机启用脚本) 全局颜色：主要是标题栏，标签栏，等颜色 在
使用vue编写一个登录界面
09-17
### 回答1： 好的，我可以回答这个问题。使用 Vue 编写登录界面，可以先创建一个 Vue 组件，包含用户名和密码的输入框以及登录按钮。在组件中使用 Vue 的双向数据绑定来获取用户输入的用户名和密码，然后通过 Ajax 请求将用户名和密码发送到后端进行验证。如果验证通过，就跳转到主页面，否则提示用户输入错误。同时，可以使用 Vue 的路由功能来实现页面的跳转和管理。 ### 回答2： 使用Vue编写登录界面可以分为以下几个步骤： 1. 引入Vue库。在HTML文件的头部中引入Vue.js文件。 2. 创建Vue实例。在script标签中，使用new Vue()方法创建一个Vue实例。 3. 定义data属性。在Vue实例内部，定义data属性来存储表单中的用户名和密码。 4. 定义methods方法。在Vue实例内部，定义一个methods对象，其中包含一个用于处理表单提交的方法。 5. 编写HTML模板。在body部分，使用Vue的模板语法编写登录界面的HTML结构，并与Vue实例中的data属性进行绑定。 6. 绑定事件。在表单的提交按钮上添加@click事件来触发Vue实例中定义的方法。 7. 样式设计。使用CSS来设计登录界面的样式，可以使用Vue提供的class和style绑定来动态改变元素的样式。 通过以上步骤，我们就能够使用Vue编写一个简单的登录界面。在用户在输入用户名和密码后，点击提交按钮，Vue实例中定义的方法将被触发，我们可以在该方法中进行登录验证或跳转到其他页面等操作。同时，使用Vue的双向数据绑定机制，输入框中的内容会与Vue实例中的data属性相互同步，从而实现动态更新和交互。 ### 回答3： 使用Vue编写一个登录界面是非常简单的。首先，我们需要安装Vue的开发环境，并创建一个Vue项目。 在Vue项目的src文件夹下创建一个Login.vue组件，这个组件包含一个表单，用于用户输入用户名和密码。我们可以使用Vue的双向数据绑定来获取用户输入的值。在data对象中定义一个username和password属性，然后在input元素中使用v-model指令与这两个属性进行绑定。 接着，我们为登录按钮绑定一个点击事件，可以使用v-on指令或者@符号来监听点击事件，并调用登录函数。这个函数可以在methods对象中定义，可以在这个函数中实现登录逻辑，比如验证用户名和密码是否匹配等。 如果登录成功，我们可以使用Vue的路由功能进行页面跳转，也就是在methods中调用this.$router.push()，跳转到下一个页面。 最后，在App.vue中，使用<router-view></router-view>来渲染Login组件。 以上就是一个简单的使用Vue编写的登录界面的过程。虽然这只是一个基本的示例，但Vue的特性使得编写登录界面变得非常简单和高效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值