Vue进阶之Vue无代码可视化项目(三)

Vue无代码可视化项目

  • 项目初始化
    • store的使用
      • DataSourceView.vue
      • stores/counter.ts
    • 开发模式按钮
      • store/editor.ts
      • LayoutView.vue
    • 导航条
      • 安装图标icon
        • package.json
      • store/debug.ts
      • src/components/AppNavigator.vue
        • AppNavigator.ts:
        • AppNavigator.vue:
      • theme样式
        • theme/reset.css
        • theme/variable.css
        • theme/base.css
        • theme/main.css
      • main.ts
      • App.vue
      • router/index.ts

项目初始化

store的使用

DataSourceView.vue

<template>
  <div class="about">
    <h1>
      DataSource {
  { store.count }}-{
  { store.double }}
      <button @click="store.increment">+</button>
      <button @click="store.decrement">-</button>
    </h1>
  </div>
</template>

<script lang="ts" setup>
import {
     useCounterStore} from '@/stores/counter'

// 丢掉响应式
// const {count,increment,double,decrement} = useCounterStore()
const store=useCounterStore()
</script>

<style>
@media (width >= 1024px) {
     
  .about {
     
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

stores/counter.ts

import {
    ref, computed } from 'vue'
import {
    defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
   
    const count=ref(0)

    const double=computed(()=>count.value*2)
    const increment=()=>{
   
      count.value++
    }
    const decrement=()=>{
   
      count.value--
    }


    return{
   
      count,
      double,
      increment,
      decrement
    }
})

请添加图片描述

开发模式按钮

创建editor.ts文件

  • store
    • editor.ts

store/editor.ts

import {
    ref } from 'vue'
import {
    defineStore } from 'pinia'

export const useEditorStore = defineStore('editor', () => {
   
  //  开发模式
  const debug=ref(false)

  const toggleDebug=()=>{
   
    debug.value=!debug.value
  }

  return{
   
    debug,
    toggleDebug
  }
})

LayoutView.vue

<template>
  <div class="about" :class="{debug:editorStore.debug}" @click="editorStore.toggleDebug()">
    <h1>Layout</h1>
  </div>
</template>

<script lang="ts" setup>
import {
     useEditorStore} from '@/stores/editor'
const editorStore = useEditorStore()
</script>
<style>
@media (width >= 1024px) {
     
  .about {
     
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .debug {
     
    border: 2px dashed #afafaf;
  }
}
</style>

请添加图片描述

导航条

安装图标icon

icon-park github
icon-park官网

package.json
"dependencies": {
   
   ...
    "@icon-park/vue-next":"1.4.2"
  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/671957.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

浅谈正向代理和反向代理(案例介绍)

公司一般主要以反向代理为主(最典型的Nginx负载均衡) 一、正向代理 客户端Client不直接访问服务器Server&#xff0c;通过代理服务器Proxy访问 正向代理是客户主动使用的代理 正向代理&#xff1a;最典型的案例就是通过爬虫爬取网络数据&#xff0c;如果请求次数过多该网站会…

十_信号13 - abort()

abort() 1 首先进程不能忽略 SIGABRT信号 2 要么在 SIGABRT信号的处理函数中 清理缓冲区并自己退出进程。如果信号处理函数中没有执行退出进程操作&#xff0c;返回到 abort()函数中&#xff0c;要求在 abort()函数中结束进程&#xff0c;不能返回到其调用者

[DDR5 Jedec 3-4] 模式寄存器 Mode Register MRR/MRW

依公知及经验整理,原创保护,禁止转载。 专栏 《深入理解DDR》 1. 概念 模式寄存器用于定义各种操作模式。在初始化过程中,可以通过重新执行MRS命令来更改模式寄存器的内容。即使用户只想修改模式寄存器变量的一个子集,在发出MRS命令时也必须编程所有变量。 只有当所有ban…

Netfilter/iptables

1. Netfilter组件图 https://en.wikipedia.org/wiki/Netfilter 其中&#xff1a; etables作用于数据链路层&#xff0c;arptables针对ARP, iptables/ip6tables针对IP层。 nftables 是新的包过滤组件. nft是相对应的新的用户态组件&#xff0c;用于替换etables,arptables,ipt…

支付宝支付(沙盒支付)

后端页面代码 Controller RequestMapping("/pay") public class PayController {private String orderId;Autowiredprivate OrdersService ordersService;Value("${appId}")private String appId;Value("${privateKey}")private String private…

字符串操作java

题目&#xff1a; 描述 给定长度为n的只有小写字母的字符串s&#xff0c;进行m次操作&#xff0c;每次将[l,r]范围内所有c1字符改成c2&#xff0c;输出操作完的字符串 输入描述&#xff1a; 第一行两个数n,m 第二行一个字符串s 之后m行&#xff0c;每行两个数l 、r两个字符…

基础—SQL—DCL(数据控制语言)小结

一、总结 在SQL分类中的DCL语句部分&#xff0c;主要讲到了两个部分的知识。 1、用户管理 用户管理&#xff0c;主要是管理哪些用户可以访问当前 mysql 数据库。 包括&#xff1a;创建用户、修改用户密码以及删除用户 2、权限控制 权限管理&#xff0c;主要是控制我们当前用户…

微软云计算之云计算平台、云操作系统Windows Azure

微软云计算平台 微软云计算平台微软的云计算技术Windows Azure组成 微软云操作系统Windows AzureWindows Azure概述Windows Azure计算服务Windows Azure存储服务全局命名空间体系架构存储域的层次结构双复制引擎文件流层分区层 Windows Azure ConnectWindows Azure CDNFabric控…

安卓组合控件(底部标签栏、顶部导航栏、增强型列表、升级版翻页)

本章介绍App开发常用的一些组合控件用法&#xff0c;主要包括&#xff1a;如何实现底部标签栏、如何运用顶部导航栏、如何利用循环视图实现3种增强型列表、如何使用二代翻页视图实现更炫的翻页效果。 底部标签栏 本节介绍底部标签栏的两种实现方式&#xff1a;首先说明如何通…

Linux系统tab键无法补齐命令-已解决

在CentOS中&#xff0c;按下tab键就可以自动补全&#xff0c;但是在最小化安装时&#xff0c;没有安装自动补全的包&#xff0c;需要安装一个包才能解决 bash-completion 1.检查是否安装tab补齐软件包&#xff08;如果是最小化安装&#xff0c;默认没有&#xff09; rpm -q ba…

提莫攻击 ---- 模拟算法

题目链接 题目: 分析: 如果两次攻击的时间差是>中毒的持续时间duration, 那么第一次攻击的中毒时间就是duration如果两次攻击的时间差是< 中毒的持续时间duration, 那么第一次攻击的持续时间就是这个时间差假设攻击了n次, 那么我们从第一次攻击开始计算时间差, 那么当我…

Halo DB 魔法之 pg_pcpu_limit

↑ 关注「少安事务所」公众号&#xff0c;欢迎⭐收藏&#xff0c;不错过精彩内容~ 前情回顾 前面已经介绍了“光环”数据库的基本情况和安装办法&#xff0c;今天来介绍一个新话题。 哈喽&#xff0c;国产数据库&#xff01;Halo DB! 三步走&#xff0c;Halo DB 安装指引 ★ Ha…

C++ A (1020) : 幂运算

文章目录 一、题目描述二、参考代码 一、题目描述 二、参考代码 #include<bits/stdc.h> using namespace std; typedef long long ll;void qq(ll a, ll b, ll m) {if (a 0) cout << 0 << endl;;ll out 1;a % m;while (b > 0){if (b & 1)//奇数的最…

LeetCode17电话号码的字母组合

题目描述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 解析 广度优先遍历或者深度优先遍历两种方式&#xff0c;广度优先…

【OpenHarmony】TypeScript 语法 ④ ( 函数 | TypeScript 具名函数和匿名函数 | 可选参数 | 剩余参数 | 箭头参数 )

文章目录 一、TypeScript 函数1、TypeScript 具名函数和匿名函数2、TypeScript 函数 与 JavaScript 函数对比3、TypeScript 函数 可选参数4、TypeScript 函数 剩余参数5、TypeScript 箭头函数 参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍 一、TypeScript 函数 1、Typ…

PHP MySQL图解学习指南:开启Web开发新篇章

PHP曾经是最流行的Web开发语言&#xff0c;许多世界领先的网站(如Facebook、维基百科和WordPress)都是用它编写的。PHP运行在Web服务器端&#xff0c;通过使用存储在MySQL数据库中的数据&#xff0c;使得网站可以为每一位访问者显示不同的定制页面。书中采用简单、直观的图示化…

bootstrap5-学习笔记2-模态框+弹窗+tooltip+popover+信息提示框

参考&#xff1a; Bootstrap5 教程 | 菜鸟教程 https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html Bootstrap 入门 Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 https://v5.bootcss.com/docs/getting-started/introduction/ 之前用bootstrap2和3比较多&#x…

15.使用Ollydbg分析处理hp减伤害的函数

上一个内容&#xff1a;14.Ollydbg的基本使用 在 9.游戏中真正的无敌 里找了处理hp减伤害函数的方法 Ollydbg对hp减伤害函数打一个断点&#xff0c;然后一步一步分析数据&#xff0c;下图是进入了hp减伤害函数之后被断点主的样子&#xff0c;然后这时的ecx是人物this地址&…

【刷题】初探递归算法 —— 消除恐惧

送给大家一句话&#xff1a; 有两种东西&#xff0c; 我对它们的思考越是深沉和持久&#xff0c; 它们在我心灵中唤起的惊奇和敬畏就会日新月异&#xff0c; 不断增长&#xff0c; 这就是我头上的星空和心中的道德定律。 -- 康德 《实践理性批判》 初探递归算法 1 递归算…

前端逆向之查看接口调用栈

一、来源 再分析前端请求接口数据的时候&#xff0c;其中有一个sid不知道是前端如何获取的&#xff0c;一般情况下只需要全局搜搜sid这个字符串或者请求接口的名称就可以了&#xff0c;基本都能找到sid的来源&#xff0c;但是今天这个不一样&#xff0c;搜什么都搜不到 接口地…