Vue3实现Form表单cron表达式生成和JSON渲染

cron表达式

效果

实现方式

安装： "vue3-cron-plus": "0.1.9",

import {vue3CronPlus} from "vue3-cron-plus"
import "vue3-cron-plus/dist/index.css" // 引入样式

        <el-form-item label="cron表达式" prop="cron">
          <el-input v-model="formData.cron" placeholder="cron表达式...">
            <template #append>
              <el-popover :visible="state.cronPopover" trigger="click" width="700px">
                <vue3CronPlus
                    i18n="cn"
                    max-height="600px"
                    @change="changeCron"
                    @close="closeDialog"
                />
                <template #reference>
                  <el-button @click="state.cronPopover = !state.cronPopover">
                    设置
                  </el-button>
                </template>
              </el-popover>
            </template>
          </el-input>
        </el-form-item>

const state = reactive({
  cronPopover: false,
  cron: ""
})

function changeCron(val) {
  if (typeof (val) !== "string") return false
  state.cron = val
  formData.value.cron = val
}

function closeDialog() {
  state.cronPopover = false
}

const DEFAULT_FORM_DATA: any = {

  cron: "", // cron表达式 输入或第三方组件
  
}

const formData = ref<any>(cloneDeep(DEFAULT_FORM_DATA))

JSON渲染

效果

实现方式

https://github.com/qiuquanwu/vue3-json-viewer

import JsonViewer from "vue3-json-viewer";
// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
import "vue3-json-viewer/dist/vue3-json-viewer.css";
const app = createApp(App);
app.use(JsonViewer);



<template>
  <div class="box">
    <h4>Light</h4>
    <JsonViewer :value="jsonData" copyable boxed sort theme="light"  @onKeyClick="keyClick"/>
    <h4>Dark</h4>
    <JsonViewer :value="jsonData" copyable boxed sort theme="dark"  @onKeyClick="keyClick"/>
  </div>
</template>

<script setup>
import {JsonViewer} from "vue3-json-viewer"
// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
import "vue3-json-viewer/dist/vue3-json-viewer.css";
import { reactive, ref } from "vue";
let obj = {
  name: "qiu",//string
  age: 18,//Array
  isMan:false,//boolean
  date:new Date(),
  fn:()=>{},
  arr:[1,2,5],
  reg:/ab+c/i
};
const jsonData = reactive(obj);
const keyClick = (keyName)=>{
  console.log(keyName,"it was click")
}
</script>

<style>
.box{
  margin-top: 1rem;
}
</style>